CSS 也不是真正的编程语言,甚至不是标记语言。它是一门样式表语言,这也就是说人们可以用它来选择性地为 HTML 元素添加样式,它定义了一些可视化时候的规则。
写CSS
举例来说,要选择一个 HTML 页面里所有的段落元素,然后将其中的文本改成红色,可以这样写 CSS:
p {
color: red;
}
整个结构称为 规则集(通常简称“规则”),各部分释义如下:
选择器(Selector)
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素(在这个例子中就是 p
元素)。要给不同元素添加样式只需要更改选择器就行了。
声明(Declaration)
一个单独的规则,如 color: red;
用来指定添加样式元素的属性。
属性(Properties)
改变 HTML 元素样式的途径。(本例中 color
就是 <p> 元素的属性。)CSS 中,由编写人员决定修改哪个属性以改变规则。
属性的值(Property value)
在属性的右边,冒号后面即属性的值,它从指定属性的众多外观中选择一个值(我们除了 red
之外还有很多属性值可以用于 color
)。
注意其他重要的语法:
- 每个规则集(除了选择器的部分)都应该包含在成对的大括号里(
{}
)。 - 在每个声明里要用冒号(
:
)将属性与属性值分隔开。 - 在每个规则集里要用分号(
;
)将各个声明分隔开。 - 也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。
例如:
p,li,h1 {
color: red;
width: 500px;
border: 1px solid black;
}
选择器
选择器有许多不同的类型。上面只介绍了元素选择器,用来选择 HTML 文档中给定的元素。但是选择操作可以更加具体。下面是一些常用的选择器类型:
连接
新建一个 styles
文件夹,在其中新建一个 style.css
文件,将CSS 保存在这个新文件中。
然后再将该 CSS 文件连接至 HTML 文档,否则 CSS 代码不会对 HTML 文档在浏览器里的显示效果有任何影响。打开 index.html
文件,然后将下面一行粘贴到文档头(也就是 <head>
和 </head>
标签之间)。
<link href="styles/style.css" rel="stylesheet">