欢迎来到 CSS 的世界！
在上一章中，你已经学会如何利用 HTML 构建网站的“骨架”。现在，是时候摇身一变，成为一名数字室内设计师了！层叠样式表（Cascading Style Sheets，简称 CSS）就是我们用来让网站看起来既美观、又有条理且专业的语言。
你可以把 HTML 想象成房子的结构（墙壁和门），而 CSS 就是房子的装饰（油漆、家具，以及窗户摆放的位置）。在本章中，你将学习如何控制网页布局、灵活运用色彩，甚至为网页加入动画效果。
8.1 编写 CSS：规则手册
在开始美化网页之前，我们需要先了解 CSS 的运作原理，以及如何将它与 HTML 连接起来。
8.1.1 CSS 的用途
为什么我们要用 CSS，而不直接在 HTML 里面设定样式呢？
- 控制页面布局： CSS 让你能够精准地将网页元素放置在想要的位置。
- 保持设计一致： 你只需要修改一个 CSS 文件，就能一次更新 100 个网页的字体！
8.1.2 将 CSS 连接到 HTML
将 CSS 加入项目的方法有三种。如果觉得眼花缭乱也不用担心，外部样式表 (External) 才是专业开发者最常用的方法！
- 内联样式 (Inline Styles)： 使用 style 属性直接加在 HTML 标签内。
示例： <p style="color: red;"> - 内部样式表 (Internal Style Sheets)： 写在 HTML <head> 里面的 <style> 标签中。
- 外部样式表 (External Style Sheets)： 这是建立一个独立的文件（扩展名为 .css），然后连接到你的 HTML。
- 文件夹结构： 请将你的 CSS 文件放在专属文件夹中（通常命名为 css 或 styles）。
- 相对路径： 你需要告知 HTML 该文件相对于 HTML 文件位置的路径。
示例： href="css/style.css"
8.1.3 如何编写 CSS 规则
一条 CSS 规则包含三个部分：
1. 选择器 (Selector)： 我们要设定哪个 HTML 元素？（例如：h1）
2. 属性 (Property)： 我们要修改什么？（例如：color）
3. 值 (Value)： 新的设定是什么？（例如：blue）
语法： selector { property: value; }
8.1.4 理解选择器（“目标定位”系统）
要设定某个东西的样式，你必须先“选中”它。以下是最常用的方式：
- 标签选择器 (Type Selector)： 选中所有同名的元素（例如：p 会选中所有段落）。
- 类选择器 (Class Selector)： 选中具有特定 class 的元素。开头必须加一个点 (.)。（例如：.main-text）。
- ID 选择器 (ID Selector)： 选中唯一的一个元素。开头必须加一个井号 (#)。（例如：#header-unique）。
- 通用选择器 (Universal Selector)： 即 * 符号。它会选中页面上所有元素。
- 后代选择器 (Descendant Selector)： 选中另一个元素内部的某个元素（例如：div p 会选中位于 div 里面的段落）。
快速复习：记忆小撇步
Class = 像学校的班级（很多学生都可以属于同一个班）。使用 .
ID = 像身份证（每个人都只有一张，具备唯一性）。使用 #
8.1.5 效率：层叠 (Cascade) 与继承 (Inheritance)
层叠 (Cascade)： 如果两条规则冲突，通常写在后面（文件越下方）的规则会胜出。
继承 (Inheritance)： 某些样式（例如字体颜色）会从“父层”传递给“子层”。如果你设定 <body> 的文字颜色为蓝色，除非你特别指定，否则里面所有的段落也会自动变成蓝色！
重点总结： CSS 通过将“外观”与“内容”分开，大幅提升了网页设计的效率。在大型项目中，请务必使用外部样式表！
8.2 设计网页：打造美观页面
现在进入有趣的部分——加入颜色、字体和图片！
8.2.1 设定颜色
电脑通过几种方式来理解颜色：
- 颜色名称： 简单的字词，如 red（红）、blue（蓝）或 hotpink（亮粉红）。
- 十六进制 (Hex)： 以 # 开头的 6 位数代码。（例如：#FF5733）。
- RGB： 代表红 (Red)、绿 (Green) 和蓝 (Blue)。
公式： \( rgb(255, 87, 51) \)
8.2.2 操控颜色与效果
- 透明度 (Opacity)： 控制元素的通透程度（0.0 为完全透明，1.0 为完全不透明）。
- 渐变 (Gradients)： 两种或多种颜色之间的平滑过渡。
- HSL： 代表色相 (Hue)、饱和度 (Saturation) 和亮度 (Lightness)。
8.2.3 长度与尺寸
设定宽度或字体大小时，你有两种选择：
1. 绝对长度： 不会改变的固定大小（例如：用于像素的 px，或用于厘米的 cm）。
2. 相对长度： 根据屏幕大小而变动的尺寸（例如：% 或 em）。提示：使用这些单位可以让你的网站在手机上也运行顺畅！
8.2.4 设定特定元素的样式
你可以用 CSS 修改几乎任何东西：
- 字体： 修改 font-family（字型）、font-size（大小）和 font-weight（粗细）。
- 列表： 修改项目符号的样式，或是将其完全移除。
- 表格与表单： 加入内距 (padding) 和美观的边框，让数据更易读。
重点总结： 尽可能使用 相对长度 (%)，这样你的网站无论是在巨大的电脑屏幕，还是迷你的智能手机上，看起来都很棒。
8.3 CSS 盒模型与定位
这是 CSS 中最重要的概念！每一个 HTML 元素实际上都是一个矩形盒子。
8.3.1 盒模型的组成部分
想象墙上的一幅装框相片：
- 内容 (Content)： 相片本身（文字或图片）。
- 内距 (Padding)： 相片与框框之间的空白区域（盒子内部）。
- 边框 (Border)： 木质的框框本身。
- 外距 (Margin)： 你的相框与墙上一张相片之间的空白区域（盒子外部）。
8.3.2 定位内容
我们该如何移动这些盒子呢？
- 常规流 (Normal Flow)： 元素按照 HTML 撰写的顺序，一个接一个地出现。
- 相对定位 (Relative)： 相对于元素原本的位置进行小幅位移。
- 绝对定位 (Absolute)： 将元素放置在页面上的特定坐标。
- 固定定位 (Fixed)： 元素会“黏”在屏幕上，即使滚动页面也不会移动（例如导航栏）。
- 浮动 (Floating)： 将元素推向左侧或右侧，让文字绕着它排列。
8.3.3 为不同屏幕设计（响应式设计）
由于大家会使用手机、平板和电脑，我们需要响应式设计 (Responsive Design)：
- 液态布局 (Liquid Layouts)： 使用百分比 (%) 而非固定的像素，让元素能够伸缩。
- 布局网格 (Layout Grids)： 一套隐形的栏位系统，用来协助对齐内容。
- CSS 框架 (CSS Frameworks)： 预先写好的 CSS（例如 Bootstrap），能帮助你更快建立布局。
重点总结： 掌握 盒模型 (Margin, Border, Padding) 是解决 90% 布局问题的关键！
8.4 CSS 动画：让网页活起来
CSS 不只是静态的，它也可以动起来！
8.4.1 过渡 (Transitions) 与变形 (Transforms)
- 过渡 (Transitions)： 允许属性在几秒钟内平滑地改变（例如：当鼠标悬停在按钮上时，颜色缓慢地变化）。
- 变形 (Transforms)： 改变元素的形状或位置（例如：旋转、缩放，或在 3D 空间中移动）。
- 贝塞尔曲线 (Cubic-bezier)： 一种数学方法，用来定义动画的速度（例如：起步慢，接着变快）。
你知道吗？
你可以完全使用 CSS 制作复杂的动画，而不需要用到半行 JavaScript！这对你电脑的电池续航力和性能都更有利。
重点总结： 动画要适度使用。一点点点缀会让网站质感提升，但过多则会让人分心！
常见错误，务必避开
- 忘记分号： 每一行 CSS 属性结尾必须加上 ;，否则底下的程序代码会崩溃。
- 搞混内距与外距： 记住：Padding (内距) 是在边框里面，Margin (外距) 是在边框外面。
- 遗漏点号/井号： 如果你要设定 class，必须加上 .（例如 .myClass）。如果你忘记了，CSS 会以为你在寻找一个名为 <myClass> 的 HTML 标签。
如果起初觉得这些内容很棘手也不要担心！学习 CSS 最好的方法就是在编辑器中尝试修改数值，并观察屏幕上的变化。祝你玩得开心，设计出超棒的网页！