第一次握手
如果您是第一次接触 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 旅程的开端,后面的旅程将更加精彩。
💯本站文章同步发表在官方公众号 ReadingHere,关注公众号您将在第一时间了解本站最新文章和资讯。
❤️欢迎您关注本站官方公众号 ReadingHere。
本文由 ReadingHere 原创,未经 ReadingHere 授权不得转载、摘编。已经授权使用的,应在授权范围内使用,并注明来源: www.readinghere.com。违反上述声明者,ReadingHere 将追究其相关法律责任。