前言

CSS（Cascading Style Sheets）是网页的”化妆品”，负责控制 HTML 元素的外观和布局。没有 CSS 的网页就像白纸黑字——有了 CSS，页面才能变得美观、灵动。

本文从零开始，带你系统掌握 CSS 的核心知识。

一、CSS 写在哪里？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 1. 内联样式（不推荐） -->
<p style="color: red; font-size: 18px;">红色文字</p>

<!-- 2. 内部样式表 -->
<head>
    <style>
        p { color: blue; }
    </style>
</head>

<!-- 3. 外部样式表（推荐！） -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

二、选择器

2.1 基础选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 标签选择器 */
p { color: #333; }

/* 类选择器（最常用） */
.title { font-size: 24px; }

/* ID 选择器（尽量少用） */
#header { height: 60px; }

/* 通配符选择器 */
* { margin: 0; padding: 0; }

/* 群组选择器 */
h1, h2, h3 { font-weight: bold; }

2.2 层次选择器

1
2
3
4
5
6
7
8
9
10
11
/* 后代选择器（所有后代） */
article p { line-height: 1.8; }

/* 子代选择器（直接子元素） */
ul > li { list-style: none; }

/* 相邻兄弟（紧跟在后面的一个） */
h2 + p { margin-top: 0; }

/* 通用兄弟（跟在后面的所有） */
h2 ~ p { color: #666; }

2.3 伪类选择器

1
2
3
4
5
6
7
8
9
10
11
12
/* 链接状态 */
a:link { color: blue; }        /* 未访问 */
a:visited { color: purple; }   /* 已访问 */
a:hover { color: red; }        /* 鼠标悬停 ⭐ */
a:active { color: orange; }    /* 点击时 */

/* 子元素 */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background: #f5f5f5; }   /* 奇数行 */
li:nth-child(even) { background: #fff; }      /* 偶数行 */
li:nth-child(3n) { color: red; }             /* 每第 3 个 */

2.4 伪元素

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 首行/首字母 */
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; color: red; }

/* 列表标记 */
li::marker { color: #49b1f5; }

2.5 优先级（特异度）

1
!important > 内联(1000) > ID(100) > 类/伪类(10) > 标签(1)
1
2
3
4
5
6
7
8
9
10
11
/* 优先级：1 */
p { color: black; }

/* 优先级：10+1=11 */
.special p { color: blue; }

/* 优先级：100 */
#main { color: red; }

/* 优先级最高（尽量不用！） */
p { color: green !important; }

三、盒模型

每个元素都是一个矩形盒子：

1
2
3
4
5
6
7
8
9
10
11
12
┌──────────────────────────┐
│        margin             │
│   ┌──────────────────┐    │
│   │     border       │    │
│   │  ┌──────────┐    │    │
│   │  │ padding  │    │    │
│   │  │ ┌──────┐ │    │    │
│   │  │ │ 内容  │ │    │    │
│   │  │ └──────┘ │    │    │
│   │  └──────────┘    │    │
│   └──────────────────┘    │
└──────────────────────────┘
1
2
3
4
5
6
7
8
9
10
.box {
    width: 200px;              /* 内容宽度 */
    height: 100px;
    padding: 20px;             /* 内边距 */
    border: 2px solid #333;    /* 边框 */
    margin: 30px;              /* 外边距 */
    
    /* 更直观的盒模型（推荐全局使用） */
    box-sizing: border-box;    /* width 包含 padding+border */
}

box-sizing 对比：

值 width 包含
content-box（默认） 仅内容
border-box（推荐） 内容 + padding + border

四、文本与字体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.text {
    color: #333;                     /* 颜色 */
    font-size: 16px;                 /* 字号 */
    font-weight: bold;               /* 粗细: 400=normal, 700=bold */
    font-family: "Microsoft YaHei", sans-serif;
    text-align: center;              /* 对齐: left/center/right/justify */
    line-height: 1.8;                /* 行高 */
    letter-spacing: 1px;             /* 字间距 */
    text-decoration: underline;      /* 下划线: none/underline/line-through */
    text-indent: 2em;                /* 首行缩进 */
    white-space: nowrap;             /* 不换行 */
    overflow: hidden;                /* 溢出隐藏 */
    text-overflow: ellipsis;         /* 溢出显示省略号 */
    word-break: break-all;           /* 允许单词内换行 */
}

五、背景与颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.card {
    /* 背景色 */
    background-color: #f5f5f5;
    
    /* 背景图 */
    background-image: url("bg.jpg");
    background-size: cover;          /* 覆盖 / contain / 具体尺寸 */
    background-position: center;
    background-repeat: no-repeat;
    
    /* 渐变 */
    background: linear-gradient(135deg, #667eea, #764ba2);
    background: linear-gradient(to right, red, orange, yellow);
    background: radial-gradient(circle, #fff, #333);
    
    /* 简写 */
    background: #f5f5f5 url("bg.jpg") center/cover no-repeat;
    
    /* 透明度 */
    opacity: 0.8;                    /* 整个元素透明（含子元素） */
    background: rgba(0, 0, 0, 0.5);  /* 仅背景半透明 */
}

颜色表达方式：

1
2
3
4
5
color: #ff6600;                 /* 十六进制（最常用） */
color: rgb(255, 102, 0);        /* RGB */
color: rgba(255, 102, 0, 0.8);  /* RGBA（带透明度） */
color: hsl(24, 100%, 50%);      /* HSL（色相 饱和度 亮度） */
color: var(--main-color);       /* CSS 变量（推荐） */

六、CSS 变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
:root {
    --primary: #49b1f5;
    --text-color: #333;
    --bg-color: #fff;
    --spacing: 16px;
    --radius: 8px;
}

.btn {
    background: var(--primary);
    color: var(--bg-color);
    padding: var(--spacing);
    border-radius: var(--radius);
}

/* 暗色模式切换 */
[data-theme="dark"] {
    --text-color: #eee;
    --bg-color: #1a1a2e;
}

七、Display 属性

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 块级元素：占满整行 */
.block { display: block; }

/* 行内元素：不换行，宽高无效 */
.inline { display: inline; }

/* 行内块：不换行 + 宽高有效 */
.inline-block { display: inline-block; }

/* 隐藏元素 */
.hidden { display: none; }           /* 完全消失，不占空间 */
.invisible { visibility: hidden; }   /* 看不见但占空间 */
.transparent { opacity: 0; }         /* 透明但占空间且可交互 */

八、Flexbox 布局（最常用）⭐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 父容器 */
.flex-container {
    display: flex;
    flex-direction: row;            /* row | column */
    justify-content: space-between; /* 主轴对齐 */
    align-items: center;            /* 交叉轴对齐 */
    flex-wrap: wrap;                /* 换行 */
    gap: 16px;                      /* 间距 */
}

/* 子元素 */
.flex-item {
    flex: 1;                        /* 平分剩余空间 */
    /* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
}

.flex-item-2 {
    flex: 2;                        /* 占 2 份 */
}

/* 快速居中（万能公式） */
.center-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

常见 Flex 布局：

1
2
3
4
5
6
7
8
9
/* 两端对齐，中间等距 */
.nav { display: flex; justify-content: space-between; }

/* 等宽三列 */
.columns { display: flex; }
.columns > * { flex: 1; }

/* 居中一个元素 */
.hero { display: flex; justify-content: center; align-items: center; height: 400px; }

九、Grid 布局（二维布局最强）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 等宽三列 */
    /* 等价于: 1fr 1fr 1fr */
    /* fr = fraction（份数） */
    grid-template-rows: auto;
    gap: 20px;                                /* 行列间距 */
}

/* 不同宽度列 */
.grid-varied {
    grid-template-columns: 200px 1fr 1fr;     /* 固定 + 弹性 + 弹性 */
}

/* 自适应列（每列最小 250px） */
.grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* 子元素跨列/跨行 */
.grid-item {
    grid-column: span 2;                       /* 跨 2 列 */
    grid-row: span 2;                          /* 跨 2 行 */
}

十、定位（Position）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* 静态定位（默认） */
.static { position: static; }

/* 相对定位（相对于自身原位置偏移） */
.relative {
    position: relative;
    top: 10px;
    left: 20px;
}

/* 绝对定位（相对于最近的非 static 祖先） */
.absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 完美居中！ */
}

/* 固定定位（相对于视口，滚动不消失） */
.fixed {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;                       /* 层级 */
}

/* 粘性定位（滚动到一定位置后固定） */
.sticky {
    position: sticky;
    top: 0;
}

十一、过渡与动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* 过渡：属性变化时平滑过渡 */
.btn {
    background: #49b1f5;
    transition: all 0.3s ease;
    /* transition: property duration timing-function delay; */
}

.btn:hover {
    background: #ff7242;
    transform: scale(1.05);
}

/* 动画：自动播放的复杂动效 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: fadeIn 0.5s ease forwards;
}

/* 旋转加载动画 */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #eee;
    border-top-color: #49b1f5;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

十二、响应式设计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 移动优先策略：先写移动端样式，再用 min-width 覆盖 */
.container { padding: 16px; }

/* 平板 */
@media (min-width: 768px) {
    .container { padding: 24px; }
}

/* 桌面 */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
    body { background: #1a1a2e; color: #eee; }
}

/* 打印样式 */
@media print {
    nav, .sidebar { display: none; }
}

十三、常见 UI 组件

1
2
3
4
5
6
7
8
9
10
11
/* 卡片 */
.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 24px;
    transition: box-shadow 0.3s;
}
.card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 按钮 */
.btn {
    display: inline-block;
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    background: #49b1f5;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}
.btn:hover { opacity: 0.85; }
.btn:active { transform: scale(0.97); }

CSS 常用速查表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* 文本溢出省略号 */
.truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 隐藏滚动条但可滚动 */
.hide-scrollbar {
    overflow: auto;
    scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* 图片自适应 */
img { max-width: 100%; height: auto; }

/* 屏幕阅读器专用（视觉隐藏） */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

结语

CSS 看似简单，实则暗藏玄机。学习路线建议：

  1. 掌握盒模型和选择器（基础中的基础）
  2. 熟练使用 Flexbox（80% 的布局用它就够了）
  3. 了解 Grid（复杂二维布局的首选）
  4. 理解响应式设计（现代网页必备）
  5. 实战复制几个你喜欢的网站页面

最好的 CSS 学习方法：打开浏览器 F12，把别人的样式改一改，看看效果。🎨