CSS: CSS 简介
1. 什么是 CSS？
CSS（Cascading Style Sheets，层叠样式表）是一种用于控制网页样式与布局的描述性语言。通过 CSS，你可以精确控制网页中各个 HTML 元素的显示效果，包括字体、颜色、背景、边框、尺寸、位置等视觉属性。CSS 是现代网页开发不可或缺的核心技术。
打个比方：如果 HTML 是网页的"骨架"——决定了页面上有什么内容（标题、段落、图片、表格等），那么 CSS 就是网页的"衣服和妆容"——决定了这些内容长什么样（颜色、大小、位置、动画等）。
💡 通俗理解： HTML 是"骨架"，CSS 是"衣服和妆容"——学 CSS 之前建议先了解 HTML 基础，这样才知道"衣服"要穿在什么"骨架"上。
2. CSS 的主要作用
- 控制页面布局：定义网页元素的位置、尺寸及排列方式
- 设置视觉样式：指定颜色、字体、边框、背景等样式属性
- 增强用户体验：通过动画、过渡、响应式设计等提升页面交互性
- 适配多终端设备：通过灵活的布局与单位设置，支持不同屏幕尺寸的显示需求
✅ 放心学： CSS 不需要任何编程基础就能入门。你只需要一个浏览器和一个文本编辑器（记事本都行），随时能看到效果。
3. 结构与样式分离
CSS 最大的价值之一就是实现了"内容与表现分离"——HTML 负责结构化内容，CSS 负责视觉呈现。这种分离带来很多好处：
- 维护更方便：改样式只需改 CSS 文件，不用动 HTML 结构
- 代码更整洁：HTML 里没有一堆样式属性，清晰易读
- 复用性更强：同一个 CSS 文件可以被多个页面共享
- 加载效率高：浏览器缓存 CSS 文件后，多个页面都受益
4. 浏览器如何工作
当浏览器加载一个网页时，它会：
- 解析 HTML 文档，构建 DOM（文档对象模型）树
- 解析 CSS 文件/代码，构建 CSSOM（CSS 对象模型）树
- 将 DOM 和 CSSOM 合并为渲染树
- 根据渲染树布局（计算每个元素的位置和大小）
- 绘制到屏幕上
简单说，浏览器先把结构和样式分别解析好，再合并计算，最后画出你看到的页面。
5. CSS 的发展简史
📌 你知道吗： CSS 最初在 1996 年发布时，浏览器支持非常有限。当时的开发者甚至用嵌套表格来布局，直到 CSS3 出现才真正改变了局面。
- CSS1（1996年）：最早的 CSS 标准，提供了字体、颜色、边距等基本样式能力
- CSS2（1998年）：增加了定位、浮动、z-index 等布局能力
- CSS3（2005年至今）：模块化发展，增加了圆角、渐变、阴影、动画、Flexbox、Grid 等大量新特性
- CSS4+（进行中）：持续演进，增加了容器查询、层叠层等新功能
现在的 CSS 已经非常强大，能实现很多以前需要 JavaScript 或图片才能完成的效果。
6. CSS 的核心理念
- 层叠（Cascading）：多个样式规则可以作用于同一个元素，按照优先级规则最终确定生效的样式
- 继承（Inheritance）：某些样式属性会从父元素传递给子元素
- 盒模型（Box Model）：每个元素都被看作一个矩形盒子，由内容、内边距、边框、外边距组成
- 响应式（Responsive）：通过媒体查询等技术，让页面在不同设备上都有良好的表现
▶ 示例
一个带 CSS 样式的简单 HTML 页面:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
h1 { color: navy; }
</style>
</head>
<body>
<h1>你好，CSS!</h1>
<p>这是一个有样式的段落。</p>
</body>
</html>
浏览器将标题渲染为深蓝色，所有文本使用 Arial 字体。<style> 标签中的 CSS 控制这些视觉属性。
❓ 常见问题
Q CSS 和 HTML 有什么区别？
A HTML 负责网页的"骨架和内容"（标题、段落、图片），CSS 负责"外观和布局"（颜色、大小、位置）。HTML 决定页面上有什么，CSS 决定这些东西长什么样。
Q 学 CSS 需要先学 HTML 吗？
A 建议先掌握 HTML 基础（知道常用标签就行），因为 CSS 是用来修饰 HTML 元素的，不懂 HTML 结构的话，CSS 无从下手。
Q CSS 能做出动画效果吗？
A 可以。CSS3 提供了 transition（过渡）、animation（关键帧动画）、transform（变换）等功能，可以实现按钮悬浮变色、加载旋转、卡片翻转等常见网页动效。
📖 小节
- CSS 是网页开发的三剑客之一（HTML + CSS + JavaScript）
- 它负责页面的视觉表现，让网页从"能看"变成"好看"
- 掌握了 CSS，你就能控制网页上每一个像素的呈现效果
- 接下来我们将从 CSS 的基本语法开始，一步步深入学习
📝 作业
- 在你的项目文件夹中创建一个
css-intro.html文件，回想一下你见过的网页，哪些部分你觉得是 CSS 在起作用？ - 尝试打开一个你喜欢的网站，使用浏览器的开发者工具（F12）查看 Elements 面板，观察 HTML 结构右侧的 Styles 面板，看看有哪些 CSS 规则在起作用。
- 用自己的话总结 CSS 与 HTML 的分工关系，写在作业笔记中。
