CSS 教程

CSS 简介

什么是 CSS？

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述 HTML 或 XML 文档呈现方式的样式表语言。它定义了如何显示网页元素，包括颜色、字体、间距、布局等方面。

CSS 的主要作用是将文档的内容与表现形式分离，使网页结构更加清晰，同时提高代码的可维护性。通过 CSS，您可以：

• 控制文本的字体、大小、颜色和对齐方式
• 设置元素的间距、边距和边框
• 创建响应式布局，适应不同屏幕尺寸
• 添加动画和过渡效果
• 设计复杂的网页布局

CSS 的基本语法

CSS 的基本语法由选择器和声明块组成：

/* CSS 基本语法：选择器 { 属性: 值; } */

h1 { /* 选择器：h1 标签选择器，选中所有的 h1 元素 */
    color: blue; /* 属性：color，设置文本颜色为蓝色 */
    font-size: 24px; /* 属性：font-size，设置字体大小为 24 像素 */
    text-align: center; /* 属性：text-align，设置文本对齐方式为居中 */
} /* 结束 h1 选择器的声明块 */

p { /* 选择器：p 标签选择器，选中所有的 p 元素 */
    color: #333; /* 属性：color，设置文本颜色为深灰色（十六进制颜色值） */
    line-height: 1.6; /* 属性：line-height，设置行高为 1.6 倍字体大小 */
} /* 结束 p 选择器的声明块 */

• 选择器：指定要应用样式的 HTML 元素
• 声明块：包含在大括号 {} 内的一个或多个声明
• 声明：由属性和值组成，属性和值之间用冒号 : 分隔，每个声明以分号 ; 结束

CSS 的历史发展

CSS 的发展历程可以追溯到 1994 年，以下是其主要发展阶段：

CSS 1.0（1996）

第一个官方版本的 CSS，由 W3C（万维网联盟）发布。它包含了基本的样式属性，如字体、颜色、边距等，但功能相对有限。

CSS 2.0（1998）

添加了更复杂的布局功能，如浮动（float）、定位（position）、媒体查询（@media）等。CSS 2.0 使网页布局更加灵活多样。

CSS 2.1（2004）

CSS 2.0 的修订版，解决了一些问题并添加了新特性。CSS 2.1 是一个重要的版本，被大多数浏览器广泛支持。

CSS 3（2011 至今）

CSS 3 不是一个单一的规范，而是分为多个模块发布的。它引入了许多新特性，使网页开发更加灵活和强大：

• 圆角：border-radius 属性
• 阴影：box-shadow 和 text-shadow 属性
• 渐变：linear-gradient 和 radial-gradient 函数
• 动画：@keyframes 规则和 animation 属性
• 过渡：transition 属性
• 弹性布局：Flexbox
• 网格布局：Grid
• 变量：自定义属性（--变量名）
• 媒体查询增强：更复杂的响应式设计

CSS 的版本演变

CSS 的版本演变反映了 Web 开发的需求变化和技术进步：

CSS 的工作原理

当浏览器加载网页时，它会执行以下步骤：

1. 解析 HTML：浏览器解析 HTML 文档，构建 DOM（文档对象模型）树
2. 解析 CSS：浏览器解析 CSS 样式表，构建 CSSOM（CSS 对象模型）树
3. 合并 DOM 和 CSSOM：浏览器将 DOM 树和 CSSOM 树合并，生成渲染树
4. 布局：浏览器计算渲染树中每个节点的位置和大小
5. 绘制：浏览器将渲染树绘制到屏幕上

CSS 与其他技术的关系

CSS 与 HTML 和 JavaScript 一起构成了前端开发的三大核心技术：