CSS（Cascading Style Sheets，层叠样式表）赋予网页视觉与布局。本教程系统讲解 CSS 从基础到进阶的所有核心知识。
<!-- 方式一：内联样式（直接写在标签上，优先级最高） -->
<p style="color: red; font-size: 20px;">红色文字</p>
<!-- 方式二：内部样式（写在 <style> 标签中） -->
<style>
p { color: blue; }
</style>
<!-- 方式三：外部样式表（推荐！写在独立的 .css 文件中） -->
<link rel="stylesheet" href="style.css">/* 语法：选择器 { 属性名: 属性值; } */
/* 一个选择器可包含多个声明 */
h1 {
color: #333; /* 文字颜色 */
font-size: 28px; /* 文字大小 */
text-align: center; /* 居中对齐 */
margin-bottom: 16px; /* 下外边距 */
}选择器是 CSS 的核心，决定了样式应用到哪些元素上。
| 选择器 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 通配符 | * | 选中所有元素 | * { margin: 0; } |
| 元素 | element | 按标签名匹配 | p { } |
| 类 | .class | 按 class 属性匹配（最常用） | .btn { } |
| ID | #id | 按 id 匹配（唯一性，不建议多用） | #header { } |
| 群组 | a, b | 同时匹配多个选择器 | h1, h2, h3 { } |
| 名称 | 语法 | 说明 |
|---|---|---|
| 后代 | A B | A 内部的所有 B（不限层级） |
| 子代 | A > B | A 的直接子元素 B |
| 相邻兄弟 | A + B | 紧跟在 A 之后的第一个 B |
| 通用兄弟 | A ~ B | A 之后的所有同级 B |
[type="text"] /* 精确匹配 */
[class^="btn-"] /* 以 btn- 开头 */
[href$=".pdf"] /* 以 .pdf 结尾 */
[class*="active"] /* 包含 active */
[data-size~="large"] /* 包含独立单词 large */| 伪类 | 触发条件 |
|---|---|
:hover | 鼠标悬停 |
:focus | 获得焦点（输入框等） |
:active | 被点击时 |
:visited | 已访问的链接 |
:first-child | 父元素的首个子元素 |
:last-child | 父元素的末尾子元素 |
:nth-child(n) | 父元素中第 n 个子元素 |
:nth-child(odd) | 奇数行（斑马条纹） |
:nth-child(even) | 偶数行 |
:not(selector) | 排除匹配的元素 |
/* ::before 和 ::after 必须配合 content 属性使用 */
.quote::before {
content: "「"; /* 在内容前插入 */
}
.quote::after {
content: "」"; /* 在内容后插入 */
}
::selection { /* 用户选中文字时的样式 */
background: #7c3aed;
color: #fff;
}
::placeholder { /* 输入框占位文字样式 */
color: #999;
}当多条规则冲突时，浏览器按以下优先级决定最终样式：
color: red; /* 颜色关键字 */
color: #7c3aed; /* 十六进制（最常用） */
color: rgb(124, 58, 237); /* RGB */
color: rgba(124, 58, 237, .8); /* RGBA（含透明度） */
color: hsl(263, 85%, 58%); /* 色相-饱和度-明度 */.hero {
background-color: #f5f3ff;
background-image: url(bg.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
/* 简写形式（推荐） */
background: #f5f3ff url(bg.jpg) center/cover no-repeat;
}
/* 渐变背景 */
.gradient {
background: linear-gradient(135deg, #7c3aed, #a78bfa);
}
/* 径向渐变 */
.radial {
background: radial-gradient(circle, #fff 0%, #7c3aed 100%);
}.text-example {
/* 字体 */
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: 16px;
font-weight: 700;
font-style: italic;
line-height: 1.8;
/* 文本 */
color: #333;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 2px;
word-spacing: 4px;
text-indent: 2em;
/* 文本溢出处理 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 多行文本截断 */
.multiline-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}每个 HTML 元素都是一个矩形盒子，由内容 → 内边距 → 边框 → 外边距四层组成。
.box {
/* 尺寸 */
width: 300px;
height: 200px;
/* 内边距 */
padding: 20px;
padding: 10px 20px;
/* 边框 */
border: 2px solid #ccc;
border-radius: 12px;
/* 外边距 */
margin: 20px auto; /* auto 实现水平居中 */
}默认 content-box 下，width 只包含内容区，加上 padding 和 border 后实际尺寸会变大。强烈建议全局设置：
*, *::before, *::after {
box-sizing: border-box; /* width 包含 padding 和 border */
}| 值 | 行为 | 对照 |
|---|---|---|
block | 独占一行，可设宽高 | div, p, h1 |
inline | 不换行，宽高无效 | span, a |
inline-block | 不换行，但可设宽高 | button, input |
none | 隐藏元素（不占空间） | — |
flex | 弹性布局容器 | — |
grid | 网格布局容器 | — |
.relative {
position: relative;
top: 10px; left: 20px;
}
.absolute {
position: absolute;
top: 0; right: 0;
}
.fixed-btn {
position: fixed;
bottom: 20px; right: 20px;
z-index: 999;
}
.sticky-header {
position: sticky;
top: 0; z-index: 100;
}.flex-container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
align-items: stretch | flex-start | flex-end | center | baseline;
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
gap: 16px;
}
.flex-item {
flex: 1; /* 平分空间 */
flex: 0 0 200px; /* 固定宽度 */
align-self: auto | flex-start | flex-end | center | stretch;
order: 0;
}
/* 经典居中方案 */
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}.grid-container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
gap: 16px;
height: 100vh;
}
/* 圣杯布局 */
.page-layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main "
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr 60px;
min-height: 100vh;
}
/* 自动填充响应式 */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}:root {
--primary: #7c3aed;
--text: #1f2937;
--radius: 12px;
--shadow: 0 2px 8px rgba(0,0,0,.1);
}
.button {
background: var(--primary);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
/* 带备用值 */
color: var(--text, #333);.btn {
transition: all 0.3s ease;
}
.btn:hover {
transform: translateY(-2px);
}
/* 关键帧动画 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.element {
animation: fadeIn 0.5s ease forwards;
}/* 桌面优先（默认大屏样式，向下适配） */
@media (max-width: 1024px) {
.container { padding: 16px; }
}
@media (max-width: 640px) {
.container { padding: 12px; }
.card-grid { grid-template-columns: 1fr; }
}
/* 响应式字体 */
h1 { font-size: clamp(24px, 5vw, 48px); }
/* 响应式容器 */
.container {
width: min(100% - 32px, 1200px);
margin-inline: auto;
}| 设备 | 宽度范围 | 推荐断点 |
|---|---|---|
| 手机（竖屏） | 320px - 480px | 480px |
| 手机（横屏） | 480px - 768px | 768px |
| 平板 | 768px - 1024px | 1024px |
| 笔记本 | 1024px - 1440px | 1280px |
| 台式机 | 1440px+ | 1440px |
/* 禁用用户选中文字 */
.no-select { user-select: none; }
/* 平滑滚动 */
html { scroll-behavior: smooth; }
/* 视觉隐藏但保留占位 */
.invisible { visibility: hidden; }min-width 向上扩展.block__element--modifier 让类名表意清晰