波仔
⌨️ 第六章 Web技术与安全
📄 本篇一句话

HTML 管内容，CSS 管长相——内容与样式分离是 Web 设计的第一原则。手写 CSS 累了，就站在 CSS 框架（Bootstrap 等）的肩膀上。

📝 在本章的位置

上游：网络 4.3 · 样式表 讲过语法细节；本篇重点讲「分离」思想与框架现状。下游：6-7 的 DOM 操作会动态改样式，6-6 的 MVVM 让数据绑定连样式一起管。

一、CSS：给骨架穿衣服

CSS（Cascading Style Sheets，层叠样式表）用「选择器 → 属性: 值」的规则描述长相：

h1 {                       /* 选择器：所有 h1 */
  color: #c0392b;          /* 字色：红 */
  font-size: 28px;         /* 字号 */
}
.warn {                    /* 选择器：class 为 warn 的元素 */
  background: #fff3cd;     /* 背景 */
}
#header a:hover {          /* id 为 header 里的链接、悬停时 */
  text-decoration: underline;
}

三个关键机制： - 层叠（Cascading）：多条规则同时命中一个元素时按优先级合并——越具体越优先、后来者覆盖先来者。 - 继承：字色、字体等会从父元素传给子元素；边框、尺寸不会。 - 三种接入方式：内联 style="..."、页内 <style>、外部 .css 文件（首选——一份样式全站共用，改一处全站变）。

二、CSS 框架：现成的设计系统

手写 CSS 最耗时的不是语法，是设计感（间距、配色、栅格布局、响应式）。CSS 框架把这套预先做好：

三、分离的意义

HTML 只说「这是一个标题」，CSS 说「标题长这样」——于是： - 换皮肤不改内容：同一份 HTML，换套 CSS 就是暗色主题。 - 分工可行：美工改 CSS、程序员改逻辑，互不踩脚（5-9 里「标准流」分工的 Web 版）。 - 可访问性：读屏器只关心 HTML 结构，样式随便换，内容语义不变。

动手 Demo：一份 HTML，两套 CSS

<!-- demo.html -->
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>成绩单</h1>
  <p class="hl">波仔：88 分</p>
</body>
</html>

/* style.css —— 只改这三行，页面气质全变 */
body   { font-family: sans-serif; background: #f6f8fa; text-align: center; }
h1     { color: #0969da; }
.hl    { background: #fff8c5; padding: 4px 12px; border-radius: 6px; }

看到什么算成功：浏览器打开 demo.html，标题是蓝色、高亮行有浅黄底。把 h1 { color: ... } 改成 #c0392b 刷新——红标题，HTML 一字未动。

读结果：改的是 .css 文件而非网页本体——这就是「内容与样式分离」的全部收益。

30 秒实验

F12 打开开发者工具 → 点左上角箭头图标 → 点击页面任意元素 → 右侧「样式」面板实时勾掉某条 CSS 规则看页面变化；再点「元素」面板直接改文字。所有改动画在本地、刷新即还原——学 CSS 最好的 playground 就是别人的网站。

常见误区

自测三问（点击展开） 1. **CSS 里「Cascading」指什么？** 答：层叠——多条规则命中同一元素时按优先级合并，越具体/越晚者优先。 2. **为什么推荐外部 CSS 文件？** 答：全站共用一份、改一处全站变；内容与样式分离、可分工可换肤。 3. **Bootstrap 与 Tailwind 思路差别？** 答：Bootstrap 给成品组件（拿来即用），Tailwind 给原子小类（自由拼装）。

相关笔记