层叠样式表(CascadingStyleSheets,缩写为CSS),是一种样式表语言,用来描述HTML或XML文档的呈现形式。CSS定义了元素在显示时应该如何被渲染的问题,是为网页添加样式的代码。
CSS是开放网络的核心语言之一,由W3C规范实现跨浏览器的标准化。CSS节省了大量的工作。样式可以保存在外部.css文件中,同时控制多个网页的布局,这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS被分为不同等级:CSS1现已废弃,CSS2.1是推荐标准,CSS3分成多个小模块且正在标准化中。
和HTML类似,CSS也不是真正的编程语言,甚至不是标记语言。它是一门样式表语言,这也就是说人们可以用它来选择性地为HTML元素添加样式。举例来说,要选择一个HTML页面里所有的段落(P)元素,然后将其中的文本改成红色,可以这样写CSS:
p{color:red;}
首先新建一个styles文件夹,在其中新建一个style.css文件,将这三行CSS保存在这个新文件中。然后再将该CSS文件连接至HTML文档。
1.打开index.html文件,然后将下面一行粘贴到文档头(也就是<head>和</head>标签之间)。
<linkhref="styles/style.css"rel="stylesheet">
2.保存index.html并用浏览器将其打开。应该看到P元素之间的文字变成红色了
让我们来仔细看一看上述CSS:
整个结构称为“规则”,各部分释义如下:
选择器(Selector):HTML元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素(在这个例子中就是p元素)。要给不同元素添加样式只需要更改选择器就行了。
声明(Declaration):一个单独的规则,如color:red;用来指定添加样式元素的属性。
属性(Properties):改变HTML元素样式的途径。(本例中color就是<p>元素的属性。)CSS中,由编写人员决定修改哪个属性以改变规则。
属性的值(Propertyvalue):在属性的右边,冒号后面即属性的值,它从指定属性的众多外观中选择一个值(我们除了red之外还有很多属性值可以用于color)。
注意其他重要的语法:
•每个规则集(除了选择器的部分)都应该包含在成对的大括号里({})。
•在每个声明里要用冒号(:)将属性与属性值分隔开。
•在每个规则集里要用分号(;)将各个声明分隔开。
如果要同时修改多个属性,只需要将它们用分号隔开,就像这样:
p{color:red; width:800px;border:1pxsolidblue;}
多元素选择:也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如:
p,li,h1{color:red;}