---

零基础学 CSS 教程：打造网页的美丽外衣

欢迎来到网页设计的世界！如果你已经了解了 HTML，知道如何构建网页的基本骨架，那么恭喜你，你已经迈出了第一步。现在，是时候给你的骨架穿上漂亮的衣服，让它变得生动、吸引人了。这件“衣服”就是我们今天要学习的主角——CSS (Cascading Style Sheets)，层叠样式表。

本教程专为完全的 CSS 新手设计，我们将从最基础的概念讲起，一步步深入，直到你能够为自己的网页添加样式，控制布局，让它们看起来更加专业和美观。请耐心阅读，动手实践每一个代码示例，这是掌握 CSS 的不二法门。

本文目录：

1. 什么是 CSS？为什么需要它？

   • HTML 与 CSS 的关系：骨架与外衣
   • CSS 的重要性
   • CSS 能做什么？

2. CSS 基础语法：选择器、属性和值

   • 基本结构：规则集 (Rule Set)
   • 选择器 (Selectors)：告诉 CSS 你想改变谁
   • 属性 (Properties)：你想改变元素的什么
   • 值 (Values)：你想把属性改变成什么样
   • 声明块 (Declaration Block)

3. 如何将 CSS 应用到 HTML 文档？

   • 内联样式 (Inline Style)
   • 内部样式表 (Internal Style Sheet)
   • 外部样式表 (External Style Sheet)：推荐方式
   • 链接外部样式表 <link> 标签

4. 常用的基本选择器

   • 元素选择器 (Element/Type Selector)
   • 类选择器 (Class Selector)
   • ID 选择器 (ID Selector)
   • 群组选择器 (Grouping Selector)
   • 后代选择器 (Descendant Selector)

5. CSS 常用属性和值：让元素“动”起来

   • 文本样式：color, font-family, font-size, font-weight, text-align, text-decoration
   • 背景样式：background-color, background-image, background-repeat, background-position, background-size
   • 尺寸属性：width, height, min-width, max-width, min-height, max-height

6. CSS 核心概念：盒模型 (Box Model)

   • 理解盒模型：内容、内边距、边框、外边距
   • content (内容区)
   • padding (内边距)
   • border (边框)
   • margin (外边距)
   • 盒模型的应用与注意事项
   • box-sizing 属性：标准模型与怪异模型

7. CSS 单位 (Units)

   • 绝对单位：px
   • 相对单位：em, rem, %, vw, vh
   • 何时使用哪种单位？

8. CSS 显示属性 (Display Property)

   • block (块级元素)
   • inline (行内元素)
   • inline-block (行内块级元素)
   • none (隐藏元素)
   • 理解元素默认的显示类型

9. CSS 定位 (Positioning)

   • static (静态定位 – 默认)
   • relative (相对定位)
   • absolute (绝对定位)
   • fixed (固定定位)
   • sticky (粘性定位)
   • top, right, bottom, left 属性配合定位

10. CSS 继承 (Inheritance) 与 层叠 (Cascading) 和 特异性 (Specificity)

    • 继承：某些属性会自动传递给子元素
    • 层叠：当多个规则应用于同一元素时，如何决定哪个规则生效？
    • 特异性：衡量选择器权重的规则

11. CSS 伪类 (Pseudo-classes) 和 伪元素 (Pseudo-elements) 入门

    • 伪类：基于元素状态的选择器 (:hover, :focus, :first-child, :nth-child)
    • 伪元素：选择元素的特定部分 (::before, ::after, ::first-letter, ::first-line)

12. CSS 注释 (Comments)

    • 如何写注释以及注释的重要性

13. 使用开发者工具 (Developer Tools) 进行调试

    • 打开开发者工具
    • 检查元素和样式
    • 实时修改 CSS

14. 继续学习：布局（Flexbox & Grid）、响应式设计等

    • Flexbox 简介
    • CSS Grid 简介
    • 响应式设计基础
    • CSS 预处理器和框架简介

15. 学习建议与实践

    • 多写代码
    • 模仿优秀的网页
    • 阅读文档
    • 利用在线资源

16. 总结

---

1. 什么是 CSS？为什么需要它？

想象一下，HTML 就像是建筑物的骨架，它定义了网页的结构，比如哪里是标题，哪里是段落，哪里是图片。但是，仅仅有骨架的建筑物是冰冷和单调的。我们需要给它刷上颜色，安装窗户，设计漂亮的门廊，这样它才能变成一个温馨、美观的家。

CSS (Cascading Style Sheets) 的作用就 equivalent to 装饰、美化和布局。它负责控制网页元素的外观 (Presentation) 和布局 (Layout)。

• HTML 与 CSS 的关系：骨架与外衣

  • HTML 负责网页的结构和内容。
  • CSS 负责网页的样式和布局。
  • 它们是紧密协作的，一个网页通常同时使用 HTML 和 CSS。

• CSS 的重要性

  • 分离内容与样式： HTML 只关注内容的语义，CSS 关注内容的呈现。这使得网页更易于维护和更新。你可以改变整个网站的外观，而无需修改每一个 HTML 文件。
  • 提升用户体验： 美观的样式和合理的布局让网页更具吸引力，信息更易于阅读和理解。
  • 控制布局： CSS 提供了强大的布局工具（如盒模型、定位、Flexbox、Grid），让你能够精确控制元素在页面上的位置。
  • 响应式设计： CSS 是实现响应式设计的关键，让你的网页能够适应不同屏幕尺寸的设备（电脑、平板、手机）。

• CSS 能做什么？

  • 改变文字的颜色、大小、字体、对齐方式。
  • 设置元素的背景颜色或背景图片。
  • 添加边框和阴影。
  • 控制元素之间的间距（外边距和内边距）。
  • 改变元素的尺寸。
  • 排列页面上的元素（比如将多个图片放在一行）。
  • 创建动画和过渡效果。
  • 隐藏或显示元素。
  • 以及更多…

简单来说，如果你想让你的网页告别枯燥的黑白文字和简单的排列，变得丰富多彩、层次分明，你就需要学习 CSS。

2. CSS 基础语法：选择器、属性和值

CSS 的语法非常直观。一条 CSS 规则通常包含两个主要部分：选择器和声明块。

• 基本结构：规则集 (Rule Set)

  css
selector {
property: value;
property: value;
/* ... 更多声明 ... */
}

  • selector (选择器)：告诉浏览器你想对哪个 HTML 元素应用样式。
  • {} (大括号)：包含一个或多个声明。
  • property (属性)：你想修改的样式类型（比如颜色、字体大小）。
  • : (冒号)：分隔属性和值。
  • value (值)：你为属性设置的具体值（比如红色、16像素）。
  • ; (分号)：用于分隔不同的声明。注意： 最后一个声明可以不写分号，但为了保持习惯，建议每个声明后面都加上分号。

• 选择器 (Selectors)：告诉 CSS 你想改变谁

  选择器是 CSS 规则的起点。它们是用来“选中”你想要应用样式的 HTML 元素的模式。后续我们会详细讲解不同的选择器。

  例如：
  * h1 选择所有 <h1> 元素。
  * p 选择所有 <p> 元素。

• 属性 (Properties)：你想改变元素的什么

  属性是 CSS 预定义的一些用于控制元素样式的名称。比如：
  * color: 控制文本颜色。
  * font-size: 控制文字大小。
  * background-color: 控制背景颜色。
  * width: 控制元素宽度。
  * margin: 控制元素外边距。

• 值 (Values)：你想把属性改变成什么样

  值是属性的具体设定。它必须是该属性允许的合法值。比如：
  * color: red; 将文本颜色设置为红色。
  * font-size: 20px; 将文字大小设置为 20 像素。
  * background-color: blue; 将背景颜色设置为蓝色。
  * width: 50%; 将宽度设置为父元素宽度的 50%。

• 声明块 (Declaration Block)

  { property: value; property: value; } 这一整个部分被称为声明块。它包含了应用于所选元素的所有样式声明。

示例：

“`css
/ 这是一个 CSS 规则 /
h1 { / 选择所有 h1 元素 /
color: blue; / 将文本颜色设为蓝色 /
font-size: 30px; / 将字体大小设为 30 像素 /
}

p { / 选择所有 p 元素 /
color: #333; / 将文本颜色设为深灰色 (使用十六进制颜色码) /
line-height: 1.6; / 将行高设为字体的 1.6 倍 /
}
“`

3. 如何将 CSS 应用到 HTML 文档？

有三种主要方式可以将 CSS 应用到 HTML 文档：

1. 内联样式 (Inline Style)

   • 直接写在 HTML 元素的 style 属性中。
   • 语法：<element style="property: value; property: value;">Content</element>
   • 优点： 简单直接，优先级高。
   • 缺点： 只对单个元素有效，样式与内容混杂，难以管理和复用。强烈不推荐用于常规样式。

   html
<p style="color: red; font-size: 18px;">这段文字是红色的，且字号较大。</p>

2. 内部样式表 (Internal Style Sheet)

   • 写在 HTML 文档的 <head> 部分的 <style> 标签中。
   • 语法：
     html
<!DOCTYPE html>
<html>
<head>
<title>内部样式表示例</title>
<style>
/* 在这里写 CSS 规则 */
body {
background-color: lightblue;
}
h1 {
color: navy;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
   • 优点： 样式集中在一个地方，对当前文档的所有元素有效。
   • 缺点： 样式只对当前文档有效，无法在多个页面之间复用。如果样式很多，会使 HTML 文件变得臃肿。

3. 外部样式表 (External Style Sheet)

   • 将 CSS 规则写在一个单独的 .css 文件中。
   • 然后在 HTML 文档的 <head> 部分使用 <link> 标签引用这个 .css 文件。
   • 语法：
     • 创建一个文件，比如命名为 style.css，在里面只写 CSS 规则：
       css
/* style.css */
body {
font-family: Arial, sans-serif;
margin: 0; /* 移除默认外边距 */
}
h1 {
color: green;
text-align: center;
}
p {
font-size: 16px;
}
     • 在你的 HTML 文件 (index.html) 中引用它：
       html
<!DOCTYPE html>
<html>
<head>
<title>外部样式表示例</title>
<link rel="stylesheet" href="style.css">
<!-- rel="stylesheet" 说明这是样式表 -->
<!-- href="style.css" 指定 CSS 文件的路径 -->
</head>
<body>
<h1>外部样式表应用的标题</h1>
<p>这段文字的样式来自外部文件。</p>
</body>
</html>
   • 优点： 强烈推荐使用这种方式！
     • 代码分离： HTML 只管结构，CSS 只管样式，职责分明。
     • 易于管理： 所有样式集中在一个或几个 CSS 文件中，修改方便。
     • 代码复用： 同一个 CSS 文件可以被多个 HTML 页面引用，实现网站风格统一，提高开发效率。
     • 浏览器缓存： 浏览器会缓存 CSS 文件，加快后续页面加载速度。

总结： 对于大多数网页开发而言，外部样式表是最佳实践。在学习和练习时，为了方便也可以先使用内部样式表，但请务必养成使用外部样式表的习惯。

4. 常用的基本选择器

选择器是 CSS 的灵魂，它决定了你的样式会作用于哪些元素。掌握好选择器是学习 CSS 的第一步。

• 元素选择器 (Element/Type Selector)

  • 直接使用 HTML 元素的标签名作为选择器。
  • 会选中页面上所有该类型的元素。
  • 示例：
    css
h2 {
color: purple;
}
span {
font-weight: bold;
}

• 类选择器 (Class Selector)

  • 选中所有具有特定 class 属性的元素。
  • 在 CSS 中，类选择器前面加上一个点 .。
  • 在 HTML 中，通过 class="类名" 来指定。
  • 一个元素可以有多个类，用空格隔开。
  • 优点： 可复用性高，可以将相同的样式应用到不同的元素上。
  • 示例：
    html
<p class="highlight">这段文字会被高亮显示。</p>
<div class="box highlight">这个盒子也会被高亮。</div>
css
.highlight {
background-color: yellow;
}
.box {
border: 1px solid black;
}

• ID 选择器 (ID Selector)

  • 选中具有特定 id 属性的唯一元素。
  • 在 CSS 中，ID 选择器前面加上一个井号 #。
  • 在 HTML 中，通过 id="ID名" 来指定。
  • 重要： 在一个 HTML 文档中，同一个 ID 值只能出现一次。ID 选择器的优先级很高。
  • 用途： 通常用于选中页面上独一无二的元素，比如网站 Logo、主导航栏等。
  • 示例：
    html
<div id="header">网站头部</div>
<p id="intro">介绍段落</p>
css
#header {
background-color: #eee;
padding: 10px;
}
#intro {
font-style: italic;
}

• 群组选择器 (Grouping Selector)

  • 当你希望对多个选择器应用相同的样式时，可以将它们用逗号 , 分隔开。
  • 可以减少重复的 CSS 代码。
  • 示例：
    css
h1, h2, h3 {
color: darkblue;
margin-bottom: 10px;
}
/* 等同于 */
/*
h1 {
color: darkblue;
margin-bottom: 10px;
}
h2 {
color: darkblue;
margin-bottom: 10px;
}
h3 {
color: darkblue;
margin-bottom: 10px;
}
*/

• 后代选择器 (Descendant Selector)

  • 选中作为另一个元素后代的所有特定元素（后代可以是子元素、孙子元素等等）。
  • 使用空格将两个选择器分隔开。
  • 语法：ancestor descendant { ... }
  • 示例：
    html
<div class="article">
<p>这是文章内容。</p>
<p>这是另一段内容。</p>
</div>
<footer>
<p>这是页脚信息。</p>
</footer>
css
.article p { /* 只选中 class 为 article 的 div 里面的 p 元素 */
color: brown;
}
/* footer p { 只选中 footer 里面的 p 元素 } */
/* p { 选中所有 p 元素 } */

小练习： 创建一个 HTML 文件和一个 CSS 文件，尝试使用上面提到的不同选择器来为不同的元素设置颜色、字体大小等样式。

5. CSS 常用属性和值：让元素“动”起来

CSS 有非常多的属性，这里我们介绍一些最常用、最基础的，它们能让你快速看到效果。

• 文本样式：

  • color: 设置文本颜色。值可以是颜色名 (red)、十六进制 (#ff0000)、RGB (rgb(255, 0, 0)) 等。
    css
p { color: blue; }
span { color: #00cc99; }
  • font-family: 设置字体。可以指定多个字体作为备选。浏览器会使用第一个安装在用户计算机上的字体。最后通常指定一个通用字体族 (如 sans-serif, serif)。
    css
body { font-family: "Helvetica Neue", Arial, sans-serif; }
h1 { font-family: Georgia, serif; }
  • font-size: 设置字体大小。常用单位有 px (像素)、em (相对于父元素字体大小)、rem (相对于根元素 <html> 字体大小)。
    css
p { font-size: 16px; }
h2 { font-size: 1.5em; } /* 相对于父元素的 1.5 倍 */
  • font-weight: 设置字体粗细。常用值有 normal (普通), bold (粗体), bolder, lighter，或数字 100-900 (400 对应 normal, 700 对应 bold)。
    css
strong { font-weight: bold; }
.thin-text { font-weight: 300; }
  • text-align: 设置文本对齐方式。常用值有 left, right, center, justify (两端对齐)。
    css
h1 { text-align: center; }
.article-body { text-align: justify; }
  • text-decoration: 设置文本装饰线。常用值有 none (移除下划线，常用于链接), underline, overline, line-through。
    css
a { text-decoration: none; } /* 移除链接的下划线 */

• 背景样式：

  • background-color: 设置元素背景颜色。
    css
body { background-color: #f0f0f0; }
.card { background-color: white; }
  • background-image: 设置元素背景图片。值是图片的 URL (url('图片路径'))。
    css
body {
background-image: url('images/background.jpg');
}
  • background-repeat: 控制背景图片是否重复以及如何重复。常用值 no-repeat (不重复), repeat (水平垂直都重复), repeat-x (水平重复), repeat-y (垂直重复)。
    css
.pattern {
background-image: url('images/small-pattern.png');
background-repeat: repeat; /* 平铺 */
}
.hero {
background-image: url('images/hero-image.jpg');
background-repeat: no-repeat;
}
  • background-position: 设置背景图片的位置。值可以是关键词 (top, center, bottom, left, right) 或百分比或像素值 (center top, 50% 50%, 10px 20px)。
    css
.hero {
background-image: url('images/hero-image.jpg');
background-repeat: no-repeat;
background-position: center top; /* 图片顶部居中 */
}
  • background-size: 设置背景图片的大小。常用值 auto (默认), cover (覆盖整个元素，可能会裁剪图片), contain (包含在元素内，不裁剪，可能会留白)。
    css
.hero {
background-image: url('images/hero-image.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover; /* 让图片覆盖整个区域 */
}
  • 简写属性 background: 可以将多个背景属性合并写在一起（顺序通常是 color image repeat attachment position / size）。
    css
body {
background: #f0f0f0 url('images/background.jpg') no-repeat center top / cover;
}

• 尺寸属性：

  • width: 设置元素的宽度。
  • height: 设置元素的高度。
  • 值可以是像素 px、百分比 %、相对单位 em/rem，或 auto (默认，根据内容决定)。
  • min-width, max-width, min-height, max-height: 设置元素的最小/最大宽度或高度。非常重要，特别是在响应式设计中，用来防止元素过大或过小。
    css
div {
width: 300px;
height: 200px;
background-color: lightgray;
}
img {
max-width: 100%; /* 图片最大宽度不超过其父元素的宽度 */
height: auto; /* 高度按比例自动调整，保持图片宽高比 */
}
.container {
min-width: 320px; /* 容器最小宽度 */
}

6. CSS 核心概念：盒模型 (Box Model)

盒模型是理解 CSS 布局的关键！在 CSS 中，每一个 HTML 元素都可以被看作是一个矩形的“盒子”。这个盒子由四个部分组成：内容 (content)、内边距 (padding)、边框 (border) 和外边距 (margin)。

想象一个真实的快递包裹：
1. 内容 (Content): 包裹里的物品本身（文本、图片等）。这是盒子的最核心区域。
2. 内边距 (Padding): 物品和包裹内壁之间的填充物（泡沫、纸板等）。它在内容区域和边框之间创建一个空间。
3. 边框 (Border): 包裹的纸箱壁。它围绕着内边距（如果存在的话）和内容区域。
4. 外边距 (Margin): 包裹和其他包裹或墙壁之间的空间。它在边框之外，用于控制元素与周围元素之间的距离。

+-----------------------------------+
| Margin |
| +---------------------------+ |
| | Border | |
| | +-------------------+ | |
| | | Padding | | |
| | | +-----------+ | | |
| | | | Content | | | |
| | | | (实际内容) | | | |
| | | +-----------+ | | |
| | | | | |
| | +-------------------+ | |
| | | |
| +---------------------------+ |
| |
+-----------------------------------+

• content (内容区): 元素的实际内容所在的区域。它的尺寸由 width 和 height 属性控制（在标准盒模型下）。
• 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-style 值：solid (实线), dashed (虚线), dotted (点线), none (无边框)。
  • border 简写属性：border: 宽度 样式 颜色;
css
div {
border: 1px solid black; /* 1像素宽 黑色 实线边框 */
border-bottom: 2px dashed red; /* 底部是 2像素宽 红色 虚线边框 (会覆盖上面的 bottom) */
}

• margin (外边距): 位于边框之外，是元素与其他元素之间的空白区域。

  • margin-top, margin-right, margin-bottom, margin-left 分别设置上、右、下、左的外边距。
  • margin 简写属性：用法和 padding 类似。
    css
p {
margin: 20px; /* 所有方向外边距 20px */
}
h2 {
margin: 0 0 15px 0; /* 上右下左: 0, 0, 15px, 0 */
}
  • 外边距合并 (Margin Collapse): 垂直方向上相邻的两个外边距可能会合并成一个，合并后的外边距大小取两者中的较大值。这是一个重要的概念，在布局时需要注意。水平外边距不会合并。

• 盒模型的应用与注意事项:

  • 默认情况下，元素的总宽度 = 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。
  • 这意味着，如果你设置一个元素的 width: 300px;，然后加了 padding: 10px; 和 border: 1px solid black;，它的实际宽度将是 300 + 102 + 12 = 322px！这常常会让新手感到困惑。

• box-sizing 属性：标准模型与怪异模型

  • box-sizing: content-box; (默认值，标准盒模型)：如上所述，width 和 height 只包含内容区域的尺寸。
  • box-sizing: border-box; (IE 盒模型 / 怪异盒模型)：设置的 width 和 height 包含了内容区、内边距和边框的尺寸。这意味着如果你设置 width: 300px;，那么 padding 和 border 的大小会从这 300px 中“挤占”空间，而不是在外面“撑大”盒子。
  • 推荐： 在现代 CSS 开发中，很多开发者倾向于使用 box-sizing: border-box;，因为它使尺寸计算更加直观。你可以在 CSS 文件开头为所有元素设置这个属性：
    “`css
    • { / 星号选择器，选中所有元素 /
      box-sizing: border-box;
      }
      “`

小练习： 创建一个带有边框、内边距和外边距的 div 元素，观察它的大小和位置。尝试切换 box-sizing 的值，看看有什么区别。使用浏览器的开发者工具查看盒模型更容易理解。

7. CSS 单位 (Units)

在 CSS 中，我们用各种单位来指定尺寸、距离、角度等。这里主要关注长度单位。

• 绝对单位：

  • px (像素)：最常用的单位。一个像素对应屏幕上的一个点。它是绝对的，不会随父元素或屏幕大小变化而变化。但它在不同设备上（像素密度不同）可能会有视觉上的差异。

• 相对单位： 它们的大小是相对于其他元素的尺寸或视口（浏览器窗口）大小。

  • em: 相对于父元素的字体大小。如果一个元素的 font-size 是 16px，那么 1em 就是 16px；如果它的子元素的 font-size 设置为 1.5em，那么子元素的字体大小就是 16px * 1.5 = 24px。注意： em 的值是累积的，如果一个元素的字体大小是 1.2em，它的父元素是 1.2em，那么它的字体大小会是原始基础字体大小的 1.2 * 1.2 = 1.44 倍，这有时会让人困惑。
  • rem: 相对于根元素 (<html>) 的字体大小。默认情况下，浏览器的根元素字体大小通常是 16px。所以 1rem 通常等于 16px。使用 rem 可以避免 em 的累积问题，方便管理字体大小。
  • % (百分比)：
    • 对于尺寸 (width, height)，通常是相对于父元素的宽度或高度。
    • 对于字体大小 (font-size)，通常是相对于父元素的字体大小。
    • 对于内边距 (padding) 和外边距 (margin) 的水平值，是相对于父元素的宽度。
    • 对于内边距 (padding) 和外边距 (margin) 的垂直值，也是相对于父元素的宽度（这是一个需要注意的地方）。
  • vw (Viewport Width)： 相对于视口宽度的 1%。100vw 等于视口的完整宽度。
  • vh (Viewport Height)： 相对于视口高度的 1%。100vh 等于视口的完整高度。
  • vmin: vw 和 vh 中较小的一个。
  • vmax: vw 和 vh 中较大的一个。

• 何时使用哪种单位？

  • 对于大多数需要固定大小的元素（比如图标、小图片）或边框宽度，px 是一个简单的选择。
  • 对于文本大小，rem 是一个很好的选择，它让你可以更容易地通过改变根元素的字体大小来缩放整个页面的文本。
  • 对于需要根据父元素大小调整的元素（比如一个容器内的图片或盒子），% 很有用。
  • 对于需要根据视口大小调整的元素（特别是在响应式设计中），vw 和 vh 非常强大，比如让一个元素始终占据视口高度的一半 (height: 50vh;)。

8. CSS 显示属性 (Display Property)

display 属性是控制元素如何呈现在页面上的关键。每个 HTML 元素都有一个默认的 display 值。理解不同 display 值元素的行为非常重要。

• block (块级元素):

  • 总是从新的一行开始。
  • 默认占据其父元素的整个可用宽度。
  • 可以设置 width 和 height。
  • 可以设置 margin 和 padding 的所有四个方向。
  • 常见的块级元素：<div>, <p>, <h1>–<h6>, <ul>, <ol>, <li>, <article>, <section>, <aside>, <header>, <footer>, <nav>。

• inline (行内元素):

  • 不会从新的一行开始，多个行内元素会排在同一行，直到空间不足换行。
  • 宽度和高度由其内容决定，不能通过 width 和 height 属性设置。
  • 垂直方向的 margin (top/bottom) 和 padding (top/bottom) 不会影响其他元素的布局（虽然它们自身会有空间），水平方向的 margin (left/right) 和 padding (left/right) 会影响。
  • 常见的行内元素：<span>, <a>, <strong>, <em>, <br>, <img> (注意 <img> 有些行为像 inline-block)，<input>, <label>。

• inline-block (行内块级元素):

  • 结合了行内元素和块级元素的特点。
  • 元素会排在同一行（像行内元素）。
  • 可以设置 width 和 height（像块级元素）。
  • 可以设置 margin 和 padding 的所有四个方向，并且它们会正确地影响其他元素的布局。
  • 非常适合用于需要在一行内排列但又需要控制尺寸和边距的元素，比如导航菜单项、图片列表等。
  • 示例：
    css
.menu-item {
display: inline-block;
width: 100px;
padding: 10px;
margin: 5px;
border: 1px solid gray;
}

• none (隐藏元素):

  • 元素会被完全移除，不再占据页面空间。
  • 不会影响布局。
  • 与 visibility: hidden; 不同，后者会隐藏元素但元素仍占据空间。
  • 示例：
    css
.hidden {
display: none; /* 元素完全消失 */
}
.invisible {
visibility: hidden; /* 元素看不见，但占据空间 */
}

还有其他 display 值，如 flex 和 grid，它们是现代 CSS 布局的强大工具，将在后续学习中深入了解。

小练习： 创建几个 div 和 span 元素，观察它们默认的显示行为。然后尝试用 CSS 将 div 设置为 display: inline;，将 span 设置为 display: block; 或 display: inline-block;，看看它们的变化。

9. CSS 定位 (Positioning)

position 属性用于控制元素在页面上的精确定位。配合 top, right, bottom, left 这四个偏移属性使用。

• static (静态定位 – 默认):

  • 所有元素的默认定位方式。
  • 元素按照正常的文档流进行排列。
  • top, right, bottom, left 属性无效。

• relative (相对定位):

  • 元素首先按照正常文档流放置。
  • 然后通过 top, right, bottom, left 属性相对于其自身的原始位置进行偏移。
  • 偏移后的元素仍然占据其在正常文档流中的原始空间，不会影响其他元素的布局（即使它 visually 移动了）。
  • 重要： 相对定位的元素常常作为绝对定位元素的包含块（Containing Block），即绝对定位的子元素会相对于最近的非 static 定位祖先元素进行定位。

  css
.relative-box {
position: relative;
top: 10px; /* 向下偏移 10px */
left: 20px; /* 向右偏移 20px */
border: 1px solid red;
}

• absolute (绝对定位):

  • 元素会脱离正常文档流，不再占据空间。
  • 通过 top, right, bottom, left 属性相对于其最近的非 static 定位祖先元素进行定位。
  • 如果没有非 static 定位的祖先元素，它将相对于初始包含块（通常是 <html> 或 <body>）进行定位。
  • 常用于创建浮动、覆盖或弹出元素。

  html
<div class="container"> <!-- 这个父元素是相对定位 -->
<div class="absolute-box">
这个盒子是绝对定位的
</div>
</div>
css
.container {
position: relative; /* 提供定位上下文 */
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 50px;
}
.absolute-box {
position: absolute;
top: 10px;
right: 10px; /* 相对于 .container 的右上角定位 */
width: 100px;
height: 50px;
background-color: yellow;
}

• fixed (固定定位):

  • 元素会脱离正常文档流，不再占据空间。
  • 通过 top, right, bottom, left 属性相对于视口 (Viewport) 进行定位。
  • 元素的位置在页面滚动时保持不变，常用于创建固定头部、底部或侧边栏。

  css
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}

• sticky (粘性定位):

  • 基于用户的滚动位置。
  • 在元素位于视口内时，其行为类似于 position: relative;。
  • 当元素滚动到视口中的特定阈值（由 top, right, bottom, left 指定）时，其行为变为 position: fixed;，并“粘”在那个位置。
  • 常用于创建滚动时固定的导航栏或侧边栏。

  css
.sticky-nav {
position: sticky;
top: 0; /* 当元素顶部到达视口顶部时固定 */
background-color: #eee;
padding: 10px;
z-index: 100; /* 确保它在其他内容上面 */
}
  注意： sticky 定位需要父元素或容器元素有一定的可滚动区域才能生效。

小练习： 尝试创建不同定位的元素，观察它们如何脱离或保留在文档流中，以及 top, right, bottom, left 属性如何影响它们的位置。

10. CSS 继承 (Inheritance) 与 层叠 (Cascading) 和 特异性 (Specificity)

这三个概念解释了 CSS 样式如何被应用，以及当多个规则冲突时，哪个规则会“赢”。

• 继承 (Inheritance):

  • 某些 CSS 属性（主要是文本和字体相关的）会自动从父元素传递给其子元素。
  • 例如：color, font-family, font-size, text-align, line-height 等。
  • 如果一个子元素自己设置了这些属性，它自己的规则会覆盖继承的值。
  • 不是所有属性都会继承（比如盒模型的 margin, padding, border，以及 width, height, background 等就不会继承）。

  html
<div style="color: blue; font-family: Arial;">
这段文字是蓝色的 Arial 字体。
<p>
这段文字也继承了蓝色和 Arial 字体。
<span style="color: red;">但这个 span 自己设置了颜色为红色。</span>
</p>
</div>

• 层叠 (Cascading):

  • “层叠”是 CSS 名称中“C”的来源。它定义了多个样式表（比如浏览器默认样式、用户自定义样式、外部样式表、内部样式表、内联样式）和多条规则应用到同一个元素上时，如何最终决定元素的样式。
  • 层叠规则通常遵循以下优先级（从低到高）：
    1. 浏览器默认样式。
    2. 用户自定义样式（如果设置了）。
    3. 作者样式（你写的 CSS）。
       • 非 !important 的普通规则。
       • !important 规则（应该谨慎使用，因为它会破坏层叠规则，使调试变得困难）。
    4. 用户 !important 样式。
    5. 浏览器 !important 样式。
  • 在作者样式内部，当有多个规则应用于同一个元素并设置了同一个属性时，决定哪个规则生效需要看：特异性 > 来源顺序。

• 特异性 (Specificity):

  • 特异性是衡量一个 CSS 选择器有多“具体”或有多“有针对性”的指标。特异性高的规则会覆盖特异性低的规则（在层叠的作者样式内部）。
  • 特异性可以看作是三个数字的组合（比如 (a, b, c)）：
    • a: ID 选择器的数量 (#id)。
    • b: 类选择器 (.class)、伪类 (:hover)、属性选择器 ([type="text"]) 的数量。
    • c: 元素选择器 (p)、伪元素 (::before) 的数量。
  • 通用选择器 (*) 和继承的样式特异性为 0。
  • 内联样式的特异性最高，可以视为 (1, 0, 0) 或更高。
  • 比较特异性时，从左到右比较这三个数字。例如：
    • #header h1 的特异性：(1, 0, 1)
    • .nav ul li a 的特异性：(0, 2, 2)
    • p 的特异性：(0, 0, 1)
    • .highlight 的特异性：(0, 1, 0)
    • 比较：(1, 0, 1) > (0, 2, 2) > (0, 1, 0) > (0, 0, 1)
  • 当多个规则特异性相同时，来源顺序决定：后出现的规则会覆盖先出现的规则。

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

  main p { color: orange; } / 特异性 (1,0,1) /

  / HTML: /

  这段文字是什么颜色？

  ``
在这个例子中，#main p的特异性最高 (1,0,1)，所以文字会显示为 **橙色**。如果#main p这条规则不存在，那么.text的特异性 (0,1,0) 高于p的特异性 (0,0,1)，文字会显示为 **绿色**。如果.text` 也不存在，才会显示为 蓝色。

  css
/* style.css */
.box { background-color: yellow; } /* 特异性 (0,1,0) */
.box { background-color: cyan; } /* 特异性 (0,1,0) - 后出现 */
  这里两条规则特异性相同，但第二条规则在 CSS 文件中后出现，所以盒子的背景颜色是 青色 (cyan)。

理解特异性和层叠规则对于解决“为什么我的样式不生效”的问题至关重要。

11. CSS 伪类 (Pseudo-classes) 和 伪元素 (Pseudo-elements) 入门

它们允许你选择元素的特定状态或元素的一部分，而这些信息在 HTML 结构中是找不到的。

• 伪类 (Pseudo-classes):

  • 以一个冒号 : 开头。
  • 选择器后面加一个冒号和一个关键词。
  • 用于选择处于特定状态的元素。
  • 常见的伪类：
    • :hover: 当鼠标指针悬停在元素上时。
    • :active: 当元素被激活（例如点击）时。
    • :focus: 当元素（如输入框、链接）获得焦点时。
    • :link: 未访问过的链接。
    • :visited: 已访问过的链接。
    • :first-child: 作为其父元素的第一个子元素的元素。
    • :last-child: 作为其父元素的最后一个子元素的元素。
    • :nth-child(n): 作为其父元素的第 n 个子元素的元素 (n 可以是数字、关键词 odd/even、表达式)。

  css
a:hover {
color: orange; /* 鼠标悬停时链接变橙色 */
}
input:focus {
border-color: blue; /* 输入框获得焦点时边框变蓝 */
}
li:first-child {
font-weight: bold; /* 列表的第一个项目加粗 */
}
p:nth-child(even) { /* 选中偶数顺序的 p 元素 */
background-color: #f0f0f0;
}
  注意： 对于链接的伪类，通常按照 L-V-H-A (Link, Visited, Hover, Active) 的顺序书写，以确保 :active 能覆盖 :hover。

• 伪元素 (Pseudo-elements):

  • 以两个冒号 :: 开头（为了区分伪类和伪元素，虽然旧的 CSS 版本也支持一个冒号，但推荐使用两个）。
  • 用于选择元素的特定部分，或者在元素内容之前或之后插入一些生成的内容。
  • 常见的伪元素：
    • ::before: 在元素内容之前插入生成的内容。需要配合 content 属性使用。
    • ::after: 在元素内容之后插入生成的内容。需要配合 content 属性使用。
    • ::first-letter: 选中元素文本的第一个字母。
    • ::first-line: 选中元素文本的第一行。

  css
p::first-letter {
font-size: 2em; /* 段落首字母变大 */
font-weight: bold;
}
h2::after {
content: " ***"; /* 在所有 h2 后面加上 *** */
color: gray;
}
.required::before {
content: "* "; /* 在 class 为 required 的元素内容前加一个星号 */
color: red;
}
  伪元素创建的内容是 CSS 生成的，它们不是 HTML 结构的一部分，无法通过 JavaScript 直接选中或修改内容。

12. CSS 注释 (Comments)

在 CSS 代码中添加注释是非常重要的，可以帮助你和其他开发者理解代码的用途和逻辑。注释会被浏览器忽略。

• CSS 注释以 /* 开始，以 */ 结束。可以跨越多行。

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

  /
  这是一个
  多行注释
  /

  .header {
  / 设置头部背景颜色 /
  background-color: #f8f8f8;
  / 设置内边距 /
  padding: 20px;
  }
  “`
  养成写注释的好习惯，尤其是在复杂的样式规则或特定用途的选择器旁边。

13. 使用开发者工具 (Developer Tools) 进行调试

掌握浏览器内置的开发者工具是学习和使用 CSS 的必备技能。它们让你能够：
* 查看网页的 HTML 结构。
* 查看应用于特定元素的 CSS 样式，包括它们来自哪个文件和行号。
* 实时修改元素的 CSS 属性，立即看到效果（这些修改只在当前会话有效，不会保存到文件中）。
* 查看盒模型、计算属性值、调试布局问题。
* 查看网络请求、JavaScript 错误等（在你后续学习中会用到）。

如何打开开发者工具：
* 大多数浏览器（Chrome, Firefox, Edge, Safari）都可以通过以下方式打开：
* 按下 F12 键。
* 右键点击页面上的任何元素，选择“检查”或“审查元素” (Inspect Element)。
* 通过浏览器菜单：通常在“开发者”或“更多工具”下。

使用开发者工具检查样式：
1. 打开开发者工具。
2. 在“Elements”或“元素”面板中，点击左上角的选择元素按钮（通常是一个鼠标指针或箭头图标）。
3. 将鼠标移动到你想检查的网页元素上，它会在页面和 Elements 面板中被高亮显示。
4. 在开发者工具的右侧面板中，找到“Styles”或“样式”标签。
5. 这里会列出所有应用于该元素的 CSS 规则，以及它们来自哪个文件和行号。你可以看到哪些规则被应用了，哪些被更高特异性或更晚出现的规则覆盖了（通常会被划掉）。
6. 你可以在这里的任何属性或值上双击，然后输入新的值，或者点击空白区域添加新的属性，按 Enter 键查看实时效果。

通过开发者工具，你可以轻松地找出为什么某个样式没有生效，或者尝试不同的属性值来达到想要的效果。花时间熟悉你的浏览器开发者工具，它会极大地提升你的学习效率和解决问题的能力。

14. 继续学习：布局（Flexbox & Grid）、响应式设计等

本教程覆盖了 CSS 的基础知识，足以让你为网页添加基本的样式和控制简单的布局。但 CSS 的世界远不止于此。要成为一名熟练的前端开发者，你还需要学习：

• Flexbox (弹性盒子): 用于在一维空间（一行或一列）内对齐和分布元素的强大布局模式。非常适合构建导航栏、等高布局、垂直居中等。它是现代网页布局的重要工具，强烈建议深入学习。
• CSS Grid (网格布局): 用于在二维空间（行和列）内对齐和分布元素的布局模式。非常适合构建复杂的页面布局，如网站的整体框架。Flexbox 和 Grid 是互补的，共同构成了现代 CSS 布局的两大支柱。
• 响应式设计 (Responsive Web Design): 使用媒体查询 (@media) 让网页根据设备的屏幕尺寸、分辨率、方向等特性应用不同的样式，从而在各种设备上都能提供良好的用户体验。这是现代网页开发的标配。
• CSS 动画和过渡 (Animations & Transitions): 为网页元素添加平滑的动画效果，提升用户体验。
• CSS 预处理器 (Sass, Less, Stylus): 它们扩展了 CSS 的功能，增加了变量、嵌套规则、混合宏、函数等特性，让 CSS 更易于维护和组织，尤其是在大型项目中。
• CSS 框架 (Bootstrap, Tailwind CSS): 预先写好的一套 CSS 样式和组件库，可以快速构建具有专业外观的网页，但学习框架前打好 CSS 基础非常重要。

在你掌握了本教程的基础知识后，下一步强烈建议花时间系统学习 Flexbox 和响应式设计。

15. 学习建议与实践

学习 CSS 和学习任何技能一样，需要大量的练习。

• 多写代码： 理论知识很重要，但只有通过大量的实践，你才能真正掌握和理解。尝试模仿你看过的网页样式。
• 模仿优秀的网页： 找一些你喜欢的简单网页，尝试用 HTML 和 CSS 将它们重新实现出来。不必一开始就追求完美，先实现基本的布局和样式。
• 阅读文档： MDN Web Docs (developer.mozilla.org) 是最权威、最全面的 Web 技术文档网站。遇到不理解的属性或概念，去 MDN 上查阅。
• 利用在线资源： W3Schools, CSS-Tricks, Codecademy 等网站提供了大量的教程、示例和练习。
• 动手实践开发者工具： 这是你最好的调试伙伴。
• 不要害怕犯错： 遇到样式不生效或布局错乱是很正常的。利用开发者工具，仔细检查你的选择器、属性值和规则来源。
• 从小项目开始： 先从给简单的 HTML 页面添加样式开始，逐步尝试更复杂的布局和效果。

16. 总结

恭喜你完成了这篇零基础的 CSS 教程！你已经学习了：

• CSS 的作用和基础语法。
• 如何将 CSS 应用到 HTML。
• 常用的选择器来选中元素。
• 基础的文本、背景和尺寸属性。
• 至关重要的盒模型概念和 box-sizing。
• CSS 单位的种类和用法。
• display 属性控制元素的显示方式。
• position 属性控制元素的精确定位。
• 层叠、特异性和继承如何影响样式应用。
• 伪类和伪元素的应用。
• 如何使用注释和开发者工具。

这仅仅是 CSS 世界的开始。通过持续的实践和进一步学习 Flexbox、Grid、响应式设计等更高级的主题，你将能够创建出越来越精美、越来越强大的网页。

记住，CSS 是关于创造力和解决问题的过程。享受为你的网页添加“外衣”的乐趣吧！祝你学习顺利！

---