CSS 入门

学习目标

CSS（层叠样式表，Cascading Style Sheets）是一种用于控制网页外观表现的样式语言。它通过定义颜色、字体、间距、布局等视觉属性，使 HTML 内容更具美感和可读性。

关键特性包括：

提示：HTML 使用标签（tags），而 CSS 使用规则集（rule sets）来定义样式。

“层叠”是 CSS 的核心机制，用于解决多个样式规则冲突时的优先级问题。浏览器依据以下三个因素决定最终应用哪条规则：

CSS 样式来源按优先级从高到低排列为：

CSS 选择器用于匹配 HTML 元素，并为其应用样式。常见类型如下：

选择器类型	示例	说明
标签选择器	`p { color: blue; }`	匹配所有 `<p>` 元素
类选择器	`.highlight { font-weight: bold; }`	匹配 `class="highlight"` 的元素
ID 选择器	`#header { background: #fff; }`	匹配 `id="header"` 的唯一元素
属性选择器	`input[type="email"] { border: 1px solid gray; }`	匹配具有特定属性或值的元素
伪类选择器	`a:hover { color: red; }`	匹配元素的特定状态（如悬停、焦点等）
伪元素选择器	`p::first-letter { font-size: 2em; }`	选择元素的特定部分（如首字母、生成内容等）
高级选择器	`li:nth-child(odd) { background: #f0f0f0; }` `div:not(.hidden) { display: block; }`	实现复杂、精确的元素筛选

合理使用选择器能显著提升 CSS 的可读性、可维护性与扩展性。

当用户访问一个网页时，浏览器会经历一系列步骤将 HTML 和 CSS 转换为可视页面。整个过程如下：

各阶段说明：

加载 HTML
浏览器向服务器请求并接收 HTML 文档。
解析 HTML
将 HTML 文本拆分为标记（tokens），并转换为节点。
构建 DOM
所有 HTML 节点组成一棵树状结构——文档对象模型（DOM），反映页面结构。
加载 CSS
遇到 <link rel="stylesheet"> 或 <style> 时，浏览器下载或读取 CSS。
外部 CSS 是渲染阻塞资源，页面会等待其加载完成后再继续渲染。
解析 CSS
将 CSS 规则解析为 CSS 对象模型（CSSOM），形成一棵包含所有样式规则的树。
计算样式（匹配 + 层叠）
浏览器将 DOM 与 CSSOM 结合，根据选择器匹配和层叠规则，为每个元素计算最终样式。
构建渲染树（Render Tree）
合并 DOM 与 CSSOM，仅保留可见元素（如 display: none 的元素会被剔除）。
布局（Layout）
计算每个可见元素在视口中的确切位置与尺寸。
绘制（Paint）
将渲染树中的每个元素转换为屏幕上的像素，包括文字、颜色、边框、背景等。
合成与显示
将多个绘制图层合并为最终图像，并呈现在屏幕上。

优势	说明
简化设计	无需在 HTML 中硬编码样式，结构更清晰
提升性能	减少重复代码，加快页面加载与渲染速度
响应式支持	通过媒体查询轻松适配手机、平板、桌面等不同设备
高效复用	一份 CSS 文件可被多个页面引用，实现“一次编写，处处使用”
便于维护	修改全局样式只需调整 CSS 文件，无需逐页修改 HTML
利于 SEO	清晰的语义化结构和干净的代码有助于搜索引擎抓取与索引
丰富表现力	提供远超 HTML 原生样式的视觉控制能力（如动画、渐变、阴影等）
支持离线浏览	结合缓存机制，可实现 Web 应用的离线访问

在以下两条规则中，哪个会生效？为什么？

.container p { color: blue; }
p { color: red !important; }