🎨 第一章：CSS 初探

理解 CSS 如何工作，掌握基础概念和语法

1.1 CSS 是什么？

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述 HTML 文档表现形式的语言。它负责网页的视觉呈现，包括布局、颜色、字体、间距等所有样式相关的内容。

            🎯 CSS 的核心作用：将内容（HTML）与表现（CSS）分离，使网页结构更清晰，样式管理更灵活。
        

CSS 的工作原理

浏览器加载 HTML 文档
解析 HTML 并构建 DOM（文档对象模型）
加载并解析 CSS
将 CSS 规则应用到 DOM 元素上
渲染页面并显示给用户

1.2 CSS 的三种引入方式

行内样式 (Inline)

直接在 HTML 元素的 style 属性中定义样式。

<!-- 行内样式示例 -->
<h1 style="color: blue; font-size: 24px;">Hello World</h1>

何时使用：仅在需要为单个元素设置特殊样式且没有其他更好的方式时使用。
何时不使用：避免在多个元素上重复使用行内样式，这会导致代码冗余和维护困难。

内部样式 (Internal)

在 HTML 文档的 <head> 部分使用 <style> 标签定义样式。

<!-- 内部样式示例 -->
<style>
    h1 {
        color: blue;
        font-size: 24px;
    }
    p {
        line-height: 1.6;
    }
</style>

外部样式表 (External)

将样式定义在单独的 .css 文件中，然后通过 <link> 标签引入。

<!-- 在 HTML 中引入外部样式表 -->
<link rel="stylesheet" href="styles.css">

<!-- styles.css 文件内容 -->
h1 {
    color: blue;
    font-size: 24px;
}
p {
    line-height: 1.6;
}

最佳实践：使用外部样式表是现代前端开发的标准做法，它便于样式的统一管理和复用，也有利于浏览器缓存。

1.3 浏览器默认样式与重置

浏览器默认样式

不同浏览器对 HTML 元素有不同的默认样式，这可能导致在不同浏览器中显示不一致。

样式重置方案

方案	特点	适用场景
Reset CSS	完全重置所有样式为零	需要完全控制样式的项目
Normalize.css	保留有用的默认样式，统一浏览器差异	大多数项目的首选
Modern Reset	结合 Reset 和 Normalize 的优点	现代前端项目

Modern Reset 示例

/* Modern CSS Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p {
    overflow-wrap: break-word;
}

1.4 语法结构：选择器、属性、值

            CSS 规则的基本结构：

            选择器 { 属性: 值; 属性: 值; }

语法示例

.button {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

选择器

选择器用于指定哪些 HTML 元素会应用这些样式。

属性

属性是你要设置的样式特性，如颜色、字体、间距等。

值

值是属性的具体设置，如红色、16px、center 等。

1.5 注释与代码组织规范

CSS 注释

/* 这是一个 CSS 注释 */
.container {
    width: 100%;
    /* 宽度设置为 100% */
    max-width: 1200px;
}

代码组织规范

按功能分组：布局、排版、组件、响应式等
使用一致的命名：BEM 或其他命名约定
保持代码整洁：适当的缩进和空格
避免重复：使用 CSS 变量或继承
注释重要部分：复杂的布局或动画

推荐的代码组织顺序：
1. 布局属性（display, position, float, clear）
2. 盒模型属性（width, height, margin, padding）
3. 排版属性（font, text-align, line-height）
4. 视觉属性（color, background, border）
5. 其他属性（transform, transition, animation）

动手练习

练习 1：创建你的第一个 CSS 文件

创建一个名为 style.css 的文件
添加基本的样式重置
为 h1, p, a 标签设置样式
在 HTML 文件中引入这个 CSS 文件
观察页面变化

练习 2：尝试三种引入方式

使用行内样式设置一个元素的颜色
使用内部样式设置一个段落的字体大小
使用外部样式表设置页面的背景颜色
观察优先级效果