1
2
3
4
5
6
7

/* CSS 诞生之初，语法大概长这样 */
h1 {
  color: red;
  font-size: 24pt;
}

/* 是的，那时候支持 font-size 单位是 pt（点），你是不是以为 px 是亲生的？ */

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

/* CSS1 时代的典型操作 */
/* 注意：CSS1 时代 px 单位支持很烂，标准单位是 pt（点）和 em */
/* 别被现在满屏的 px 迷惑了，当年的前端用的是 pt！ */
body {
  font-family: "Times New Roman", serif;
  font-size: 12pt;   /* pt 是 CSS1 时代的主流单位，不是 px */
  color: black;
  background-color: white;
}

h1 {
  font-size: 24pt;    /* 当年没有 px，都是 pt */
  font-weight: bold;
  text-align: center;
}

p {
  text-indent: 2em;  /* 首行缩进两个字符，这在当时是刚需 */
  line-height: 1.5;
}

 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

/* 固定定位——元素死死钉在视口某个位置 */
.fixed-ad {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 250px;
  background-color: #ff6600;
}

/* 绝对定位——元素相对于最近的定位祖先移动 */
/* 注意：以下示例同时演示了 CSS3 的 transform，这两个凑在一起 */
/* 是因为现代开发中它们经常配合使用——别被误导以为 CSS2 原生支持 transform */
.modal-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 真正的 CSS2 居中做法：靠 margin:auto + 负边距手动算，或者直接不用居中 */
  /* transform: translate(-50%, -50%);  ← CSS3 才有的东西，这里先预告 */
  background: white;
  padding: 20px;
  border-radius: 8px;          /* ← CSS3 圆角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);  /* ← CSS3 阴影 */
}

/* 相对定位——相对于元素正常位置偏移 */
.floating-label {
  position: relative;
  top: -10px;
  left: 10px;
  font-size: 12px;
  color: #666;
}

 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

/* 文字环绕图片——float 的本职工作 */
.image-float-left {
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
}

/* 两栏布局——被玩坏的 float */
.sidebar {
  float: left;
  width: 250px;
  background: #f5f5f5;
}

.content {
  float: left;
  width: calc(100% - 250px);  /* calc 是后来才有的，这里先预告一下 */
}

/* 清除浮动——这大概是 CSS 历史上最玄学的操作之一 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

 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

/* 屏幕设备 */
@media screen {
  body {
    font-size: 16px;
    line-height: 1.6;
  }
}

/* 打印机——打印的时候自动切换 */
@media print {
  body {
    font-size: 12pt;  /* 打印用 pt 单位，专业！ */
    color: black;
    background: white;
  }

  .no-print {
    display: none;  /* 打印的时候隐藏广告、导航之类的东西 */
  }
}

/* 投影演示（deprecated：现代浏览器已不支持，改用 @media screen 配合视口大小）*/
@media screen {
  body {
    font-size: 24px;
  }
}

 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

/* 伪类——鼠标悬停变色，就像变色龙 */
a:hover {
  color: #ff6600;
  text-decoration: underline;
}

/* 第一个子元素 */
li:first-child {
  font-weight: bold;
}

/* 伪元素——给段落开头加装饰 */
p::first-letter {
  font-size: 3em;  /* 首字下沉，报刊杂志风格 */
  float: left;
  line-height: 1;
  padding-right: 8px;
  color: #c00;
}

/* 之前/之后插入内容 */
.price-label::before {
  content: "原价: ";
  color: #999;
  text-decoration: line-through;
}

 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

/* 盒模型终于统一了！ */
/* 在 IE6 时代，如果没写 DOCTYPE，IE 会用错误的盒模型 */
/* 正确的盒模型：width = 内容宽度，不包含 padding 和 border */

/* 标准盒模型（现代浏览器） */
.standard-box {
  box-sizing: content-box;  /* width 只包含内容 */
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* 实际占用宽度 = 200 + 20*2 + 5*2 = 250px */
}

/* IE 盒模型（旧版 IE 的" quirks 模式"） */
.quirks-box {
  box-sizing: border-box;  /* width = 内容 + padding + border */
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* 实际占用宽度 = 200px，内容区域被压缩为 150px */
}

/* 最好的实践：全局使用 border-box */
*, *::before, *::after {
  box-sizing: border-box;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

/* 为了兼容 IE6/7，前端工程师们发明了各种 hack */

/* IE6 专属下划线 hack */
#navigation {
  _height: 100px;  /* IE6 会读到这个属性，其他浏览器忽略 */
}

/* IE6/7 专属 * 号 hack */
.container {
  *zoom: 1;  /* 触发 hasLayout，顺便清除浮动 */
}

/* 条件注释——微软官方推荐的兼容方法 */
<!--[if IE 6]>
  <link rel="stylesheet" href="ie6.css">
<![endif]-->
/* 注意：这是 HTML 注释，不是 CSS 注释，上面示例是为了说明语法才放在一起的 */

1
2
3
4

<!-- 原始写法，直接在标签里写样式 -->
<font size="7" face="Arial" color="red">大标题</font>
<font size="4" color="blue">副标题</font>
<font face="Times New Roman" color="#333333">正文内容</font>

1
2
3
4
5
6
7
8
9

<!-- 让内容居中，没错，这曾经是一个标签 -->
<center>让我居中！</center>

<!-- 嵌套使用，效果拔群 -->
<center>
  <font size="5" color="purple">
    <center>我超级居中！</center>
  </font>
</center>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!-- Bold 和 Italic，虽然现在还在用，但语义已经变了 -->
<b>这是加粗的文字</b>
<i>这是斜体文字</i>

<!-- 配合 font 标签使用 -->
<font size="5">
  <b>
    <i>我是又大又粗又斜的文字</i>
  </b>
</font>

1
2

<!-- 水平线，虽然能设颜色宽度，但... -->
<hr width="80%" color="red" size="5">

1
2
3
4

<!-- 整个页面的默认样式都在这儿了 -->
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
  <!-- 文字链接被点击后变紫色，这是当年的"已访问链接"效果 -->
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!-- 用表格来布局，这大概是前端史上最离谱的"曲线救国" -->
<table width="800" cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
    <td colspan="2" bgcolor="header-color">
      <font size="7" face="Arial">网站标题</font>
    </td>
  </tr>
  <tr>
    <td width="200" bgcolor="sidebar-color" valign="top">
      <font face="Arial">
        <b>导航菜单</b><br>
        <a href="home.html">首页</a><br>
        <a href="about.html">关于我们</a>
      </font>
    </td>
    <td width="600" valign="top">
      <font size="4" face="Times New Roman">
        正文内容...
      </font>
    </td>
  </tr>
</table>

1
2
3
4
5
6
7
8
9

<!-- 假设你有 100 个页面，都要改成蓝色主题 -->
<!-- 旧方式：每个文件都要改 5 处地方，共 500 处！-->
<font color="blue">导航1</font>
<font color="blue">导航2</font>
<font color="blue">导航3</font>
<!-- 改完之后手指都抽筋了 -->

<!-- CSS 方式：一行搞定 -->
<!-- 只需要改一个文件里的一行代码 -->

1
2
3
4
5
6
7
8

<!-- HTML 只负责说"这是一个标题" -->
<h1>欢迎来到我的网站</h1>
<p>这是一段介绍文字</p>
<ul>
  <li>列表项一</li>
  <li>列表项二</li>
  <li>列表项三</li>
</ul>

 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

/* CSS 负责说"这个标题长什么样" */
/* 同样的 HTML 结构，换一套 CSS 就是完全不同的风格 */

h1 {
  font-size: 48px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 20px;
}

p {
  font-size: 18px;
  line-height: 1.8;
  color: #333;
  max-width: 800px;
  margin: 0 auto;
}

ul {
  list-style: none;  /* 去掉默认的列表样式 */
  padding: 0;
}

ul li {
  padding: 10px 20px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 25px;
  transition: transform 0.3s ease;
}

ul li:hover {
  transform: translateX(10px);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* 暗黑模式主题 */
body.dark-theme {
  background-color: #1a1a2e;
  color: #eee;
}

body.dark-theme h1 {
  color: #00d9ff;
  text-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
}

body.dark-theme ul li {
  background: linear-gradient(135deg, #434343 0%, #000000 100%);
  border: 1px solid #555;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<!-- index.html -->
<font size="5" face="Arial" color="blue">网站标题</font>

<!-- about.html -->
<font size="5" face="Arial" color="blue">网站标题</font>

<!-- contact.html -->
<font size="5" face="Arial" color="blue">网站标题</font>

<!-- products.html -->
<font size="5" face="Arial" color="blue">网站标题</font>

<!-- services.html -->
<font size="5" face="Arial" color="blue">网站标题</font>

<!-- ...你有50个页面... -->

<!-- 然后产品经理说：标题改成红色 -->
<!-- 你：？？？ -->

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

/* styles.css —— 一处定义，到处使用 */
/* 定义一次，全站生效 */

h1 {
  font-size: 48px;
  font-family: "Arial", sans-serif;
  color: blue;
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: 2px;
}

/* 改颜色？一行搞定！ */
h1 {
  color: red;  /* 就改这一行，50个页面瞬间全部更新 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!-- index.html -->
<link rel="stylesheet" href="styles.css">
<h1>网站标题</h1>

<!-- about.html -->
<link rel="stylesheet" href="styles.css">
<h1>网站标题</h1>

<!-- contact.html -->
<link rel="stylesheet" href="styles.css">
<h1>网站标题</h1>

<!-- 所有50个页面共用同一套样式 -->
<!-- 改一处，全站生效，完美！ -->

 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

/* 给不同的元素起不同的"外号" */
/* 相同的"外号"有相同的样式 */

.btn-primary {
  background-color: #007bff;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-danger {
  background-color: #dc3545;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
}

.btn-success {
  background-color: #28a745;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
}

1
2
3
4
5

<!-- 同一个样式类，可以用在任何元素上 -->
<button class="btn-primary">确认下单</button>
<a href="/cancel" class="btn-danger">取消订单</a>
<div class="btn-success">操作成功！</div>
<input type="submit" class="btn-primary" value="提交表单">

 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

/* 定义主题色变量 */
:root {
  --primary-color: #007bff;  /* 主色调 */
  --secondary-color: #6c757d;  /* 次要色 */
  --success-color: #28a745;  /* 成功色 */
  --danger-color: #dc3545;  /* 危险色 */
  --warning-color: #ffc107;  /* 警告色 */
}

/* 所有使用主题色的地方都会自动更新 */
.btn-primary {
  background-color: var(--primary-color);  /* 自动继承 #007bff */
}

.badge-success {
  background-color: var(--success-color);  /* 自动继承 #28a745 */
}

.text-danger {
  color: var(--danger-color);  /* 自动继承 #dc3545 */
}

/* 换主题？改一行！ */
/* :root {
     --primary-color: #8b5cf6;  // 换成紫色主题
     --success-color: #10b981;  // 换成绿色主题
   } */
/* 全站主题色瞬间切换，爽不爽？ */

 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

/* 桌面端布局 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4列布局 */
  gap: 30px;
}

/* 平板端布局 */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);  /* 改成2列 */
    gap: 20px;
  }
}

/* 手机端布局 */
@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr;  /* 改成1列 */
    gap: 15px;
  }
}

/* 一套 CSS，覆盖所有设备 */
/* 维护成本 = 1 */
/* 产品经理：能不能做个手机版？ */
/* 你（CSS 工程师）：已经做了。 */
/* 产品经理：什么时候的事？ */
/* 你：五年前。响应式布局，一套走天下。 */

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* CSS Color Module Level 4 新增的 color() 函数 */
.element {
  color: color(display-p3 0.8 0.2 0.4);  /* P3 广色域 */
}

/* CSS Color Module Level 5 新增的 oklch() */
.流行色 {
  color: oklch(70% 0.2 240);  /* 非常流行的蓝紫色 */
}

/* CSS Color Module Level 5 新增的 color-mix() */
.mixed {
  background-color: color-mix(in lch, #ff0000 30%, #0000ff 70%);
  /* 红色30% + 蓝色70% = 紫色 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* CSS3 之前：方角盒子，看起来硬邦邦的 */
.old-school {
  background-color: #3498db;
  width: 200px;
  height: 100px;
  /* 四个角都是 90 度直角 */
}

/* CSS3 之后：圆角盒子，温柔可人 */
.cute-box {
  background-color: #3498db;
  width: 200px;
  height: 100px;
  border-radius: 20px;  /* 圆角！ */
}

.circular {
  width: 150px;
  height: 150px;
  border-radius: 50%;  /* 正圆！ */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

 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

/* 线性渐变 */
.linear-gradient {
  background: linear-gradient(45deg, #ff6b6b, #feca57);
  /* 从左下到右上的对角线渐变 */
}

.multi-stop {
  background: linear-gradient(
    to right,
    red 0%,
    orange 25%,
    yellow 50%,
    green 75%,
    blue 100%
  );
  /* 多色渐变，彩虹效果 */
}

/* 径向渐变 */
.radial-gradient {
  background: radial-gradient(circle, #ff6b6b, #feca57);
  /* 从中心向外扩散 */
}

.glow-effect {
  background: radial-gradient(
    circle at center,
    rgba(255, 215, 0, 0.8) 0%,
    rgba(255, 165, 0, 0) 70%
  );
  /* 发光效果 */
}

 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

/* 盒子阴影 */
.card {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  /* 水平偏移 垂直偏移 模糊距离 颜色 */
}

.fancy-card {
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),   /* 第一层阴影 */
    0 10px 20px rgba(0, 0, 0, 0.08), /* 第二层阴影 */
    0 20px 40px rgba(0, 0, 0, 0.06); /* 第三层阴影 */
  /* 多层阴影，立体感更强 */
}

.inset-shadow {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  /* 内凹效果 */
}

/* 文字阴影 */
.glowing-text {
  color: #fff;
  text-shadow:
    0 0 10px #ff6b6b,
    0 0 20px #ff6b6b,
    0 0 40px #ff6b6b;
  /* 发光文字效果 */
}

 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

/* 过渡效果 - 鼠标悬停时平滑变化 */
.button {
  background-color: #3498db;
  transform: scale(1);
  transition: all 0.3s ease;
  /* transition: 属性 持续时间 缓动函数; */
}

.button:hover {
  background-color: #2980b9;
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(52, 152, 219, 0.4);
  /* 悬停时变大变深 */
}

/* 关键帧动画 - 更复杂的动画效果 */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.bouncing-ball {
  animation: bounce 1s ease-in-out infinite;
  /* 无限循环的弹跳动画 */
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s 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

/* 2D 变换 */
.transform-demo {
  transform: rotate(45deg);           /* 旋转45度 */
  transform: scale(1.5);              /* 放大1.5倍 */
  transform: translate(20px, 30px);   /* 移动 x:20px, y:30px */
  transform: skew(-20deg, 10deg);     /* 倾斜 */
}

/* 3D 变换 */
.perspective-container {
  perspective: 1000px;  /* 3D 视角深度 */
}

.rotating-3d {
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}

/* 组合变换 */
.combo {
  transform: rotate(15deg) scale(1.2) translate(10px, -5px);
  /* 同时旋转、缩放、移动 */
}

 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

/* 响应式设计的基础 */
@media (max-width: 768px) {
  /* 平板及以下尺寸的样式 */
  .container {
    padding: 0 15px;
  }

  .sidebar {
    display: none;  /* 小屏幕隐藏侧边栏 */
  }
}

@media (max-width: 480px) {
  /* 手机尺寸的样式 */
  .header h1 {
    font-size: 24px;
  }

  .btn {
    width: 100%;
    display: block;
  }
}

/* 打印样式 */
@media print {
  .no-print {
    display: none;
  }

  body {
    font-size: 12pt;
    color: black;
  }
}

 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

/* Flexbox 简直是布局神器 */
.flex-container {
  display: flex;
  justify-content: space-between;  /* 主轴对齐方式 */
  align-items: center;             /* 侧轴对齐方式 */
  gap: 20px;                        /* 项目间距 */
}

.flex-item {
  flex: 1;  /* 所有项目平分空间 */
}

/* 典型导航栏 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-links {
  display: flex;
  gap: 30px;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: #3498db;
}

 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

/* Grid 是二维布局的最佳武器 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3列等宽 */
  grid-template-rows: auto 1fr auto;       /* 行高自动调整 */
  gap: 20px;                                /* 网格间距 */
  padding: 20px;
}

/* 网格区域命名 */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr 200px;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

/* 响应式 Grid */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  /* 自动填充，每列最小 250px，不够就换行 */
}

 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

/* 当你想查某个 CSS 属性的时候，去 MDN 搜索 */
/* 例如：搜索 "background-color" */

/* MDN 会告诉你： */

/* 1. 属性的语法 */
background-color: <color>;

/* 2. 属性的取值 */
background-color: red;           /* 颜色名 */
background-color: #ff0000;       /* 十六进制 */
background-color: rgb(255, 0, 0); /* RGB */
background-color: hsl(0, 100%, 50%); /* HSL */

/* 3. 值的详细说明 */
background-color: transparent;  /* 默认值，透明 */

/* 4. 浏览器兼容性 */
/* Chrome: ✓ (所有版本) */
/* Firefox: ✓ (所有版本) */
/* Safari: ✓ (所有版本) */
/* Edge: ✓ (所有版本) */

/* 5. 示例代码 */
.example {
  background-color: #3498db;
  /* 这会设置元素的背景颜色为蓝色 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

MDN CSS 学习路线：
    │
    ├── CSS 入门
    │   ├── 第一步：样式基础
    │   ├── 第二步：文本样式
    │   ├── 第三步：盒子模型
    │   └── 第四步：布局入门
    │
    ├── 构建带样式的 HTML
    │   ├── HTML + CSS 小项目实践
    │   └── 调试 CSS 的方法
    │
    ├── CSS 构建块
    │   ├── 层叠、优先级和继承
    │   ├── 盒子模型
    │   ├── 背景和边框
    │   ├── Flexbox
    │   ├── Grid
    │   └── 浮动
    │
    └── CSS 高级功能
        ├── CSS 动画
        ├── CSS 变换
        └── CSS 层级

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* W3C 规范中的语言风格大概是这样的： */

/* CSS 规范片段示例： */
/*
"3. 'Backgrounds and Borders' 模块定义了
   background 相关属性的语法和语义。
   这些属性用于绘制元素的背景区域..."

翻译成人话：
"background-color 用来设置背景颜色，这是它的正确用法"
*/

1
2
3
4
5
6
7
8
9

W3C 规范查找步骤：

1. 访问 https://www.w3.org/TR/CSS/ （CSS 规范首页）
2. 找到你想查的模块，如 CSS Color Module Level 5
3. 按 Ctrl + F 搜索属性名
4. 仔细阅读"Value"（取值）和"Computed Value"（计算值）部分

注意：规范里有很多 "maybe" 和 "may be implemented differently"
这意味着浏览器实现可能有差异！翻译过来就是："我们也不知道浏览器会怎么实现，你自己测试去吧。"——这是 W3C 最诚实的时刻。

 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

/* 场景：你想在一个面向大众的网站使用 CSS Grid */

/* 1. 去 caniuse.com 搜索 "CSS Grid" */
/* 2. 看到全球支持率是 95.47%，你可以放心用 */

/* 3. 但是！你的网站有很多企业用户，他们还在用 IE 11 */
/* 4. IE 11 不支持 CSS Grid */

/* 解决方案： */

.grid-container {
  display: grid;
  /* 现代浏览器使用 Grid */
}

@supports (display: grid) {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* 如果浏览器不支持 grid，使用浮动作为降级方案 */
@supports not (display: grid) {
  .grid-container::after {
    content: "";
    display: table;
    clear: both;
  }

  .grid-item {
    float: left;
    width: 33.33%;
  }
}

1
2
3
4
5
6
7
8

Can I Use 使用口诀：

1. 引入新特性前，先查一查
2. 关注 "Global" 百分比，也关注你用户的具体数据
3. 移动端数据要看清楚（iOS Safari、Android Browser）
4. 有 polyfill 的特性，可以更放心使用
5. 企业内部系统，慎用新的 CSS 特性
6. 最重要的是：测试！测试！测试！