CSS（层叠样式表）作为 Web 前端开发的三大核心技术之一，负责网页的视觉呈现和布局设计。从简单的文字颜色到复杂的响应式布局，从动画效果到现代 CSS 框架，CSS 已经发展成为一门强大而精妙的设计语言。本文将系统全面地梳理 CSS 的核心知识点，从基础语法到高级特性，帮助初学者建立完整的知识体系，也为有经验的开发者提供深入的技术参考。
一、CSS 基础
1.1 什么是 CSS
CSS（Cascading Style Sheets） 是一种用来描述 HTML 或 XML 文档外观的样式表语言。它定义了元素如何在屏幕上显示，控制布局、颜色、字体、间距等视觉表现。
核心特性：
层叠性：多个样式可以叠加应用
继承性：子元素可以继承父元素的某些样式
优先级：当样式冲突时，根据权重决定应用哪个样式
响应式设计：根据不同设备调整布局
动画与过渡：创建平滑的视觉效果
1.2 CSS 的引入方式
<!DOCTYPE html>
<html>
<head>
<!-- 1. 内联样式（行内样式） -->
<div style="color: red; font-size: 16px;">内联样式</div>
<!-- 2. 内部样式表 -->
<style>
.internal {
color: blue;
font-size: 18px;
}
</style>
<!-- 3. 外部样式表（推荐） -->
<link rel="stylesheet" href="styles.css">
<!-- 4. @import 导入（不推荐，影响性能） -->
<style>
@import url('another.css');
</style>
</head>
<body>
</body>
</html>
1.3 CSS 语法
/* 基本语法结构 */
selector {
property: value;
property: value;
}
/* 选择器示例 */
h1 {
color: #333;
font-size: 24px;
}
/* 注释 */
/* 这是 CSS 注释，只有这种格式 */
/* 多个选择器 */
h1, h2, h3 {
font-family: 'Arial', sans-serif;
}
/* 多个属性 */
.card {
width: 300px;
height: 200px;
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
二、选择器
2.1 基础选择器
/* 元素选择器（类型选择器） */
p {
color: #333;
}
div {
margin: 0;
}
/* 类选择器（最常用） */
.title {
font-size: 24px;
font-weight: bold;
}
.card-container {
display: flex;
gap: 20px;
}
/* ID 选择器（唯一标识） */
#header {
background: #f5f5f5;
height: 60px;
}
#main-content {
padding: 20px;
}
/* 通配符选择器 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
2.2 组合选择器
/* 后代选择器（空格） */
.container .item {
color: red;
}
article p {
line-height: 1.5;
}
/* 子元素选择器（>） */
.parent > .child {
margin-left: 20px;
}
ul > li {
list-style: none;
}
/* 相邻兄弟选择器（+） */
h1 + p {
margin-top: 0;
}
.item + .item {
border-top: 1px solid #eee;
}
/* 通用兄弟选择器（~） */
h1 ~ p {
color: gray;
}
/* 分组选择器（,） */
h1, h2, .heading, #main-title {
font-family: 'Arial', sans-serif;
}
2.3 属性选择器
/* 存在属性 */
[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
/* 精确匹配 */
[type="text"] {
border: 1px solid #ccc;
}
/* 包含特定值（空格分隔） */
[class~="active"] {
background: #007bff;
}
/* 属性值开头匹配 */
[href^="https"] {
color: green;
}
/* 属性值结尾匹配 */
[src$=".jpg"] {
border-radius: 4px;
}
/* 属性值包含匹配 */
[title*="more"] {
cursor: help;
}
/* 属性值以特定值开头且后面紧跟连字符 */
[lang|="en"] {
font-family: 'Times New Roman', serif;
}
/* 示例 */
input[type="text"] {
padding: 8px 12px;
}
a[href^="mailto:"] {
background: url('email-icon.png') no-repeat left center;
padding-left: 20px;
}
img[src$=".svg"] {
width: 24px;
height: 24px;
}
2.4 伪类选择器
/* 链接伪类 */
a:link { color: blue; } /* 未访问链接 */
a:visited { color: purple; } /* 已访问链接 */
a:hover { color: red; } /* 鼠标悬停 */
a:active { color: orange; } /* 激活状态 */
/* 表单伪类 */
input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}
input:checked {
background-color: #007bff;
}
input:disabled {
background: #f5f5f5;
color: #999;
}
input:read-only {
background: #f9f9f9;
}
/* 结构性伪类 */
/* :first-child - 第一个子元素 */
li:first-child {
font-weight: bold;
}
/* :last-child - 最后一个子元素 */
li:last-child {
border-bottom: none;
}
/* :nth-child(n) - 第 n 个子元素 */
li:nth-child(odd) { background: #f9f9f9; } /* 奇数 */
li:nth-child(even) { background: #fff; } /* 偶数 */
li:nth-child(3n) { color: red; } /* 3的倍数 */
li:nth-child(3n+1) { background: #eee; } /* 1,4,7... */
/* :nth-last-child(n) - 倒数第 n 个 */
li:nth-last-child(1) { border-bottom: none; }
/* :only-child - 唯一子元素 */
div:only-child {
margin: 0;
}
/* :empty - 空元素 */
div:empty {
display: none;
}
/* :not() - 否定伪类 */
:not(.active) {
opacity: 0.5;
}
/* 目标伪类 */
:target {
background: yellow;
animation: highlight 1s;
}
/* 语言伪类 */
:lang(zh) {
font-family: 'Microsoft YaHei', sans-serif;
}
2.5 伪元素选择器
/* ::before - 在元素内容前插入 */
.element::before {
content: "★";
color: gold;
margin-right: 4px;
}
/* ::after - 在元素内容后插入 */
.link::after {
content: " →";
font-size: 12px;
}
/* ::first-letter - 首字母 */
p::first-letter {
font-size: 2em;
font-weight: bold;
color: #007bff;
}
/* ::first-line - 首行 */
p::first-line {
font-weight: bold;
color: #333;
}
/* ::selection - 选中文本样式 */
::selection {
background: #007bff;
color: white;
}
/* 实用示例 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
.custom-checkbox::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #ccc;
border-radius: 3px;
margin-right: 8px;
}
.custom-checkbox:checked::before {
background: #007bff;
content: "✓";
color: white;
text-align: center;
line-height: 16px;
}
2.6 选择器优先级
/* 优先级计算规则（权重） */
/* 内联样式：1000 */
<div style="color: red"></div>
/* ID 选择器：100 */
#header { color: blue; }
/* 类选择器、属性选择器、伪类：10 */
.title { color: green; }
[type="text"] { color: yellow; }
:hover { color: orange; }
/* 元素选择器、伪元素：1 */
div { color: black; }
::before { content: ""; }
/* 通配符、组合器、否定伪类：0 */
* { margin: 0; }
/* 示例计算 */
#header .title h1 { } /* 100 + 10 + 1 = 111 */
.nav ul li a:hover { } /* 10 + 1 + 1 + 1 + 10 = 23 */
[type="text"]:focus { } /* 10 + 10 = 20 */
div p span { } /* 1 + 1 + 1 = 3 */
/* !important（最高优先级，慎用） */
.element {
color: red !important;
}
三、盒模型
3.1 标准盒模型 vs 怪异盒模型
/* 标准盒模型（content-box） */
.element {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 1px solid #000;
margin: 10px;
/* 实际宽度 = 200 + 40 + 2 = 242px */
}
/* 怪异盒模型（border-box） */
.element {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 1px solid #000;
/* 实际宽度 = 200px（padding和border包含在内） */
}
/* 全局重置 */
*,
*::before,
*::after {
box-sizing: border-box;
}
3.2 盒模型属性
.box {
/* 宽高 */
width: 300px;
height: 200px;
min-width: 100px;
max-width: 500px;
min-height: 50px;
max-height: 400px;
/* 内边距 */
padding: 20px; /* 四周 */
padding: 10px 20px; /* 上下 左右 */
padding: 10px 20px 30px; /* 上 左右 下 */
padding: 10px 20px 30px 40px; /* 上 右 下 左 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
/* 边框 */
border: 1px solid #ccc; /* 宽度 样式 颜色 */
border-width: 1px 2px 3px 4px;
border-style: solid dashed dotted double;
border-color: red green blue yellow;
border-top: 2px solid #333;
border-right: 1px dashed #666;
border-bottom: 3px dotted #999;
border-left: none;
border-radius: 8px; /* 圆角 */
border-radius: 10px 20px 30px 40px;
border-radius: 50%; /* 圆形 */
/* 外边距 */
margin: 20px;
margin: 10px auto; /* 水平居中 */
margin-top: 10px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}
3.3 外边距折叠
/* 兄弟元素外边距折叠 */
.item {
margin-bottom: 20px;
}
.item + .item {
margin-top: 30px;
/* 实际间距为 max(20px, 30px) = 30px */
}
/* 父子元素外边距折叠 */
.parent {
margin-top: 20px;
}
.child {
margin-top: 30px;
/* 父元素和子元素的上外边距会合并 */
}
/* 解决方法 */
.parent {
overflow: hidden; /* 创建 BFC */
padding-top: 1px; /* 添加内边距 */
border-top: 1px solid transparent; /* 添加透明边框 */
display: flex; /* 使用 flex 布局 */
display: grid; /* 使用 grid 布局 */
}
