CSS简介[编辑 | 编辑源代码]

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档样式的语言。它定义了网页元素的外观和布局，包括颜色、字体、间距、背景等。CSS与HTML分离，使得内容和样式可以独立管理，提高了代码的可维护性和灵活性。

为什么需要CSS？[编辑 | 编辑源代码]

在早期网页开发中，样式通常直接写在HTML标签内（如），导致代码臃肿且难以维护。CSS的出现解决了以下问题：

结构与样式分离：HTML专注内容，CSS专注表现。
复用性：同一CSS可应用于多个页面。
精确控制：支持像素级布局调整。
响应式设计：适配不同设备屏幕。

基本语法[编辑 | 编辑源代码]

CSS规则由选择器和声明块组成：

selector {
    property: value;
    /* 注释 */
}

示例：将段落文字设为蓝色

p {
    color: blue;
}

核心概念[编辑 | 编辑源代码]

层叠（Cascading）[编辑 | 编辑源代码]

当多个CSS规则应用于同一元素时，浏览器通过以下优先级决定最终样式： 1. 来源：用户代理样式 < 作者样式 < 用户重要样式 < 作者重要样式 2. 特异性：内联样式 > ID选择器 > 类选择器 > 元素选择器 3. 顺序：后定义的规则覆盖先前的。

盒模型[编辑 | 编辑源代码]

每个HTML元素被视为一个矩形盒子，包含：

content（内容）
padding（内边距）
border（边框）
margin（外边距）

数学公式表示总宽度： 解析失败 (语法错误): {\displaystyle 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right }

实际应用案例[编辑 | 编辑源代码]

案例：创建带阴影的卡片

<div class="card">
    <h3>标题</h3>
    <p>卡片内容...</p>
</div>

.card {
    width: 300px;
    padding: 20px;
    margin: 10px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    background-color: white;
}

CSS版本演进[编辑 | 编辑源代码]

主要CSS版本
版本	年份	关键特性
CSS1	1996	基础样式（字体/颜色/边距）
CSS2	1998	定位、z-index
CSS3	1999-今	模块化（动画/渐变/弹性盒）

浏览器开发者工具[编辑 | 编辑源代码]

现代浏览器（Chrome/Firefox）提供CSS调试工具：

实时编辑CSS属性
查看盒模型图示
强制激活伪类（如:hover）

学习建议[编辑 | 编辑源代码]

先掌握基础选择器和盒模型
使用浏览器工具实验样式
逐步学习布局技术（Flexbox/Grid）
遵循渐进增强原则

模板:Note