3.3 CSS基础知识
任何Web网站的开发通常都包含两方面内容，即站点的外观设计和站点的功能实现，而成功的网站应该在这两方面保持平衡，既设计美观，又方便实用。站点的外观设计包括页面和控件的外观样式、背景色、前景色、字体、网页布局等，如果通过HTML的各种标签及其属性实现满足要求的外观，编码实在是太复杂、太臃肿，而CSS可以助你一臂之力。
级联样式表（Cascading Style Sheets, CSS）是一种设计网页样式的工具，借助CSS的强大功能，网页将在你丰富的想象力下千变万化。
CSS是W3C为了弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准，其重新定义了HTML中的文字显示样式，并增加了一些新的概念，如类、层等，可以实现文字重叠、定位等。CSS还允许将样式定义单独存储在样式文件中，将显示的内容和显示的样式定义分离，使在保持HTML简单明了的初衷的同时能够对页面的布局施加更多的控制，避免代码的冗余，使网页体积更小，下载更快。另外，也可以将多个网页链接到同一个样式文件，从而为整个网站提供一个统一、通用的外观，并且也使多个具有相同样式表的网页可以简单快速地同时更新。
3.3.1 CSS样式表定义
在网页制作过程中，定义样式表的方法主要有下面三种。
1．通过HTML标签定义样式表
CSS样式表的基本语法如下：
引用样式的对象{标签属性:属性值;标签属性:属性值;标签属性:属性值;…}
（1）引用样式的对象：指的是需要引用该样式的HTML标签，可以是一个或多个标签（各个标签之间用逗号分开），需要注意的是，这里使用的是去掉尖括号的标签名。例如，p、table等，而不是<p>、<table>。
（2）标签属性：属性值——这是一一对应的，每个属性与属性值对之间用分号隔开。要说明的是，CSS的属性设置与脚本语言中的属性设置有一点不同，即属性名称的写法不同。在CSS中，凡属性名为两个或两个以上的单词构成时，单词之间以“-”隔开，如背景颜色属性background-color。
例如，“<h1></h1>标签和<h2></h2>标签内的文本居中显示，并采用蓝色字体”的样式表为
h1,h2{text-align:center;color:blue}
2．使用id定义样式表
在HTML页面中id选择符用来对某个单一元素定义单独的样式，定义id选择符要在id名称前加上一个#号。使用id定义样式表的基本语法如下：
#id名称{标签属性:属性值;标签属性:属性值;标签属性:属性值;…}
使用时只需将要用该样式的网页内容前加一个id=＂id名称＂。
例如：
#sample{font-family:宋体;font-size:60pt}
<p id=sample>段落文本</p>
这样就可以使<p></p>标签对内的文本以sample样式显示。
3．使用class定义样式表
若要为同一元素创建不同的样式或为不同元素创建相同的样式，可以使用CSS类。CSS类有两种定义格式，定义时，在自定义类的名称前面加一个点号。
1）标签名.类名｛标签属性：属性值；标签属性：属性值；标签属性：属性值；…｝
这种格式的类指明所定义的样式只能用在类名前所指定的标签上。
例如：
h1.center{text-align:center}
该center类的样式只能用在<h1>标签上。
2）.类名｛标签属性：属性值；标签属性：属性值；标签属性：属性值；…｝
这种格式的类使所有class属性值为该类名的标签都遵循该类所定义的样式。
例如：
.text{font-family:宋体;color:red;}
<p class="text">段落文本</p>
<p></p>标签对使用text类使标签中的文本字体为宋体，颜色为红色。
3.3.2 HTML中加入CSS的方法
在HTML中加入CSS的方法主要有三种：嵌入式样式表、内联式样式表、外联式样式表。三种方法各有妙用，主要的区别在于它们规定风格的使用范围不同，下面分别对三种方法做简单介绍。
1．嵌入式样式表
嵌入式样式表很简单，只要在需要应用样式的HTML标签上添加CSS属性就可以了，这种方法主要用于对具体的标签做具体的样式设置，其作用范围只限于本标签。
例如：
<p style="color:red;font-size:10pt">使用嵌入式样式表</p>
这个样式表只是让当前的<p></p>标签对中的文字为红色，字体大小为10pt。
2．内联式样式表
内联式样式表利用<style></style>标签对将样式表定义在HTML文档的<head></head>标签对之间，内联式样式表的作用范围是本HTML文档。
【例3-14】 内联式样式表实例（style1.html）。
运行效果如图3-11所示。
图3-11 内联式样式表实例运行效果
（1）<style></style>用来说明其标签中的代码用于定义样式表。
（2）<style>标签的type属性用于指明样式的类别，默认值为text/css，允许不支持CSS的浏览器忽略样式表。
（3）<！--和-->是注释标签。
3．外联式样式表
外联式样式表是将定义好的CSS单独放到一个以css为扩展名的纯文本文件中，再使用<link>标签链接到网页中。
这种方法的最大好处是，定义一个样式可以用到大量网页中，从而使整个站点风格保持一致，避免重复的CSS属性设置。另外，当遇上站点改版或某些重大调整要对风格进行修改时，可直接修改CSS文件，而不用打开每个网页进行修改。
【例3-15】 外联式样式表实例。
（1）创建样式表StyleSheet.css。
StyleSheet.css代码如下：
p{
background-color:yellow;color:blue;font-style:italic
}
.text{
font-family:宋体;font-size:20pt;text-decoration:underline
}
（2）在网页上引用样式表（style2.html）。
<html>
<head>
<title>外联式样式表实例</title>
<meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
<link href="StyleSheet.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<h1 class="text">本标题文字字体大小为20磅,有下画线</h1>
<p>本段文字背景颜色为黄色,字体颜色为蓝色,斜体</p>
</body>
</html>
运行效果如图3-12所示。
图3-12 外联式样式表实例运行效果
（1）<link>标签中的rel=＂stylesheet＂指明此处链接的元素是一个样式表，该值一般不需要改动。
（2）<link>标签中的href属性用来设置需要链接的样式表文件地址。
3.3.3 CSS的优先级
CSS是级联样式表，级联是指继承性，即在标签中嵌套的标签继承外层标签的样式。级联的优先级顺序是嵌入式样式表（优先级最高）、内联式样式表、外联式样式表、浏览器默认（优先级最低）。当样式表继承遇到冲突时，总是以最后定义的样式为准。
例如：
<div style="color:blue;font-size:20pt">
<p style="font-size:25pt">段落文本</p>
</div>
因为<p></p>标签对嵌套在<div></div>标签对之间，所以，<p></p>标签对中的文本内容样式将继承<div>样式设置，文字颜色是蓝色。又font-size属性值继承后发生冲突，所以，以最后定义的<p>属性值为准，字体大小为25pt。
3.3.4 CSS基本属性
从CSS定义的基本语法可以看出，属性是CSS非常重要的部分，熟练掌握各种属性将会使页面编辑更加得心应手，下面介绍几种主要的属性。
1．字体属性
基本字体属性简介如表3-2所示。
表3-2 字体属性简介
例如：
• h2{font-family:helvetica,impact,sans-serif}
Web浏览器阐释样式表的规则：首先在列表中寻找字体的名称（helvetica），如果在该计算机中安装了这种字体，就使用它；如果没有安装，则移向下一种字体（impact）；如果这种字体也没有安装，则移向第三种字体（sans-serif）。
• h1{font-style:oblique}
• span{font-variant:small-caps}
当文字中所有字母都是大写的时候，小型大写字母（值）会显示比小写字母稍大的大写字符。
• p{font-weight:800}
• h3{font-size:large}
h4{font-size:12pt}
h5{font-size:90%}
h6{font-size:larger}
2．颜色和背景属性
颜色和背景属性简介如表3-3所示。
表3-3 颜色和背景属性简介
例如：
• b{color:#333399}
b{color:rgb(51,204,0)}
b{color:blue}
• b{background-image:url(background.gif)}
p{background-repeat:no-repeat;background-image:
url(http://www.zzuli.com/images/bg.gif)}
p{background:url（sample.jpg）no-repeat}
3．文本属性
文本属性简介如表3-4所示。
表3-4 文本属性简介
例如：
p{letter-spacing:1em;text-align:justify;text-indent:4em;line-height:17pt}
该CSS样式设置字间距为1em，文本水平对齐方式为两端对齐，文本首行缩进为4em，行高为17pt。
4．分级属性
通过CSS提供的分级属性，人们能实现“项目符号和编号”功能，表3-5对分级属性进行了简单介绍。
表3-5 分级属性
例如：
• p{display:block;white-space:normal}
• ol{list-style-type:upper-alpha}
项目编号为A B C D E …
ol{list-style-type:decimal}
项目编号为1 2 3 4 5 …
ol{list-style-type:lower-roman}
项目编号为i ii iii iv v …
• ul.check{list-style-image:url(sample.gif)}
• li.square{list-style:square inside}
5．鼠标属性
通过改变cursor属性，可以使鼠标移动到不同的元素对象上时显示不同的形状，例如，若链接目标为帮助文件，则可以使用帮助形式的鼠标；若想告诉用户网页哪里可以单击，那么只要在页面上特定的位置让鼠标变成手形，用户就会辨认出页面上的活动区域。cursor属性值及其含义如表3-6所示。
表3-6 cursor属性值及其含义
例如：
• <span style="cursor:wait">等待</span>
设置鼠标属性为“等待”。
• <span style="cursor:help">帮助</span>
设置鼠标属性为“帮助”。