/
margin-bottom: 10px;
}
“`

4.5 伪元素 (Pseudo-elements)

伪元素用于选中元素内容的特定部分，或者在元素内容的前面或后面插入内容，而不需要修改 HTML 结构。伪元素以双冒号 :: 开头（虽然旧版本 CSS 使用单冒号，但双冒号是推荐的标准）。

• ::before：在元素内容的前面插入内容（需要配合 content 属性使用）。
• ::after：在元素内容的后面插入内容（需要配合 content 属性使用）。
• ::first-line：选中元素的第一行文本。
• ::first-letter：选中元素的第一个字母。
• ::selection：选中用户当前高亮的文本。

“`css
p::first-line { / 选中所有

元素的第一行 /
font-variant: small-caps; / 小号大写字母 /
}

h2::after { / 在所有

元素内容的后面插入一个点 /
content: ” .”;
color: gray;
}

a[href$=”.pdf”]::before { / 在指向 PDF 的链接前面插入一个图标 /
content: url(“pdf-icon-small.png”); / 插入图片内容 /
margin-right: 5px;
}

::selection { / 当用户选中文本时 /
background-color: yellow;
color: black;
}
“`

掌握这些选择器是编写高效和精准 CSS 的基础。你可以组合使用不同的选择器来定位更特定的元素（例如 div.container > p.important:last-child）。

第五章：核心概念 – 属性 (Properties) 和值 (Values)

选择器告诉我们对“谁”应用样式，而属性和值则告诉我们应用“什么”样式。CSS 提供了数百种属性，用于控制元素的方方面面。这里我们介绍一些最常用和最基础的属性。

5.1 颜色 (Color)

• color: 设置文本颜色。
• background-color: 设置元素背景颜色。

颜色的值有很多表示方法：

• 预定义颜色名: red, blue, green, white, black 等。
• 十六进制记号: #RRGGBB 或 #RGB，例如 #ff0000 (红色), #0000ff (蓝色), #336699。
• RGB 函数: rgb(red, green, blue)，值可以是 0-255 或 0%-100%，例如 rgb(255, 0, 0) (红色), rgb(0, 0, 255) (蓝色), rgb(51, 102, 153)。
• RGBA 函数: rgba(red, green, blue, alpha)，多一个 alpha 参数控制透明度，0 表示完全透明，1 表示完全不透明。例如 rgba(0, 0, 0, 0.5) (半透明黑色)。
• HSL 函数: hsl(hue, saturation, lightness)，基于色相、饱和度、亮度。例如 hsl(0, 100%, 50%) (红色)。
• HSLA 函数: hsla(hue, saturation, lightness, alpha)，HSL 加上透明度。

css
p {
color: #333; /* 深灰色文本 */
background-color: rgba(255, 255, 0, 0.2); /* 半透明黄色背景 */
}

5.2 文本和字体 (Text and Font)

• font-family: 设置字体。可以指定多个字体作为备选，浏览器会按顺序查找用户系统中可用的字体。
  css
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  注意： 如果字体名称包含空格，需要用引号括起来。通常建议以一个通用字体族（如 sans-serif, serif, monospace）作为备选列表的最后一个。
• font-size: 设置字体大小。常见单位有 px (像素), em (相对于父元素字体大小), rem (相对于根元素 html 字体大小), % (相对于父元素字体大小的百分比)。
  css
font-size: 16px;
font-size: 1.2em; /* 父元素字体大小的 1.2 倍 */
font-size: 1.5rem; /* 根元素字体大小的 1.5 倍 */
font-size: 120%;
• font-weight: 设置字体粗细。常用值有 normal, bold，或数字值 100-900 (400 对应 normal, 700 对应 bold)。
  css
font-weight: bold;
font-weight: 700;
• font-style: 设置字体样式。常用值有 normal, italic (斜体), oblique (倾斜)。
• text-align: 设置文本对齐方式。常用值有 left, right, center, justify (两端对齐)。
• text-decoration: 设置文本装饰。常用值有 none (移除链接下划线等), underline, overline, line-through。
• line-height: 设置行高，即文本基线之间的距离。可以是一个数字（相对于字体大小的倍数）或具体单位。
  css
line-height: 1.5; /* 行高是字体大小的 1.5 倍 */
line-height: 24px;
• letter-spacing: 设置字母之间的间距。
• word-spacing: 设置单词之间的间距。
• text-transform: 控制文本的大小写。uppercase (全部大写), lowercase (全部小写), capitalize (首字母大写)。

“`css
h1 {
font-family: Georgia, serif;
font-size: 2em; / 根元素字体大小的 2 倍 /
font-weight: normal;
text-align: center;
text-decoration: underline;
}

p {
font-size: 1rem; / 根元素字体大小 /
line-height: 1.6;
text-indent: 2em; / 首行缩进 /
}
“`

5.3 尺寸 (Dimensions)

• width: 设置元素的宽度。
• height: 设置元素的高度。
• max-width: 设置元素的最大宽度。
• min-width: 设置元素的最小宽度。
• max-height: 设置元素的最大高度。
• min-height: 设置元素的最小高度。

值可以使用各种单位：px, %, em, rem, vw (viewport width, 视口宽度百分比), vh (viewport height, 视口高度百分比), auto (自动计算)。

“`css
div {
width: 500px;
height: 300px;
max-width: 100%; / 最大宽度不超过父元素的 100% /
min-height: 100px;
}

img {
max-width: 100%; / 图片宽度不超过其父容器的宽度 /
height: auto; / 高度按比例自适应 /
}
“`

5.4 背景 (Background)

• background-color: 设置背景颜色。
• background-image: 设置背景图片。值是 url()。
• background-repeat: 控制背景图片的重复方式。no-repeat (不重复), repeat (平铺), repeat-x (沿 x 轴重复), repeat-y (沿 y 轴重复)。
• background-position: 控制背景图片的初始位置。可以使用关键词 (如 top, center, bottom, left, right) 或百分比/长度值 (如 50% 50%, 10px 20px)。
• background-size: 控制背景图片的大小。auto, cover (覆盖整个元素，可能裁剪), contain (包含在元素内，保持比例，可能留白), 或具体尺寸。
• background-attachment: 控制背景图片是否随页面滚动。scroll (随滚动), fixed (固定在视口)。

也可以使用 background 缩写属性一次设置多个背景属性：

“`css
div {
/ background: color image repeat position / size attachment; /
background: #e0e0e0 url(“pattern.png”) repeat top left / 100px auto scroll;

/ 或者更简单的 /
background: url(“hero.jpg”) no-repeat center center / cover;
color: white; / 背景是图片时，设置文本颜色方便阅读 /
}
“`

第六章：核心概念 – CSS 盒模型 (Box Model)

理解 CSS 盒模型是进行网页布局的基础。网页上的每一个元素都可以被看作一个矩形的盒子，这个盒子由四个部分组成：

1. Content (内容): 元素的实际内容区域，如文本、图片等。其大小由 width 和 height 属性决定。
2. Padding (内边距): 内容区域和边框之间的空间。padding 是透明的，其背景色是元素的背景色。
3. Border (边框): 围绕在内边距和内容区域之外的边框。
4. Margin (外边距): 边框之外，元素与其他元素之间的空间。margin 是透明的，其背景色是其父元素的背景色或页面的背景色。

(图片来源: MDN Web Docs)

6.1 控制盒模型的各个部分

你可以分别控制盒模型的每个部分的四个方向（上、右、下、左）：

• Padding: padding-top, padding-right, padding-bottom, padding-left。也可以使用 padding 缩写属性：
  • padding: 10px; (上下左右都是 10px)
  • padding: 10px 20px; (上下 10px，左右 20px)
  • padding: 10px 20px 30px; (上 10px，左右 20px，下 30px)
  • padding: 10px 20px 30px 40px; (上 10px，右 20px，下 30px，左 40px)
• Border: border-width, border-style, border-color。也可以使用 border 缩写属性：border: width style color;。每个方向也可以单独设置：border-top, border-right, border-bottom, border-left。
  css
border: 1px solid black; /* 1px 粗细，实线，黑色 */
border-bottom: 2px dashed red; /* 底部是 2px 粗细，虚线，红色 */
border-radius: 5px; /* 圆角边框 */
• Margin: margin-top, margin-right, margin-bottom, margin-left。也可以使用 margin 缩写属性，用法同 padding。
  css
margin: 20px auto; /* 上下 20px，左右自动 (常用于块级元素水平居中) */
  注意： 相邻块级元素的上下 margin 会发生外边距折叠 (Margin Collapse)，最终的垂直外边距是两个元素中较大的那个，而不是它们的和。左右外边距不会折叠。

6.2 box-sizing 属性

默认情况下，CSS 盒模型是 content-box。这意味着你设置的 width 和 height 只包含内容区域。padding 和 border 的大小会额外增加元素的总尺寸。

css
div {
width: 200px;
padding: 20px;
border: 5px solid black;
}
/* 在 content-box 模型下，这个 div 的实际总宽度是 200px (content) + 20px*2 (padding) + 5px*2 (border) = 250px */

这在布局时常常令人困惑。box-sizing: border-box; 模型改变了这种计算方式。当你设置 box-sizing: border-box; 时，你设置的 width 和 height 会包含内容、内边距和边框。内边距和边框会从内容区域的大小中扣除。

css
div {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box; /* 改变盒模型 */
}
/* 在 border-box 模型下，这个 div 的实际总宽度就是 200px。 */
/* 内部内容区域的大小会是 200px - 20px*2 (padding) - 5px*2 (border) = 150px */

border-box 模型通常在布局时更直观和易于控制。很多 CSS reset 或 normalize 样式表会设置 * { box-sizing: border-box; } 作为全局规则。

第七章：核心概念 – 显示类型 (Display Property)

display 属性是 CSS 中最重要的属性之一，它决定了元素如何呈现在页面上，以及如何与其他元素互动。理解不同的显示类型对于布局至关重要。

常见的 display 值：

1. display: block;

   • 块级元素。总是从新行开始，并尽可能占据其父容器的全部可用宽度。
   • 可以设置 width, height, margin-top, margin-bottom, padding-top, padding-bottom 以及左右内外边距。
   • 常见的块级元素有 <div>, <p>, <h1> 到 <h6>, <ul>, <li>, <form>, <header>, <footer>, <article>, <section> 等。

2. display: inline;

   • 行内元素。不会强制换行，宽度和高度由其内容决定，只占据所需的空间。
   • 不能设置 width 和 height。
   • 不能设置 margin-top 和 margin-bottom (左右外边距可以设置)。
   • 不能设置 padding-top 和 padding-bottom (左右内边距可以设置，但不会影响相邻行元素的布局)。
   • 常见的行内元素有 <span>, <a>, <strong>, <em>, <img>, <br>, <input>, <label>, <select> 等。

3. display: inline-block;

   • 行内块级元素。可以像行内元素一样在同一行排列，但同时又拥有块级元素的特性。
   • 可以设置 width, height, margin, padding。
   • 常用于需要设置宽高但又希望它们在同一行排列的元素，比如导航菜单项、按钮等。

4. display: none;

   • 元素不会被显示，并且不占据任何空间。就像元素完全不存在一样。

“`css
/ 将 span 元素变为块级元素 /
span {
display: block;
width: 100px;
height: 50px;
background-color: lightblue;
margin-bottom: 10px;
}

/ 将 div 元素变为行内块级元素 /
div {
display: inline-block;
width: 150px;
height: 80px;
background-color: lightgreen;
margin-right: 10px;
}

/ 隐藏某个元素 /
.hidden {
display: none;
}
“`

还有一些其他的 display 值，如 flex 和 grid，它们是更现代、更强大的布局方式，我们将在后续学习或更高级的指南中介绍。对于基础入门，理解 block, inline, inline-block, none 已经足够。

第八章：定位 (Positioning)

CSS 的定位属性 (position) 允许你更精确地控制元素在页面上的位置。它与 top, right, bottom, left 属性配合使用。

1. position: static;

   • 默认值。元素按照正常的文档流排列。
   • 此时 top, right, bottom, left 属性无效。

2. position: relative;

   • 相对定位。元素仍然占据其在正常文档流中的空间。
   • 可以使用 top, right, bottom, left 属性相对于其正常位置进行偏移。
   • 相对定位的元素可以作为其子元素（如果子元素是绝对定位）的包含块（containing block）。

   html
<div style="border: 1px solid black;">
<p style="position: relative; top: 10px; left: 20px;">
这个段落相对于其正常位置向下偏移 10px，向右偏移 20px。
</p>
<p>这是另一个段落，位置正常。</p>
</div>

3. position: absolute;

   • 绝对定位。元素会从正常的文档流中移除，不再占据空间。
   • 可以使用 top, right, bottom, left 属性相对于其最近的已定位祖先元素（position 不是 static 的祖先元素）进行定位。如果找不到已定位的祖先元素，则相对于初始包含块（通常是浏览器视口或 <html> 元素）进行定位。
   • 绝对定位元素的大小通常由内容决定，除非设置了 width 和 height。
   • 可以使用 z-index 控制元素的堆叠顺序（值越大越靠上）。

   html
<div style="position: relative; width: 300px; height: 200px; border: 1px solid blue;">
这是一个相对定位的父容器。
<div style="position: absolute; top: 20px; right: 20px; background-color: yellow;">
这个绝对定位的子元素相对于父容器定位。
</div>
</div>

4. position: fixed;

   • 固定定位。元素会从正常的文档流中移除。
   • 可以使用 top, right, bottom, left 属性相对于浏览器视口 (viewport) 进行定位。
   • 元素在页面滚动时会保持固定位置，常用于创建固定头部、底部或侧边导航。
   • 可以使用 z-index 控制元素的堆叠顺序。

   css
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #f1f1f1;
padding: 10px 0;
text-align: center;
}
html
<div class="fixed-header">这是一个固定在顶部的标题</div>
<!-- 页面内容需要有足够的 padding-top 来避免被固定元素遮挡 -->
<div style="padding-top: 50px;">页面主要内容...</div>

5. position: sticky;

   • 粘性定位。元素起初按照正常文档流排列（类似于 relative），但在滚动超出某个阈值时，会固定在指定位置（类似于 fixed）。
   • 需要指定至少一个 top, right, bottom, left 属性才能生效。
   • 常用于实现滚动到一定位置时吸顶或吸底的效果。

   css
.sticky-sidebar {
position: sticky;
top: 10px; /* 滚动到距离视口顶部 10px 时固定 */
/* left/right/bottom 也可以 */
}

定位属性是实现一些特定布局效果的强大工具，但需要结合理解文档流和包含块的概念来使用。

第九章：层叠与特异性 (Cascading and Specificity)

CSS 的全称是“层叠样式表”，这里的“层叠”是 CSS 的一个核心概念。它决定了当多个样式规则应用到同一个元素上并且发生冲突时，哪条规则会最终生效。

层叠遵循以下规则（优先级从高到低）：

1. 重要性 (Importance): 带有 !important 标记的规则 > 普通规则。

   • !important 会强制应用该规则，但强烈不推荐过度使用它，因为它破坏了正常的层叠规则，使得调试和维护变得困难。

2. 来源 (Origin): 用户样式表 > 作者样式表 > 浏览器默认样式表。

   • 用户可以在浏览器中设置自己的样式表（User Stylesheet），优先级高于网站作者的样式。
   • 作者样式表（你写的 CSS）优先级高于浏览器内置的默认样式表（User Agent Stylesheet）。

3. 特异性 (Specificity): 选择器越具体的规则，优先级越高。这是最常见的冲突解决方式。

   • 特异性是通过给不同的选择器类型分配点值来计算的。一个常见的计算方法是：
     • 内联样式：1000 点
     • ID 选择器 (#id)：100 点
     • 类选择器 (.class)、属性选择器 ([attr])、伪类 (:pseudo-class)：10 点
     • 元素选择器 (element)、伪元素 (::pseudo-element)：1 点
     • 通用选择器 (*)、组合器 (>, +, ~, 空格)、否定伪类:not()内部的选择器不会增加特异性（但:not()` 本身算作 10 点）。
   • 比较特异性时，从左到右比较（1000s > 100s > 10s > 1s）。例如，(0,1,0) 比 (0,0,10) 高。
   • 例如：
     • p : 特异性 = (0,0,1)
     • .my-class : 特异性 = (0,10,0)
     • #my-id : 特异性 = (100,0,0)
     • div p : 特异性 = (0,0,2) (两个元素选择器)
     • #header p : 特异性 = (100,0,1) (一个 ID, 一个元素)
     • .container .item : 特异性 = (0,20,0) (两个类)

   “`css
   p { / (0,0,1) /
   color: blue;
   }
   .red-text { / (0,10,0) /
   color: red;
   }

   main-paragraph { / (100,0,0) /

   color: green;
   }
   html

   这是一个段落。

   ``
*p规则应用，颜色为 blue。
*.red-text规则应用，颜色变为 red (特异性更高)。
*#main-paragraph规则应用，颜色变为 green (特异性最高)。
* 如果元素还有内联样式

   `，则最终颜色是 orange (内联样式特异性最高 1000)。

4. 书写顺序 (Source Order): 如果多条规则具有相同的特异性，则在样式表中后面出现的规则会覆盖前面出现的规则。

理解层叠和特异性对于调试 CSS 冲突至关重要。当你发现某个样式没有生效时，很可能是被特异性更高的规则覆盖了。使用浏览器的开发者工具检查元素，可以看到哪些规则被应用，哪些被覆盖，以及覆盖的原因。

9.1 继承 (Inheritance)

某些 CSS 属性是可以继承的。这意味着如果你为一个父元素设置了这些属性，它的子元素会默认继承这个值，除非子元素自己也设置了相同属性的值。

常见的可继承属性有：

• 文本相关属性：color, font-family, font-size, font-weight, font-style, text-align, line-height, letter-spacing, word-spacing, text-transform 等。
• 列表属性：list-style。
• 某些表属性：border-collapse, border-spacing, caption-side, empty-cells。
• 用户界面属性：cursor, visibility。

不可继承的属性：

• 盒模型相关属性：width, height, margin, padding, border, box-sizing, display 等。
• 定位属性：position, top, right, bottom, left, z-index。
• 背景属性：background-color, background-image, background-repeat, background-position, background-size 等。

“`html

“`

理解继承可以帮助你写更简洁的 CSS，例如设置 body 或 html 的基本字体和颜色，让整个页面的元素都继承这些默认值。

第十章：开发者工具 (Developer Tools)

学习 CSS 最好的伙伴就是浏览器的开发者工具。几乎所有现代浏览器（Chrome, Firefox, Edge, Safari）都内置了强大的开发者工具，可以帮助你查看、调试和修改页面的 HTML、CSS 和 JavaScript。

如何打开开发者工具：

• 大多数浏览器：按 F12 键。
• 右键点击页面元素，选择“检查” (Inspect) 或“检查元素” (Inspect Element)。

使用开发者工具调试 CSS：

1. 元素面板 (Elements Panel): 查看页面的 HTML 结构。当你选中一个元素时，旁边的样式面板会显示所有应用到这个元素上的 CSS 规则。
2. 样式面板 (Styles Panel): 显示选中元素的 CSS 规则。
   • 你可以看到哪些规则是直接应用到元素上的，哪些是继承的。
   • 你可以看到哪些规则被特异性更高的规则覆盖了（通常被画上删除线）。
   • 你可以临时修改属性的值，或者添加新的属性，实时查看效果。这对于测试不同的样式非常有用。
   • 你可以看到该规则来自哪个文件及行号（如果是外部 CSS）。
3. 计算样式面板 (Computed Panel): 显示选中元素所有 CSS 属性的最终计算值。这里可以看到经过层叠、继承等规则处理后，元素实际拥有的样式值。这在你对哪个规则最终生效感到困惑时非常有帮助。
4. 盒模型视图: 通常在样式面板下方或旁边，会有一个可视化的盒模型图，显示选中元素的 Content, Padding, Border, Margin 的大小。鼠标悬停在盒模型图的各个部分，页面上对应的区域会高亮显示。

熟练使用开发者工具是每一个前端开发者必备的技能。它能极大地提高你调试 CSS 问题的效率。

第十一章：CSS 规范与兼容性

CSS 由万维网联盟（W3C）维护和发展。新的 CSS 模块和特性不断被添加到规范中。不同的浏览器在实现这些新特性时可能存在差异或滞后，这就是所谓的浏览器兼容性问题。

作为初学者，你使用的基础 CSS 属性（如颜色、字体、盒模型、显示类型、基本定位）在所有现代浏览器中都有很好的支持。但当你学习更高级的特性（如 Flexbox, Grid, 动画, 滤镜等）时，需要了解它们的支持情况。

• MDN Web Docs (Mozilla Developer Network): 是一个非常权威和全面的前端开发文档网站。查阅 CSS 属性或选择器时，MDN 页面底部通常会有一个兼容性表格，列出主流浏览器对该特性的支持情况。
• Can I Use: 一个专门查询 Web 技术浏览器兼容性的网站（caniuse.com）。输入 CSS 属性或选择器名称，就可以看到详细的兼容性报告。

在开发过程中，可以使用 CSS 预处理器（如 Sass, Less）来处理一些兼容性前缀问题，或者使用 PostCSS 这样的工具来自动添加浏览器前缀。但在基础入门阶段，先专注于掌握核心概念即可。

第十二章：下一步学习什么？

掌握了这篇指南中的基础知识后，你已经具备了使用 CSS 美化和简单布局网页的能力。但是 CSS 的世界远不止于此。接下来，你可以继续学习以下更高级或相关的概念：

• Flexbox (弹性盒子): 一种强大的现代布局模型，用于在容器中对项目进行水平或垂直方向的排列和对齐。是构建响应式布局的关键。
• Grid (网格布局): 另一种强大的二维布局模型，适用于创建复杂的网格结构，如整个页面的布局。
• 响应式设计 (Responsive Design): 使用媒体查询 (@media) 根据设备特性（屏幕宽度、分辨率等）应用不同的样式，使网站能在不同设备上良好显示。
• 伪类和伪元素的更多用法: 探索 :nth-child, :not, ::before, ::after 等在复杂选择和装饰中的应用。
• 过渡 (Transitions) 和 动画 (Animations): 使用 CSS 实现元素的平滑过渡和复杂动画效果。
• CSS 变量 (Custom Properties): 定义可复用的变量来存储颜色、字体大小等值，提高 CSS 的可维护性。
• CSS 方法论: 学习一些组织 CSS 代码的流行方法论，如 BEM (Block, Element, Modifier)，OOCSS (Object-Oriented CSS)，SMACSS 等，帮助你构建大型、可维护的 CSS 项目。
• CSS 预处理器: 学习 Sass, Less 等，它们提供了变量、嵌套、混入、函数等功能，使 CSS 更具编程性，提高开发效率。
• CSS 框架: 了解 Bootstrap, Tailwind CSS, Bulma 等 CSS 框架，它们提供了大量的预设样式和组件，可以快速构建美观的页面。

一步一个脚印，不断实践和探索，你会在 CSS 的世界中走得更远。

第十三章：实践出真知

理论知识固然重要，但学习 CSS 最有效的方式是实践。

• 动手写代码： 打开你的文本编辑器，创建一个 HTML 文件和一个 CSS 文件，尝试应用这篇指南中介绍的每一个选择器、属性和概念。
• 模仿： 找一个你喜欢的网页，尝试模仿它的某个部分（如导航栏、一个卡片、一个按钮）的样式和布局。使用开发者工具查看它是如何实现的（虽然高级布局可能使用了 Flexbox/Grid，但基础的颜色、字体、间距等可以模仿）。
• 做小项目： 从一个简单的静态页面开始，逐步增加复杂度，如一个个人简历页面、一个产品展示页面、一个简单的博客布局等。
• 参与挑战： 参加一些在线的 CSS 编码挑战平台（如 CodePen Challenges, Frontend Mentor, CSS Battle）来锻炼你的技能。

不要害怕犯错误，调试是学习过程中的重要组成部分。利用好开发者工具，分析问题，解决问题。

结语

恭喜你走出了学习 CSS 的第一步！本指南为你介绍了 CSS 的基本概念、语法、如何应用样式、核心的盒模型、显示类型、定位以及层叠规则。这些是构建任何网页外观的基础。

CSS 是一个庞大且不断发展的领域，但掌握了这些基础，你就已经拥有了继续深入学习和探索的钥匙。记住，HTML 是内容的骨架，CSS 是美丽的衣裳。通过它们，你可以创造出无限精彩的网页世界。

持续学习，不断实践，享受用 CSS 创造视觉效果的乐趣吧！祝你学习顺利！

---