CSS从0到1

[CSS 简介与基础语法](#CSS 简介与基础语法)
[CSS 选择器全解析](#CSS 选择器全解析)
[CSS 样式规则与常用属性](#CSS 样式规则与常用属性)
[CSS 盒模型详解](#CSS 盒模型详解)
[CSS 布局技术](#CSS 布局技术)
[CSS 高级特性](#CSS 高级特性)

1. CSS 简介与基础语法

1.1 什么是 CSS？

CSS 全称 Cascading Style Sheets（层叠样式表），它是一种样式表语言，用于描述 HTML 或 XML（包括如 SVG、MathML 等 XML 分支语言）文档的呈现。CSS 描述了元素应该如何在屏幕、纸张、语音或其他媒体上显示。

1.2 CSS 的工作方式

浏览器加载 HTML 文档时，会构建一个 DOM (Document Object Model，文档对象模型) 树。然后，它会加载并解析链接的 CSS 样式表，构建一个 CSSOM (CSS Object Model，CSS 对象模型) 树。最后，浏览器将 DOM 和 CSSOM 结合，创建一个渲染树 (Render Tree)，并根据渲染树来布局 (Layout) 和绘制 (Paint) 页面。

1.3 CSS 的引入方式

在 HTML 中应用 CSS 有三种主要方式，它们的优先级从高到低依次为：

内联样式 (Inline Styles) ：通过元素的 style 属性直接应用于单个元素。
html 复制代码
```
<p style="color: blue; font-size: 18px;">这段文字使用了内联样式。</p>
```
缺点：样式与结构混合，可维护性差，无法复用。

内部样式表 (Internal Style Sheet) ：在 HTML 文档的 <head> 标签内使用 <style> 标签定义。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <style>
        body { background-color: lightblue; }
        h1 { color: navy; }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
</body>
</html>

优点：样式与结构分离，作用于当前文档。

外部样式表 (External Style Sheet) ：将 CSS 代码保存在一个单独的 .css 文件中，然后通过 <link> 标签引入到 HTML 文档中。
html 复制代码
```

<link rel="stylesheet" type="text/css" href="styles.css">
```
css 复制代码
```
/* 在 styles.css 文件中 */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 20px;
}
```
优点：样式与结构彻底分离，可被多个页面复用，易于维护和缓存，是最佳实践。

1.4 CSS 基础语法

CSS 的核心语法规则由选择器 和声明块组成。

css 复制代码

/* 选择器 { 声明块 } */
p {
  color: red;         /* 属性: 值; */
  font-size: 16px;    /* 每条声明以分号结尾 */
}

选择器 (Selector)：指定了 CSS 规则将要应用到哪些 HTML 元素。
声明块 (Declaration Block) ：用大括号 {} 包裹，包含一条或多条声明。
声明 (Declaration) ：每条声明由一个属性 (Property) 和一个值 (Value) 组成，并用冒号 : 分隔。

2. CSS 选择器全解析

选择器是 CSS 的灵魂，它决定了我们能精准地"找到"并设置页面上哪些元素的样式。

2.1 基础选择器

基础选择器是 CSS 中最基本、最常用的选择器类型。

类型选择器 (Element Selector)：通过 HTML 元素的标签名来选择元素。

css 复制代码

p { color: blue; }         /* 所有 <p> 段落文本设为蓝色 */
h1 { font-size: 24px; }    /* 所有 <h1> 标题设为 24px */

类选择器 (Class Selector) ：使用点 . 加类名，选择所有带有该 class 属性的元素。一个元素可以有多个类。

css 复制代码

.highlight { background-color: yellow; } /* 所有 class="highlight" 的元素 */

html 复制代码

<p class="highlight">高亮段落</p>
<div class="box highlight">高亮的盒子</div>

ID 选择器 (ID Selector) ：使用井号 # 加 ID 名，选择带有该 id 属性的唯一元素。页面中 ID 应唯一。
css 复制代码
```
#header { background-color: #f0f0f0; } /* 选择 id="header" 的元素 */
```
html 复制代码
```
<div id="header">页面头部</div>
```
通配符选择器 (Universal Selector) ：使用星号 *，匹配页面上的所有元素。常用于重置浏览器默认样式。
css 复制代码
```
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
```

2.2 组合选择器

通过组合基础选择器，可以实现更复杂的选择逻辑。

后代选择器 (Descendant Selector) ：使用空格分隔，选择某个元素内部的所有后代元素（不只是直接子元素）。
css 复制代码
```
div p { color: green; } /* 选择 <div> 内部所有的 <p> 元素 */
```
子元素选择器 (Child Selector) ：使用大于号 > 分隔，选择某个元素的直接子元素。
css 复制代码
```
ul > li { list-style: none; } /* 选择 <ul> 的直接子元素 <li> */
```
相邻兄弟选择器 (Adjacent Sibling Selector) ：使用加号 + 分隔，选择紧跟在某个元素后面的第一个兄弟元素。
css 复制代码
```
h2 + p { margin-top: 0; } /* 选择紧跟在 <h2> 后面的 <p> 元素 */
```
通用兄弟选择器 (General Sibling Selector) ：使用波浪号 ~ 分隔，选择在某个元素后面的所有兄弟元素。
css 复制代码
```
.active ~ .item { opacity: 0.5; } /* 选择 .active 元素后面的所有 .item 兄弟元素 */
```

2.3 分组选择器

使用逗号 , 将多个选择器组合在一起，为它们应用相同的样式，避免重复代码。

css 复制代码

h1, h2, h3, .title {
  color: #333;
  font-family: 'Arial', sans-serif;
}

2.4 伪类与伪元素选择器

伪类 (Pseudo-classes) 和伪元素 (Pseudo-elements) 是 CSS 中非常强大的特性，它们允许你根据元素的状态、位置或内容来应用样式，而无需添加额外的 HTML 类或元素。

伪类 (😃：用于定义元素的特殊状态。

动态伪类 : :link, :visited, :hover, :active, :focus
结构伪类 : :first-child, :last-child, :nth-child(n), :nth-of-type(n), :only-child
否定伪类 : :not(selector)

css 复制代码

/* 链接的不同状态 */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; } /* 鼠标悬停时 */
a:active { color: green; } /* 点击瞬间 */
input:focus { border: 2px solid blue; } /* 元素获得焦点时 */

/* 结构伪类 */
ul li:first-child { font-weight: bold; } /* 第一个 <li> 元素 */
table tr:nth-child(even) { background-color: #f2f2f2; } /* 表格隔行变色 */
p:not(.intro) { line-height: 1.6; } /* 选择所有不带有 .intro 类的 <p> 元素 */

伪元素 (:😃：用于创建一些不在 DOM 树中的虚拟元素，并为其应用样式。
- ::before: 在元素内容的前面插入内容。
- ::after: 在元素内容的后面插入内容。
- ::first-line: 选择文本块的第一行。
- ::first-letter: 选择文本块的第一个字符。
css 复制代码
```
/* 在引用块前添加引号 */
blockquote::before {
  content: '"';
  font-size: 2em;
  color: #ccc;
}

/* 为段落的第一个字母设置特殊样式 */
p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 0.2em;
}

/* 清除浮动的经典用法 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
```
注意：content 属性是 ::before 和 ::after 生效的关键。

2.5 属性选择器

根据元素的属性或属性值来选择元素。

css 复制代码

/* 选择所有带有 title 属性的元素 */
[title] { cursor: help; }

/* 选择所有 type="text" 的 <input> 元素 */
input[type="text"] { width: 200px; }

/* 选择 class 属性值中包含 "menu" 的元素 */
[class*="menu"] { background-color: #f0f0f0; }

2.6 选择器优先级 (Specificity)

当多个 CSS 规则应用于同一个元素时，优先级决定了哪个规则会被最终应用。优先级是一个权重值，计算方式如下：

!important：最高优先级，会覆盖其他所有规则（谨慎使用）。
内联样式 (style 属性)：优先级为 1000。
ID 选择器：优先级为 100。
类选择器、伪类选择器、属性选择器：优先级为 10。
类型选择器、伪元素选择器：优先级为 1。
通配符选择器：优先级为 0。

计算示例:

p -> 1
.highlight -> 10
p.highlight -> 1 + 10 = 11
#header -> 100
#header .nav li -> 100 + 10 + 1 = 111

规则：

计算结果越大，优先级越高。
优先级相同，则后面定义的规则会覆盖前面的规则。
继承的样式优先级最低。

3. CSS 样式规则与常用属性

掌握了选择器后，我们来学习如何通过 CSS 属性来定义元素的具体样式。

3.1 文本样式 (Text Styles)

color: 设置文本颜色。
font-family: 设置字体族。
font-size: 设置字体大小。
font-weight: 设置字体粗细 (normal, bold, 100-900)。
font-style: 设置字体样式 (normal, italic, oblique)。
text-align: 设置文本水平对齐方式 (left, right, center, justify)。
text-decoration: 设置文本装饰 (none, underline, overline, line-through)。
text-transform: 控制文本大小写 (none, uppercase, lowercase, capitalize)。
line-height: 设置行高，常用于垂直居中或调整文本间距。
letter-spacing: 设置字符间距。
word-spacing: 设置单词间距。
text-indent: 设置首行文本缩进。

css 复制代码

p {
  color: #333;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  text-align: justify;
  text-indent: 2em; /* 首行缩进2个字符 */
}
a {
  text-decoration: none; /* 移除下划线 */
}
h1 {
  font-weight: bold;
  letter-spacing: 5px;
  text-align: center;
}

3.2 背景与边框 (Background & Border)

背景 (Background):
- background-color: 设置背景颜色。
- background-image: 设置背景图片 (url("image.jpg"))。
- background-repeat: 设置背景图片是否及如何重复 (repeat, repeat-x, repeat-y, no-repeat)。
- background-position: 设置背景图片的起始位置 (center, top left, 50% 50% 等)。
- background-size: 设置背景图片的尺寸 (cover, contain, 100px 200px 等)。
- background-attachment: 设置背景图片是否随页面滚动 (scroll, fixed)。
- 复合属性 : background
css 复制代码
```
.hero {
  background-color: #f0f0f0;
  background-image: url("pattern.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  /* 复合写法 */
  /* background: #f0f0f0 url("pattern.png") no-repeat center center / cover; */
}
```

边框 (Border):

border-width: 设置边框宽度。
border-style: 设置边框样式 (none, solid, dashed, dotted, double 等)。
border-color: 设置边框颜色。
复合属性 : border
border-radius: 设置边框圆角，是 CSS3 的常用属性。

css 复制代码

.box {
  border-width: 2px;
  border-style: solid;
  border-color: #ccc;
  /* 复合写法 */
  border: 2px solid #ccc;

  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  /* 简写 */
  border-radius: 10px 0 10px 0; /* 左上、右上、右下、左下 */
  border-radius: 50%; /* 圆形或椭圆形 */
}

4. CSS 盒模型详解

在 CSS 中，几乎所有的元素都可以看作是一个"盒子"。理解盒模型是掌握 CSS 布局的关键。

4.1 标准盒模型 (W3C Box Model)

一个元素的宽度和高度由以下几个部分组成：

内容区域 (Content) ：元素的实际内容，如文本、图片等。由 width 和 height 属性定义。
内边距 (Padding)：内容区域与边框之间的空间。
边框 (Border)：围绕在内边距和内容区域外的线条。
外边距 (Margin)：边框与其他元素之间的空间。

计算公式:

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

4.2 怪异盒模型 (IE Box Model) / `box-sizing` 属性

CSS3 引入了 box-sizing 属性，允许我们改变盒模型的计算方式。

box-sizing: content-box; (默认值)：遵循标准盒模型。width 和 height 仅指内容区域的宽度和高度。
box-sizing: border-box;：推荐使用 。width 和 height 属性包含了内容区域、内边距和边框的总宽度和高度。

css 复制代码

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}

在上面的例子中，.box 元素的最终宽度和高度将严格是 200px 和 100px，padding 和 border 的值会从 width 和 height 中内部扣除。这使得布局计算变得更加直观和简单，是现代 CSS 布局的基石之一。通常会在样式重置中全局设置：

css 复制代码

*, *::before, *::after {
  box-sizing: border-box;
}

5. CSS 布局技术

布局是 CSS 中最复杂也最有趣的部分。这里介绍几种核心的布局方式。

5.1 传统布局

普通流 (Normal Flow)：元素按照其在 HTML 中的出现顺序自上而下、从左到右排列。块级元素独占一行，内联元素共享一行。
浮动 (Float) ：最初设计用于实现文字环绕图片的效果。通过 float: left; 或 float: right; 可以使元素脱离普通流，浮动到容器的左侧或右侧。
- 缺点：容易导致父元素高度塌陷，需要通过清除浮动（如 .clearfix 技巧）来修复。现代布局中已较少作为主要布局手段。
定位 (Position) ：允许你精确地控制元素在页面上的位置。
- position: static; (默认)：元素遵循普通流。
- position: relative;：元素相对于其在普通流中的原始位置进行定位。通过 top, right, bottom, left 来调整位置，但其原始空间仍然保留。
- position: absolute;：元素完全脱离普通流，相对于其最近的已定位（position 值不是 static）的祖先元素进行定位。如果没有，则相对于整个文档（body）。
- position: fixed;：元素完全脱离普通流，相对于浏览器视口（Viewport）进行定位，即使页面滚动，它也会停留在固定位置。
- position: sticky;：一种混合定位，元素在跨越特定阈值前表现为 relative，之后表现为 fixed。常用于实现吸顶导航栏。

5.2 现代布局

Flexbox (弹性盒模型)：专为一维布局（行或列）设计，提供了强大的对齐、分布和重排能力。
- 将父元素设置为 display: flex; 即可使其成为一个 flex 容器，其直接子元素成为 flex 项目。
- 核心概念：主轴 (Main Axis)、交叉轴 (Cross Axis)、弹性方向 (flex-direction)、对齐方式 (justify-content, align-items)、伸缩性 (flex-grow, flex-shrink, flex-basis)。
css 复制代码
```
.container {
  display: flex;
  justify-content: space-between; /* 项目在主轴上均匀分布 */
  align-items: center; /* 项目在交叉轴上居中对齐 */
  gap: 20px; /* 项目之间的间距 */
}
.item {
  flex: 1; /* 项目可伸缩，占据剩余空间 */
}
```
CSS Grid (网格布局)：专为二维布局（行和列同时）设计，是最强大和复杂的 CSS 布局系统。
- 将父元素设置为 display: grid; 即可使其成为一个 grid 容器。
- 核心概念：网格线 (Grid Lines)、网格轨道 (Grid Tracks)、网格单元格 (Grid Cell)、网格区域 (Grid Area)。
- 通过 grid-template-columns 和 grid-template-rows 定义网格的列和行。
- 通过 grid-column 和 grid-row 或 grid-area 放置项目。
css 复制代码
```
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建3列，每列宽度相等 */
  grid-template-rows: 100px auto 100px; /* 创建3行，高度分别为100px, 自动, 100px */
  gap: 10px;
}
.header {
  grid-column: 1 / -1; /* 从第一列跨越到最后一列 */
}
```

5.3 响应式布局

响应式 Web 设计 (Responsive Web Design) 是一种让网页在不同尺寸的设备上都能良好显示的设计方法。

媒体查询 (Media Queries)：是实现响应式布局的核心。它允许你根据设备的特性（如屏幕宽度、高度、方向等）应用不同的 CSS 样式。
css 复制代码
```
/* 默认样式 (移动优先) */
.column {
  width: 100%;
}

/* 当屏幕宽度大于等于 768px 时应用 */
@media (min-width: 768px) {
  .column {
    width: 50%;
    float: left;
  }
}

/* 当屏幕宽度大于等于 992px 时应用 */
@media (min-width: 992px) {
  .column {
    width: 33.333%;
  }
}
```
提示：移动优先 (Mobile-First) 是一种推荐的开发策略，即先编写针对移动设备的样式，然后通过媒体查询为更大的屏幕添加样式。

6. CSS 高级特性

6.1 CSS 渐变 (Gradients)

CSS 渐变允许你创建平滑的颜色过渡效果，无需使用图片。

线性渐变 (Linear Gradient)：颜色沿着一条直线过渡。

css 复制代码

.box {
  background: linear-gradient(to right, red, yellow); /* 从左到右，红到黄 */
  background: linear-gradient(45deg, blue, green); /* 45度角，蓝到绿 */
  background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,0,0,1)); /* 透明度渐变 */
}

径向渐变 (Radial Gradient)：颜色从一个中心点向外扩散。

css 复制代码

.box {
  background: radial-gradient(circle, white, black); /* 从中心向外，白到黑 */
  background: radial-gradient(ellipse at top, #e66465, transparent);
}

6.2 CSS 动画与过渡 (Animation & Transition)

过渡 (Transition) ：用于在元素状态改变时（如 :hover）平滑地过渡样式属性值。

css 复制代码

.button {
  background-color: blue;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.button:hover {
  background-color: red;
  transform: scale(1.1);
}

动画 (Animation)：更强大，可以定义多步动画，无需用户交互即可自动播放。
- 使用 @keyframes 定义动画序列。
- 使用 animation 属性将动画应用于元素。
css 复制代码
```
@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.box {
  animation: fadeInOut 3s infinite; /* 动画名称 时长 无限循环 */
}
```

6.3 CSS 滤镜 (Filter)

CSS 滤镜可以对元素（通常是图片）应用图形效果，如模糊、亮度、对比度等。

css 复制代码

img {
  filter: grayscale(100%); /* 转为灰度图 */
}
img:hover {
  filter: none; /* 移除滤镜 */
}

.blurred-box {
  filter: blur(5px); /* 模糊效果 */
}

1. CSS 简介与基础语法

1.1 什么是 CSS？

1.2 CSS 的工作方式

1.3 CSS 的引入方式

1.4 CSS 基础语法

2. CSS 选择器全解析

2.1 基础选择器

2.2 组合选择器

2.3 分组选择器

2.4 伪类与伪元素选择器

2.5 属性选择器

2.6 选择器优先级 (Specificity)

3. CSS 样式规则与常用属性

3.1 文本样式 (Text Styles)

3.2 背景与边框 (Background & Border)

4. CSS 盒模型详解

4.1 标准盒模型 (W3C Box Model)

4.2 怪异盒模型 (IE Box Model) / box-sizing 属性

5. CSS 布局技术

5.1 传统布局

5.2 现代布局

5.3 响应式布局

6. CSS 高级特性

6.1 CSS 渐变 (Gradients)

6.2 CSS 动画与过渡 (Animation & Transition)

6.3 CSS 滤镜 (Filter)

4.2 怪异盒模型 (IE Box Model) / `box-sizing` 属性