如果您是第一次接触 CSS ，那这篇短文就非常适合您，它将帮助您创建自己的第一个 CSS 样式。通过约5分钟的阅读，您将了解到：
- 如何在 HTML 文件中定义样式
- 如何在样式表文件中定义样式
- 如何在 HTML 文件中引用样式表文件
- 如何利用样式控制网页显示
说明
“样式”有一个更专业的术语：规则。CSS 是定义什么的？其实就是定义显示规则的。为了与主流叫法保持一致，后文会更多的使用“规则”这一术语。
1. 准备 HTML 文件
首先我们准备一个 HTML 文件，命名为 demo.html。它包含两个段落，一个列表，文件内容如下所示。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <title>document's title</title> </head> <body> <p>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.</p> <ul> <li>Suspendisse dui purus</li> <li>Vivamus a tellus</li> <li>Pellentesque habitant</li> </ul> <p>Donec laoreet nonummy augue.</p> </body> </html> |
用浏览器打开 demo.html，它看起来是这个样子的：
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
- Suspendisse dui purus
- Vivamus a tellus
- Pellentesque habitant
Donec laoreet nonummy augue.
看起来是不是非常朴素？没错，它正翘首以盼，等着 CSS 来装扮自己。
2. 在 HTML 文件中定义规则
CSS 规则可以直接定义在 HTML 文件中，但更常见的是在样式表文件中定义 CSS 规则。对于初学者而言，在入门阶段可以采用第一种方式。下面学习如何在 HTML 文件中定义规则。
修改 demo.html 文件，用<style>标签在 HTML 文件中添加 CSS 规则。修改后的 demo.html 文件内容如下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <title>document's title</title> <style type="text/css"> body {font-family:sans-serif; background:#2196f312; color:black;} </style> </head> <body> <p>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.</p> <ul> <li>Suspendisse dui purus</li> <li>Vivamus a tellus</li> <li>Pellentesque habitant</li> </ul> <p>Donec laoreet nonummy augue.</p> </body> </html> |
<style> 标签放置在 <head> 和 </head> 标签之间。 CSS 规则放置在 <style> 和 </style> 标签之间。
本例中定义了一条 CSS 规则：将网页文字的颜色设为黑色，将网页的背景色设为淡蓝色，将网页的字体设置为sans-serif。
用浏览器打开 demo.html，现在它看起来是这个样子的。
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
- Suspendisse dui purus
- Vivamus a tellus
- Pellentesque habitant
Donec laoreet nonummy augue.
是不是美观了一些？
3. 在样式表文件中定义 CSS 规则
尽管可以在 HTML 文件中定义规则，但更好的做法是在样式表文件中定义规则。HTML 文件根据需要引用相应的样式表文件。这种做法的核心思想是：内容和显示的分离。一方面实现了规则的重用，方便多个网页共享规则。另一方面为内容创造者提供了更自由的展示选择，作者可根据不同的场合选择不同的样式表文件。
样式表文件的后缀是 .css。
我们在 demo.html 文件所在的目录下新建一个样式表文件，命名为 first.css。用文本编辑器打开 first.css 文件，将 demo.html 文件中 <style> 和 </style> 之间的内容拷贝过来（不含 <style> 和 </style>本身）。first.css 文件内容如下所示。
1 2 3 4 5 | body { font-family:sans-serif; background:#2196f312; color:black; } |
4. 在 HTML 文件中引用样式表文件
打开 demo.html 文件，做如下修改：
- 删除
<style>和</style>标签及其之间的全部内容； - 增加
<link type=”text/css” rel=”stylesheet” href=”first.css”>语句。
修改后的 demo.html 文件内容如下所示。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <title>document's title</title> <link type="text/css" rel="stylesheet" href="first.css"> </head> <body> <p>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.</p> <ul> <li>Suspendisse dui purus</li> <li>Vivamus a tellus</li> <li>Pellentesque habitant</li> </ul> <p>Donec laoreet nonummy augue.</p> </body> </html> |
用浏览器再次打开 demo.html ，现在它看起来和刚才是不是一模一样？
5. 利用样式控制网页显示
5.1 设置段落文本颜色
在 first.css 文件中增加 p {color:red}。修改后的 first.css 文件内容如下所示。
1 2 3 4 5 6 | body { font-family:sans-serif; background:#2196f312; color:black; } p { color:red; } |
规则 p {color:red} 的意思是：将网页中所有 <p> 元素的文本颜色设置为红色。
用浏览器打开 demo.html，您将看到如下图所示的效果。
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
- Suspendisse dui purus
- Vivamus a tellus
- Pellentesque habitant
Donec laoreet nonummy augue.
5.2 设置列表边框
在 first.css 文件中增加 ul {border: dotted medium;}。修改后的 first.css 文件内容如下所示。
1 2 3 4 5 6 7 | body { font-family:sans-serif; background:#2196f312; color:black; } p { color:red; } ul {border: dotted medium;} |
规则 ul {border: dotted medium;} 的意思是：将 ul 元素的边框设置为：虚线、中等宽度。
用浏览器打开 demo.html ，您将看到如下图所示的效果。
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
- Suspendisse dui purus
- Vivamus a tellus
- Pellentesque habitant
Donec laoreet nonummy augue.
6. 总结
本文让我们对 CSS 样式表有了一个最基本的认识和直观的感受。我们不仅创建了第一个样式表文件，还在浏览器中看到了它的实际效果。千里之行始于足下，这是我们 CSS 旅程的开端，后面的旅程将更加精彩。
