第十一章 使用CSS样式表
通过CSS样式定义,可以将网页制作得更加绚丽多彩。采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确地控制。用CSS不仅可以做出令浏览者赏心悦目的网页，还能给网页添加许多特效。
11.1 认识CSS
CSS(Cascading Style Sheet,层叠样式表) 是一种制作网页的新技术，现在已经为大多数浏览器所支持，成为网页设计必不可少的工具之一。
网页最初是用HTML标记来定义页面文档及格式，如标题<hl>、段落<p>、表格<table>等，但这些标记不能满足更多的文档样式需求。为了解决这个问题，在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1.
样式表的首要目的是为网页上的元素精确定位。其次，它可以把网页上的内容结构和格式控制相分离。浏览者想要看的是网页上的内容结构，而为了让浏览者更好地看到这些信息，就要通过格式来控制。内容结构和格式控制相分离，使得网页可以仅由内容构成，而将所有的网页的格式通过CSS样式表文件来控制。
CSS主要有以下优点:
- 利用CSS制作和管理网页都非常方便
- CSS可以更加精确地控制网页的内容形式，如前面学过的<font>标签的size属性，它用来控制文字的大小，但它控制的字体只有七级，如果出现需要使用10像素或100像素大的字体的情况，HTML标记就无能为力了。CSS可以办到，它可以随意设置字体的大小。
- CSS样式是丰富多彩的，比HTML更加丰富，如滚动条的样式定义、鼠标光标的样式定义等
- CSS的定义样式灵活多样，可以根据不同的情况，选用不同的定义方法，如可以在HTML文件内部定义，可以分标签定义，分段定义，也可以在HTML文件外部定义，基本上都能满足要求。
11.2 使用CSS
现在CSS已经广泛应用于各种网页的制作当中，在CSS的配合下，HTML语言能发挥出更大的作用。
11.2.1 CSS的基本语法
CSS的语法结构仅由三部分组成，选择符、样式属性和值，基本语法如下：
选择符{样式属性：取值；样式属性：取值；样式属性：取值；......}
- 选择符(selector) 指这组样式编码所要针对的对象，可以是一个XHTML标签，如body、hl;也可以是定义了特定id或class的标签，如#lay选择符表示选择<div id=lay>，即一个被指定了lay为id的对象。浏览器将对CSS选择符进行严格的解析，每一组样式均会被浏览器应用到对应的对象上。
- 属性(Property)是CSS样式控制的核心，对于每一个XHTML中的标签，CSS都提供了丰富的样式属性，如颜色、大小、定位、浮动方式等。
- 值(value)是指属性的值，形式有两种，一种是指定范围的值，如float属性，只能使用left、right、none三种值。另一种为数值，如width能够使用0~9999px，或者其他数学单位来指定。
在实际应用中，往往使用以下类似的应用形式：
body{background-color:red} 表示选择符为body，即选择了页面中的<body> 标签，属性为background-color,这个属性用于控制对象的背景色，而值为red。页面中的body对象的背景色通过使用这组CSS编码，被定义为红色。
除了定义单个属性外，同样可以为一个标签定义多个属性，每个属性之间用分号隔开。
11.2.2 添加CSS的方法
添加CSS有四种方法：链接外部样式表、内部样式表、导入外部样式表和内嵌样式。
1.链接外部样式表
链接外部样式表就是在网页中调用已经定义好的样式表来实现样式表的应用，它是一个单独的文件，在页面中用<link>标记链接到这个样式表文件，<link>标记必须放到页面的<head>标签内。这种方法最适合大型网站的CSS样式定义。如下：
<head>
....
<link rel=stylesheet type=text/css href=slstyle.css>
...
</head>上面的这个例子表示浏览器从slstyle.css文件中以文档格式读出定义的样式表。
rel=stylesheet是指在页面中使用外部的样式表
type=text/css 是指文件的类型是样式表文件
href=slstyle.css是文件所在位置
一个外部样式表文件可以应用于多个页面。因而可以达到一改全改的效果，有利于后期修改编辑
2.内部样式表
内部样式表一般位于<head></head>中，以<style>开始，以</style>结束，即<head><style>XXX</style></head>.
eg：
<html>
<head>
<meta charset="UTF-8">
<title>图像域</title>
<style type="text/css">
body{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.style1{
color: #fbe334;
font-size: 13px;
}
</style>
</head>
<body>
<span class="style1">...</span>
</body>
</html>3.导入外部样式表
指在内部样式表的<style>里导入一个外部样式表，导入时用@import
eg:
<head>
...
<style type="text/css">
@import slstyle.css
其他样式表的声明
</style>
</head>
此例中@import slstyle.css 表示导入slstyle.css样式表，注意使用时外部样式表的路径、方法和链接外部样式表的方法类似，但导入外部样式表输入方式更有优势。实质上它相当于存在于内部样式表中。
4.内嵌样式
内嵌样式是混合在HTML表签里使用的，可以很简单地对某个元素单独定义样式，它主要是在body内实现。内嵌样式的使用是直接在HTML标签里添加style参数，而style参数的内容就是CSS的属性和值，在style参数后面的引号里的内容相当于在样式表大括号里的内容。
eg:
<table style=color:red; margin-right:220px>
...
</table>这种方法使用简单，显示很直观，但无法发挥样式表的优势，因此不推荐使用。
11.3字体属性
前面的HTML中已经介绍了网页中文字的常见标记，下面将以CSS样式定义的方法来介绍文字的设置。使用CSS定义的文字样式更加丰富，实用性更强。
11.3.1 字体font-family
在HTML中，设置文字的字体属性需要通过<font>标记中的face属性，而在CSS中则使用font-family属性。
语法: font-family: "字体1"，"字体2"，...
说明:如果在font-family属性中定义了多种字体，在浏览器中会由前向后选择第一个支持的字体。若全部不支持，显示系统默认字体
eg:
<html>
<head>
<meta charset="UTF-8">
<title>字体 font-family</title>
<style type="text/css">
.h{
font-family: "宋体";
}
</style>
</head>
<body>
<span class="h">
姑娘美貌，实乃旷古绝今，令人见之忘俗。如此沉鱼落雁、闭月羞花之绝代风姿，耀眼不容逼视。<br>
而在下区区萤火之光，怎敢与日月同辉？还望姑娘莫要委屈自己。<br>
终身大事，怎可轻忽？以姑娘之美貌，当配天下第一等伟丈夫，而在下不过一介蝼蚁，如何能高攀姑娘？<br>
若因在下之故，连累姑娘明珠蒙尘，在下此生寝食难安。<br>
多谢姑娘。姑娘宅心仁厚、内外兼美，当真令人钦佩。
</span>
<hr>
姑娘美貌，实乃旷古绝今，令人见之忘俗。如此沉鱼落雁、闭月羞花之绝代风姿，耀眼不容逼视。<br>
而在下区区萤火之光，怎敢与日月同辉？还望姑娘莫要委屈自己。<br>
终身大事，怎可轻忽？以姑娘之美貌，当配天下第一等伟丈夫，而在下不过一介蝼蚁，如何能高攀姑娘？<br>
若因在下之故，连累姑娘明珠蒙尘，在下此生寝食难安。<br>
多谢姑娘。姑娘宅心仁厚、内外兼美，当真令人钦佩。
</body>
</html>
运行结果：
11.3.2 字号font-size
在HTML中，字体的大小是由<font>标记中的size属性来控制的，且只有七级大小。在CSS里可以使用font-size属性来自由控制字体的大小。
语法：font-size: 大小的取值
说明:
| 取值 | 含义 |
| xx-small | 绝对字体尺寸，最小 |
| x-small | 绝对字体尺寸，较小 |
| small | 绝对字体尺寸，小 |
| medium | 绝对字体尺寸，正常默认值 |
| large | 绝对字体尺寸，大 |
| x-large | 绝对字体尺寸，较大 |
| xx-large | 绝对字体尺寸，最大 |
| larger | |
| smaller | |
| length |