30分钟学会css
CSS 基本语法
CSS（Cascading 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; } |
[attribute=value] | 选择带有指定属性和值的 HTML 元素 | input[type="text"] { border: 1px solid black; } |
[attribute~=value] | 选择属性值包含指定词的元素 | a[class~="button"] { padding: 5px; } |
| `[attribute | =value]` | 选择属性值以指定值开头的元素 |
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 this |
|---|---|
margin: 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 = 12pt | font-size: 1pc; |
in | 英寸，绝对单位 | width: 1in; |
cm | 厘米，绝对单位 | width: 2.54cm; |
mm | 毫米，绝对单位 | width: 10mm; |
单位（Unit）用法的最佳实践
在网页设计中，推荐使用相对单位（如 em、rem、%）来实现页面的响应式布局和更好的用户体验。rem 通常用于设置字体大小，而 % 则常用于设置宽度和高度。
| ✅ Do this | ❌ Don’t do this |
|---|---|
font-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 this |
|---|---|
background-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 style="color: red;">这段文字是红色的。</p> - 内部样式表： 在 HTML 文档的
<head>标签中使用<style>标签定义样式。<head> <style> p { color: blue; } </style> </head> - 外部样式表： 将 CSS 样式定义在一个单独的
.css文件中，然后在 HTML 文档的<head>标签中使用<link>标签引入。<head> <link rel="stylesheet" href="style.css"> </head>
引入方式（Include）用法的最佳实践
推荐使用外部样式表来组织 CSS 代码，实现内容与样式的完全分离，提高代码的可维护性和可复用性。
| ✅ Do this | ❌ Don’t do this |
|---|---|
| 使用外部 CSS 文件 | 在多个 HTML 文件中重复编写相同的内部样式表 |
| 少量、局部的样式可以使用内联样式 | 大量使用内联样式，导致 HTML 代码臃肿且难以维护 |
掌握这些简单的规则结构，你就能优雅地控制网页的呈现，专注于样式设计而不是混淆内容结构，达到“心中有版，落笔生花”的境界。