CSS 简介 ¶

你需要具备的知识 ¶

在继续学习之前，你需要对下面的知识有基本的了解：

• HTML / XHTML

如果你希望首先学习这些项目，请在 首页 访问相关教程。

什么是 CSS? ¶

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一个

CSS 实例 ¶

一个HTML文档可以显示不同的样式：

查看CSS是如何工作的

样式解决了一个很大的问题 ¶

HTML 标签原本被设计为用于定义文档内容，如下实例：

1<h1>这是一个标题</h1>
2<p>这是一个段落。</p>

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

CSS 如何节省工作量？ ¶

样式表允许样式信息与网页内容分离：

• 样式分离：通过使用CSS，您可以将网页的布局、颜色和样式信息与网页的内容分离
• 统一管理：一个样式表可以控制多个网页的外观，只需修改一个文件即可更新整个网站
• 全局更改：通过修改一个CSS文件，可以轻松地更改整个网站的外观
• 设备适应：不同的样式表可以为不同设备类型定义不同的显示方式

多重样式将层叠为一个 ¶

样式表允许以多种方式规定样式信息。样式可以在单个HTML元素中指定，也可以在HTML页面的头元素中定义，或者在一个外部CSS文件中定义。甚至可以在同一个HTML文档内部引用多个外部样式表。

层叠次序（优先级从高到低）：

1. 内联样式（在HTML元素内部）
2. 内部样式表（在HTML文档头部）
3. 外部样式表
4. 浏览器默认样式

CSS 语法 ¶

CSS 规则由两个主要的部分构成：选择器和声明块。

1selector {
2    property1: value1;
3    property2: value2;
4    property3: value3;
5}

• 选择器通常是您需要设置样式的HTML元素
• 声明块包含一条或多条用分号分隔的声明
• 每条声明包含一个CSS属性名称和一个值，以冒号分隔
• 声明块位于大括号内

在下一章中，您将学习如何使用CSS选择器及如何创建CSS规则。