tk注册网站,世界互联网巨头,朝阳区建网站公司有帮云,专业手机网站建设公司排名CSS 基本语法
CSS#xff08;Cascading Style Sheets#xff09;是一种样式表语言#xff0c;用于描述 HTML#xff08;或 XML#xff09;文档的呈现。它可以控制网页元素的颜色、字体、布局等外观样式#xff0c;实现内容与表现的分离#xff0c;让网页设计更加灵活和…CSS 基本语法
CSSCascading Style Sheets是一种样式表语言用于描述 HTML或 XML文档的呈现。它可以控制网页元素的颜色、字体、布局等外观样式实现内容与表现的分离让网页设计更加灵活和高效。
在线体验一下 CSS 在线编辑器。
千万不要被「样式表」、「语言」吓到CSS 的语法也很直观常用的规则结构并不复杂用于日常网页美化绰绰有余花一点时间就能建立基本概念。
就是这些基本的规则结构却能让人优雅地控制网页的呈现专注于样式设计而不是混淆内容结构达到“心中有版落笔生花”的境界。
CSS 选择器语法
要为 HTML 元素添加样式首先需要选中这些元素。CSS 使用选择器来定位要应用样式的 HTML 元素。
CSS 语法作用示例element选择所有指定的 HTML 元素p { color: blue; }.class选择带有指定 class 属性的所有 HTML 元素.highlight { font-weight: bold; }#id选择带有指定 id 属性的 HTML 元素#header { background-color: #eee; }*选择文档中的所有 HTML 元素* { margin: 0; padding: 0; }element, element选择所有指定的 HTML 元素 (分组选择)h1, h2 { color: green; }element element选择指定元素内的所有指定后代元素div p { font-size: 16px; }element element选择指定父元素下的直接子元素ul li { list-style-type: none; }element element选择紧接在指定元素后的同级元素h2 p { text-indent: 2em; }element ~ element选择指定元素后的所有同级元素h2 ~ p { color: gray; }[attribute]选择带有指定属性的 HTML 元素a[target] { text-decoration: none; }[attributevalue]选择带有指定属性和值的 HTML 元素input[typetext] { border: 1px solid black; }[attribute~value]选择属性值包含指定词的元素a[class~button] { padding: 5px; }[attributevalue]选择属性值以指定值开头的元素element:pseudo-class选择指定元素的特殊状态a:hover { color: red; }element::pseudo-element选择指定元素的某个部分p::first-line { font-weight: bold; }
可选语法 (无直接对应此处强调选择器多样性)
CSS 的选择器机制非常强大除了上述基本类型还有更复杂的选择器组合和伪类/伪元素可以使用以更精确地定位元素。
最佳实践
为了代码的可读性和维护性建议使用语义化的 class 名称避免过度使用 ID 选择器并合理利用选择器的优先级规则。
✅ Do this❌ Don’t do this.product-title { ... }#productTitle { ... } (除非必要).btn-primary { ... }.button1 { ... } (语义不明确)
CSS 属性与值
选中元素后就可以使用 CSS 属性来设置元素的样式。每个属性都有一个或多个值用于指定属性的具体表现。
CSS 语法HTML (无直接对应描述作用)预览效果 (描述性)color: blue;设置文本颜色为蓝色文本显示为蓝色font-size: 16px;设置字体大小为 16 像素文本显示为 16 像素大小background-color: #f0f0f0;设置背景颜色为浅灰色元素背景显示为浅灰色width: 100px;设置元素宽度为 100 像素元素宽度为 100 像素height: auto;设置元素高度为自动元素高度根据内容自动调整margin: 10px;设置元素外边距为 10 像素元素周围有 10 像素的空白padding: 5px;设置元素内边距为 5 像素元素内容与边框之间有 5 像素的空白border: 1px solid black;设置边框为 1 像素实线黑色元素有 1 像素的黑色实线边框text-align: center;设置文本居中对齐元素内的文本居中显示display: block;设置元素为块级元素元素独占一行可以设置宽高display: inline;设置元素为行内元素元素与其他行内元素共享一行无法设置宽高display: inline-block;设置元素为行内块级元素元素像行内元素一样排列但可以设置宽高
属性Property用法的最佳实践
合理使用 CSS 属性遵循语义化原则避免过度使用行内样式并使用简写属性来提高效率。
✅ Do this❌ Don’t do thismargin: 10px 20px; (上下 10px左右 20px)margin-top: 10px; margin-bottom: 10px; margin-left: 20px; margin-right: 20px;使用外部 CSS 文件大量使用行内样式 (p style...)
CSS 常用单位
在 CSS 中许多属性值需要指定单位。常见的单位包括像素 (px)、百分比 (%)、em、rem 等。
CSS 单位说明示例px像素绝对单位在不同设备上大小固定font-size: 16px;%百分比相对于父元素的尺寸width: 50%;em相对单位相对于当前元素的字体大小padding: 2em;rem相对单位相对于根元素 (html) 的字体大小font-size: 1.2rem;vw视口宽度 (viewport width) 的百分比width: 50vw;vh视口高度 (viewport height) 的百分比height: 100vh;vmin视口宽度和高度中较小者的百分比max-width: 80vmin;vmax视口宽度和高度中较大者的百分比max-height: 90vmax;pt磅绝对单位主要用于打印font-size: 12pt;pc派卡绝对单位1pc 12ptfont-size: 1pc;in英寸绝对单位width: 1in;cm厘米绝对单位width: 2.54cm;mm毫米绝对单位width: 10mm;
单位Unit用法的最佳实践
在网页设计中推荐使用相对单位如 em、rem、%来实现页面的响应式布局和更好的用户体验。rem 通常用于设置字体大小而 % 则常用于设置宽度和高度。
✅ Do this❌ Don’t do thisfont-size: 1rem;font-size: 16px; (不利于用户调整字体)width: 100%;width: 960px; (可能在小屏幕上溢出)
CSS 颜色表示
CSS 提供了多种表示颜色的方式。
CSS 语法HTML (无直接对应)预览效果 (描述性)color: blue;使用预定义的颜色名称文本显示为蓝色color: #0000FF;使用十六进制颜色值文本显示为蓝色color: #00F;使用三位十六进制简写文本显示为蓝色color: rgb(0, 0, 255);使用 RGB 函数文本显示为蓝色color: rgba(0, 0, 255, 0.5);使用 RGBA 函数 (带透明度)文本显示为半透明的蓝色color: hsl(240, 100%, 50%);使用 HSL 函数文本显示为蓝色color: hsla(240, 100%, 50%, 0.5);使用 HSLA 函数 (带透明度)文本显示为半透明的蓝色
颜色Color用法的最佳实践
根据具体需求选择合适的颜色表示方法。十六进制颜色值常用于精确的颜色定义而 RGBA 和 HSLA 则适用于需要透明度的场景。
✅ Do this❌ Don’t do thisbackground-color: rgba(0, 0, 0, 0.8);background-color: black; opacity: 0.8; (可能影响子元素)使用有意义的颜色变量在代码中硬编码大量的颜色值
CSS 注释
CSS 注释用于在样式表中添加说明不会被浏览器解析。
/* 这是一行 CSS 注释 *//** 这是一个* 多行 CSS 注释*/注释Comment用法的最佳实践
编写清晰的 CSS 注释解释代码的作用和意图提高代码的可读性和可维护性。
✅ Do this❌ Don’t do this/* 设置导航栏的样式 *//* 样式 */ (过于简单没有提供足够的信息)/* 修复了在 IE 浏览器下的显示问题 */避免在注释中包含不友好的或攻击性的言论
CSS 盒模型
CSS 盒模型描述了 HTML 元素周围生成的矩形盒子。它由内容 (content)、内边距 (padding)、边框 (border) 和外边距 (margin) 组成。
-----------------
| Margin | 外边距
-----------------
| Border | 边框
-----------------
| Padding | 内边距
-----------------
| Content | 内容
-----------------盒模型Box Model用法的最佳实践
理解盒模型对于进行网页布局至关重要。可以通过调整 box-sizing 属性来改变盒模型的计算方式更方便地控制元素的尺寸。
✅ Do this❌ Don’t do this使用 box-sizing: border-box;混淆 content-box 和 border-box 的计算方式合理设置 margin 和 padding 来控制间距过度依赖 margin 或 padding 来实现布局
CSS 优先级与继承
当多个 CSS 规则应用于同一个 HTML 元素时浏览器会根据优先级规则来确定最终应用的样式。继承是指某些 CSS 属性会从父元素传递到子元素。
优先级由高到低
内联样式 (HTML 元素中的 style 属性)ID 选择器 (#id)类选择器 (.class)、属性选择器 ([attribute])、伪类选择器 (:hover)元素选择器 (element)、伪元素选择器 (::before)通配符选择器 (*)浏览器默认样式
优先级与继承用法的最佳实践
理解 CSS 的优先级和继承机制可以避免样式冲突并编写更简洁、可维护的 CSS 代码。
✅ Do this❌ Don’t do this合理利用选择器的优先级来覆盖样式过度使用 !important 来提升优先级 (除非必要)充分利用 CSS 的继承特性减少重复代码在每个元素上重复设置相同的样式
CSS 引入方式
CSS 可以通过三种方式引入到 HTML 文档中
内联样式 直接在 HTML 元素的 style 属性中定义样式。p stylecolor: red;这段文字是红色的。/p内部样式表 在 HTML 文档的 head 标签中使用 style 标签定义样式。headstylep { color: blue; }/style
/head外部样式表 将 CSS 样式定义在一个单独的 .css 文件中然后在 HTML 文档的 head 标签中使用 link 标签引入。headlink relstylesheet hrefstyle.css
/head引入方式Include用法的最佳实践
推荐使用外部样式表来组织 CSS 代码实现内容与样式的完全分离提高代码的可维护性和可复用性。
✅ Do this❌ Don’t do this使用外部 CSS 文件在多个 HTML 文件中重复编写相同的内部样式表少量、局部的样式可以使用内联样式大量使用内联样式导致 HTML 代码臃肿且难以维护
掌握这些简单的规则结构你就能优雅地控制网页的呈现专注于样式设计而不是混淆内容结构达到“心中有版落笔生花”的境界。
