4.2. 类选择器 (Class Selector)

根据元素的 class 属性来选择。一个 HTML 元素可以有多个 class，多个元素可以有相同的 class。这是最常用、最灵活的选择器之一。

语法： .classname

HTML 示例：

“`html

这段文字会高亮。

“`

CSS 示例：

“`css
.highlight {
background-color: yellow; / 所有 class=”highlight” 的元素背景变黄 /
}

/ 可以组合使用，选择同时具有 box 和 highlight 类的元素 /
.box.highlight {
border: 1px solid red;
}
“`

4.3. ID 选择器 (ID Selector)

根据元素的 id 属性来选择。在一个 HTML 文档中，每个 id 值必须是唯一的。ID 选择器的优先级很高。

语法： #idname

HTML 示例：

“`html

这是主要内容。

“`

CSS 示例：

“`css

header {

background-color: #f0f0f0; /* id 为 header 的元素背景变灰 */
padding: 10px;

}

main-content {

font-size: 18px; /* id 为 main-content 的元素字体变大 */
margin-top: 20px;

}
“`

注意： ID 选择器通常用于页面中独一无二的元素，如页眉、页脚、主内容区域等。对于需要重复使用的样式，应该使用类选择器。

4.4. 通用选择器 (Universal Selector)

选择页面上的所有 HTML 元素。

语法： *

示例：

css
* {
margin: 0; /* 清除所有元素的默认外边距 */
padding: 0; /* 清除所有元素的默认内边距 */
box-sizing: border-box; /* 重置盒模型计算方式 */
}

注意： 通用选择器会应用到页面上的每一个元素，可能会影响性能，慎用。上面的例子是常见的 CSS reset 或 normalize 样式中的一部分。

4.5. 分组选择器 (Grouping Selector)

将多个选择器分组，为它们应用相同的样式，用逗号 , 分隔。

语法： selector1, selector2, ...

示例：

“`css
h1, h2, h3 {
color: darkblue; / h1, h2, h3 的文字颜色都变为深蓝色 /
}

.info-box, .warning-box {
border: 1px solid gray; / 具有 info-box 或 warning-box 类的元素都有灰色边框 /
padding: 15px;
}
“`

4.6. 组合器 (Combinators) – 初步了解

除了基本选择器，CSS 还提供了一些组合器来选择元素之间的关系：

• 后代选择器 (Descendant Selector): 选择某个元素的后代元素（不一定是直接子元素）。
  • 语法：selector1 selector2 (用空格分隔)
  • 示例：div p { color: red; } (选择所有在 div 内部的 p 元素)
• 子选择器 (Child Selector): 选择某个元素的直接子元素。
  • 语法：selector1 > selector2
  • 示例：ul > li { border-bottom: 1px solid #ccc; } (选择所有直接父元素是 ul 的 li 元素)
• 相邻兄弟选择器 (Adjacent Sibling Selector): 选择紧接在另一个元素后的兄弟元素。
  • 语法：selector1 + selector2
  • 示例：h2 + p { margin-top: 0; } (选择紧接在 h2 元素后面的第一个 p 元素)
• 通用兄弟选择器 (General Sibling Selector): 选择某个元素后的所有兄弟元素。
  • 语法：selector1 ~ selector2
  • 示例：h2 ~ p { color: gray; } (选择 h2 元素后面的所有 p 元素)

对于新手，重点掌握元素、类、ID 和分组选择器，组合器可以在后续学习中深入了解。

5. CSS 盒模型 (Box Model)

理解盒模型是理解 CSS 布局的关键。在 CSS 中，所有 HTML 元素都可以被看作是一个矩形的盒子。这个盒子由四个部分组成：

1. Content (内容): 元素的实际内容区域，比如文本、图片。可以通过 width 和 height 属性设置其大小。
2. Padding (内边距): 内容区域和边框之间的空间。通过 padding 属性设置。内边距是透明的，其颜色由元素的背景决定。
3. Border (边框): 内边距和外边距之间的边界。通过 border 属性设置其样式、宽度和颜色。
4. Margin (外边距): 边框外部，用于控制元素与元素之间间距的空间。通过 margin 属性设置。外边距是透明的，它不会继承元素的背景颜色。

![CSS Box Model Diagram (Conceptual) – Imagine a diagram showing content, padding, border, margin layers from inside out]

默认的盒模型计算方式 (W3C 标准盒模型):

一个元素的总宽度 = width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right
一个元素的总高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top + margin-bottom

CSS3 中的 box-sizing 属性:

默认的盒模型计算方式有时不太直观。CSS3 引入了 box-sizing 属性来改变盒模型的计算方式。

• box-sizing: content-box; (默认值) – 元素的 width 和 height 只包含内容的尺寸。
• box-sizing: border-box; – 元素的 width 和 height 包含内容、内边距和边框的尺寸。这是更直观的计算方式，通常在实际开发中更常用。

示例：

“`css
.my-box {
width: 200px;
height: 100px;
padding: 20px; / 上下左右各 20px 内边距 /
border: 5px solid black; / 5px 黑色实线边框 /
margin: 10px; / 上下左右各 10px 外边距 /

/* 默认情况下 (content-box): */
/* 元素总宽度 = 200px (content) + 20px*2 (padding) + 5px*2 (border) = 250px */
/* 元素总高度 = 100px (content) + 20px*2 (padding) + 5px*2 (border) = 150px */

/* 如果使用 border-box: */
/* box-sizing: border-box; */
/* 元素总宽度 = 200px (包含 content, padding, border) + 10px*2 (margin) = 220px */
/* 元素总高度 = 100px (包含 content, padding, border) + 10px*2 (margin) = 120px */

}
“`

margin 合并问题： 当两个垂直方向上的外边距相遇时，它们会合并成一个外边距，其大小等于其中较大的那个外边距。这是初学者常遇到的一个点，了解即可，后续遇到时再深入研究。

6. 常用的 CSS 属性

CSS 属性非常多，涵盖了颜色、字体、背景、布局、动画等等。这里我们介绍一些最基础和最常用的属性。

6.1. 文本样式

• color: 设置文本颜色。值可以是颜色名 (red, blue)、十六进制值 (#ff0000)、RGB 值 (rgb(255, 0, 0)) 等。
• font-size: 设置字体大小。值可以是像素 (px)、百分比 (%)、em (em)、rem (rem) 等。
• font-family: 设置字体。可以指定多个字体，浏览器会优先使用列表中的第一个可用字体。
  • 示例：font-family: "Microsoft YaHei", Arial, sans-serif; (先找微软雅黑，没有则找 Arial，再没有则用无衬线字体)
• font-weight: 设置字体粗细。值可以是数字 (100 – 900) 或关键字 (normal, bold)。
• font-style: 设置字体风格。值可以是 normal, italic (斜体)。
• text-align: 设置文本对齐方式。值可以是 left, right, center, justify (两端对齐)。
• text-decoration: 设置文本装饰线。值可以是 none (无装饰线)、underline (下划线)、overline (上划线)、line-through (删除线)。
• line-height: 设置行高。可以控制行与行之间的垂直间距。
• letter-spacing: 设置字母间距。
• word-spacing: 设置单词间距。

6.2. 颜色和背景样式

• color: 前面已介绍，设置文本颜色。
• background-color: 设置元素背景颜色。
• background-image: 设置元素背景图片。
  • 示例：background-image: url('images/background.png');
• background-repeat: 控制背景图片是否以及如何重复。值可以是 repeat (默认，平铺)、no-repeat (不重复)、repeat-x (水平平铺)、repeat-y (垂直平铺)。
• background-position: 设置背景图片的起始位置。值可以是关键字 (top, bottom, left, right, center) 或坐标 (50% 50%, 10px 20px)。
• background-size: 设置背景图片的大小。值可以是 auto (默认)、cover (覆盖整个元素)、contain (包含在元素内，不裁剪)、具体尺寸 (100% auto, 200px 100px)。
• opacity: 设置元素的透明度。值从 0.0 (完全透明) 到 1.0 (完全不透明)。

6.3. 盒模型相关样式 (已在盒模型部分介绍，这里列举具体属性)

• width: 设置元素内容区域的宽度。
• height: 设置元素内容区域的高度。
• padding: 设置内边距。
  • padding-top, padding-right, padding-bottom, padding-left (单独设置)
  • 简写方式：padding: 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: 1px solid black; (宽度 1px，样式实线，颜色黑色)
  • 可以单独设置某个边：border-top: 2px dashed red;
• margin: 设置外边距。
  • margin-top, margin-right, margin-bottom, margin-left (单独设置)
  • 简写方式同 padding。
  • 特别注意 margin: 0 auto;：当元素是块级元素且设置了宽度时，margin-left: auto; 和 margin-right: auto; 可以使其在父容器中水平居中。

6.4. 显示与定位 (初步了解 display)

• display: 控制元素生成何种类型的盒。这是非常重要的布局属性。
  • block: 块级元素，独占一行，可以设置宽高，默认占满父容器宽度。（例如：div, p, h1, ul, li）
  • inline: 行内元素，不独占一行，宽高由内容决定，不能设置宽高（width, height, margin-top, margin-bottom 无效），只受水平方向的 padding 和 margin 影响。（例如：span, a, img, strong, em）
  • inline-block: 行内块级元素，不独占一行，但可以设置宽高，像图片一样可以并排排列。（常用于需要并排显示且需要控制宽高的元素）
  • none: 元素完全隐藏，不占用空间。

示例：

“`css
.inline-elements span {
/ display: inline; / 默认就是 inline /
margin: 10px; / 水平方向有效 /
padding: 10px; / 水平垂直都有效 /
width: 100px; / 无效 /
height: 50px; / 无效 */
border: 1px solid red;
}

.block-elements div {
/ display: block; / 默认就是 block /
margin: 10px; / 水平垂直都有效 /
padding: 10px; / 水平垂直都有效 /
width: 100px; / 有效 /
height: 50px; / 有效 */
border: 1px solid blue;
}

.inline-block-elements button {
display: inline-block; / 从默认的 inline 改为 inline-block /
margin: 5px; / 水平垂直都有效 /
padding: 8px 12px; / 水平垂直都有效 /
width: 80px; / 有效 /
height: 30px; / 有效 /
background-color: lightgreen;
border: none;
}
``
理解display属性是理解元素在页面上如何排列的基础。早期的网页布局大量依赖inline-block和float`，现在更推荐使用 Flexbox 和 Grid 进行复杂布局。

7. CSS 单位

在 CSS 中，给属性设置值时，很多属性都需要指定单位。单位分为：

• 绝对单位： 不依赖于其他任何量，值是固定的。
  • px (像素): 最常用的单位，表示屏幕上的一个像素点。但要注意不同设备的像素密度可能不同。
  • pt (磅): 物理单位，1pt = 1/72 英寸。常用于印刷品样式。
  • cm, mm, in (厘米, 毫米, 英寸): 物理单位，在网页中不常用。
• 相对单位： 依赖于其他量，值是相对计算的。相对单位更灵活，有助于实现响应式设计。
  • % (百分比): 相对于父元素的尺寸或属性值。
  • em: 相对于父元素的字体大小。例如，如果父元素的 font-size 是 16px，那么 1em 就是 16px，1.5em 就是 24px。如果在同一个元素上设置 font-size: 1.2em;，它相对于父元素的字体大小；设置 padding: 1em;，它相对于 当前 元素的字体大小。
  • rem: 相对于根元素 (<html>) 的字体大小。这使得字体大小更容易管理，因为它只依赖一个基础值。如果 <html> 的 font-size 是 16px，那么 1rem 就是 16px，1.5rem 就是 24px，无论它在哪个嵌套层级。在字体大小设置上，rem 比 em 更推荐。
  • vw (Viewport Width): 相对于视口（浏览器窗口）宽度的 1%。100vw 表示占满整个视口宽度。
  • vh (Viewport Height): 相对于视口高度的 1%。100vh 表示占满整个视口高度。
  • vmax, vmin: 相对于视口宽度和高度中较大/较小的那个。

示例：

“`css
.parent {
font-size: 16px;
width: 500px;
}

.child {
font-size: 1.5em; / 相对于父元素 16px，所以是 16 * 1.5 = 24px /
width: 50%; / 相对于父元素 500px，所以是 500 * 0.5 = 250px /
padding: 10px; / 绝对单位 /
}

html {
font-size: 16px; / 设置根字体大小 /
}

.another-child {
font-size: 1.2rem; / 相对于 html 的 16px，所以是 16 * 1.2 = 19.2px /
width: 80vw; / 占视口宽度的 80% /
height: 50vh; / 占视口高度的 50% /
}
“`

理解并合理使用相对单位对于实现响应式设计至关重要。

8. 层叠与继承 (Cascading and Inheritance)

CSS 的全称是“层叠样式表”，”层叠”是其核心概念之一。当同一个元素被多个 CSS 规则选中并设置了相同的属性时，浏览器需要一个机制来决定应用哪个规则。这个机制就是层叠。

层叠的优先级判断通常遵循以下规则（从高到低）：

1. 重要性 (!important): 带有 !important 标记的规则具有最高优先级，慎用，因为它会破坏正常的层叠规则，使样式难以管理。
2. 来源 (Origin):
   • 作者样式 (你的 CSS 文件)
   • 用户样式 (用户在浏览器中的自定义设置)
   • 浏览器默认样式 (浏览器自带的样式)
     作者样式通常高于浏览器默认样式。
3. 选择器特异性 (Specificity): 这是最重要的优先级判断规则。特异性由选择器中 ID、类、元素等数量决定，数量越多，特异性越高。
   • ID 选择器 (#id) > 类选择器 (.class)、属性选择器 ([type="text"])、伪类 (:hover) > 元素选择器 (p)、伪元素 (::before)
   • 通用选择器 (*) 特异性最低。
   • 行内样式 (style="...") 的特异性高于任何选择器。
   • 特异性计算：通常可以简单理解为：统计规则中 ID 数量(a)、类/属性/伪类数量(b)、元素/伪元素数量(c)。将这些数字组成一个三元组 (a, b, c)。从左到右比较，哪个三元组的值更大，哪个规则优先级越高。例如：#header .logo p 特异性高于 .content p。
4. 书写顺序 (Order of Appearance): 如果多个规则特异性相同，后出现的规则会覆盖先出现的规则。

示例：

“`css
p { color: blue; } / 特异性 (0,0,1) /
.text { color: green; } / 特异性 (0,1,0) /

intro { color: red; } / 特异性 (1,0,0) /

/ 假设 HTML 是

/
/ 优先级：#intro (red) > .text (green) > p (blue) /
/ 最终 Hello 会显示为红色 /

/ 如果这样写 /
p { color: blue; }
p { color: green; } / 后出现的会覆盖 /
/ 最终 p 的颜色是绿色 /

/ 如果这样写 /
p { color: blue !important; } / 最高优先级 /
.text { color: green; }
/ 最终 Hello 显示为蓝色 /
“`

理解特异性是解决样式冲突的关键。

继承 (Inheritance):

某些 CSS 属性（主要是与文本相关的属性，如 color, font-family, font-size, line-height, text-align 等）具有继承性。如果父元素设置了这些属性，子元素如果没有自己的设置，就会继承父元素的属性值。

示例：

“`css
body {
font-family: Arial, sans-serif;
color: #333;
}

/ 所有 body 的后代元素（如 h1, p, div, span 等）如果没有自己设置字体和颜色，
都会继承 body 的设置 /

h1 {
color: navy; / h1 自己设置了颜色，不继承 body 的 color /
}

p {
/ p 没有设置 font-family 和 color，会继承 body 的设置 /
line-height: 1.8; / p 自己设置了行高 /
}
“`

盒模型相关的属性（如 width, height, margin, padding, border）通常不具有继承性。

9. CSS 注释

在 CSS 中，你可以使用 /* ... */ 来添加注释，这有助于解释代码或临时禁用某些规则。

示例：

“`css
/ 这是一个单行注释 /

/
这是一个多行注释
可以跨越多行
/

/ color: red; / / 这一行样式被注释掉了，不会生效 /
“`

养成写注释的好习惯，可以提高代码的可读性和可维护性。

10. 实践示例：构建一个简单的卡片

现在，让我们将学到的知识应用到一个简单的例子中：创建一个带有标题、文本和按钮的卡片。

index.html 文件：

“`html

“`

css/style.css 文件：

“`css
/ 通用样式，重置默认的 margin 和 padding，并设置盒模型 /
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/ 设置 body 基础样式 /
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif; / 设置字体 /
background-color: #f4f4f4; / 设置背景颜色 /
display: flex; / 使用 flexbox 布局，方便卡片居中（后续会学到） /
justify-content: center; / 主轴（水平）居中 /
align-items: center; / 交叉轴（垂直）居中 /
min-height: 100vh; / 最小高度占满视口高度 /
padding: 20px; / body 内边距 /
}

/ 卡片容器，用于辅助居中和布局 /
.card-container {
/ flexbox 已经负责居中，这里可以不做太多设置 /
width: 100%; / 容器宽度 /
max-width: 400px; / 最大宽度，避免在大屏幕上过宽 /
/ 可以添加阴影等 /
}

/ 卡片主体样式 /
.card {
background-color: #fff; / 白色背景 /
border-radius: 8px; / 圆角 /
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); / 阴影效果 /
padding: 20px; / 内边距 /
text-align: center; / 内部文本居中 /
}

/ 卡片标题样式 /
.card h2 {
color: #333; / 标题颜色 /
margin-bottom: 10px; / 标题下方外边距 /
font-size: 24px; / 字体大小 /
}

/ 卡片段落样式 /
.card p {
color: #666; / 文本颜色 /
line-height: 1.6; / 行高 /
margin-bottom: 20px; / 段落下方外边距 /
font-size: 16px; / 字体大小 /
}

/ 卡片按钮样式 /
.card-button {
display: inline-block; / 使按钮可以设置 padding 和 margin，并保持在行内 /
background-color: #007bff; / 蓝色背景 /
color: white; / 文字颜色 /
padding: 10px 20px; / 内边距 /
border: none; / 无边框 /
border-radius: 5px; / 圆角 /
cursor: pointer; / 鼠标悬停时显示手形 /
font-size: 16px; / 字体大小 /
transition: background-color 0.3s ease; / 添加过渡效果（鼠标悬停时背景颜色平滑变化） /
}

/ 鼠标悬停在按钮上时的样式（伪类） /
.card-button:hover {
background-color: #0056b3; / 鼠标悬停时背景颜色变深 /
}
“`

将这两个文件保存在正确的位置，然后在浏览器中打开 index.html 文件，你就能看到一个简单、漂亮的卡片了。

通过这个例子，我们应用了：
* 外部样式表
* 元素选择器 (body, h2, p)
* 类选择器 (.card-container, .card, .card-button)
* 通用选择器 (*)
* 盒模型 (padding, margin, box-sizing)
* 文本样式 (font-family, color, text-align, line-height)
* 背景样式 (background-color)
* 边框样式 (border-radius)
* 阴影 (box-shadow)
* display 属性 (display: flex, display: inline-block)
* 鼠标样式 (cursor)
* 伪类 (:hover)
* 过渡效果 (transition)

11. 接下来学什么？

恭喜你！你已经掌握了 CSS 的基础知识，能够为网页添加基本的样式和了解盒模型。这为你继续深入学习 CSS 打下了坚实的基础。

接下来，你可以学习：

• 更高级的选择器： 伪类 (:focus, :nth-child)、伪元素 (::before, ::after)、属性选择器 ([type])、组合器 (> + ~) 等。
• 更灵活的布局技术：
  • Flexbox (弹性盒子): 用于在一维方向（行或列）上布局元素，非常强大和常用。
  • Grid (网格布局): 用于在二维方向（行和列）上布局元素，适合创建复杂的页面网格。
• 响应式设计 (@media 查询): 如何使用 @media 规则为不同屏幕尺寸的设备应用不同的样式，使网页在手机、平板、电脑上都能良好显示。
• 定位 (Positioning): position 属性 (static, relative, absolute, fixed, sticky)，用于精确控制元素的位置。
• 浮动 (Float) 与清除浮动 (Clear): 传统的布局方法，虽然在 Flexbox/Grid 出现后用于布局的情况减少，但仍需理解其原理。
• CSS 动画和过渡 (Transitions and Animations): 如何创建元素的动态效果。
• CSS 变量 (Custom Properties): 如何定义和使用变量，提高样式管理效率。
• CSS 预处理器 (Sass, LESS): 扩展了 CSS 功能，如变量、嵌套、混合等，让 CSS 更强大易于维护。
• 开发者工具 (Developer Tools): 学习如何使用浏览器自带的开发者工具调试和检查 CSS 样式，这是日常开发中必不可少的技能。

CSS 的世界非常广阔，但万变不离其宗，基础概念是关键。多动手实践，尝试修改代码，观察效果，是学习 CSS 最好的方法。

总结

本教程详细介绍了 CSS 的基础知识，包括：
* CSS 的作用和与 HTML 的关系。
* 三种应用 CSS 的方式（行内、内部、外部），并强调了外部样式表的优势。
* CSS 的基本语法（选择器、属性、值、声明）。
* 常用的基本选择器（元素、类、ID、通用、分组）。
* 重要的盒模型概念（内容、内边距、边框、外边距）和 box-sizing 属性。
* 一些最常用的 CSS 属性（文本、颜色、背景、尺寸、盒模型相关）。
* CSS 单位（绝对单位和相对单位）。
* CSS 的层叠和继承机制。
* 如何添加 CSS 注释。
* 通过一个卡片示例巩固所学知识。
* 指明了后续的学习方向。

掌握了这些基础，你已经踏上了创建漂亮、结构清晰的网页的旅程。持续练习，大胆尝试，不断学习新的 CSS 技巧，你将能够设计出令人惊叹的网页界面！

祝你在学习 CSS 的道路上一切顺利！开始你的实践吧！