第5章　CSS样式表

CSS样式基本知识
　　
　　CSS是 Cascading Style Sheets 的简称。中文意思是层叠样式表。
　　使用CSS样式表可以精确控制文档格式。一个网站上都如果好多文档都使用相同的CSS样式表，则修改CSS样式表后，多个文档格式将同时改变。这对于多个相同格式文档的修改非常方便。
　　CSS样式表有两种存在形式，一种是以文件形式放在网页外，一种是以代码形式嵌入网页内。
　　放在网页外的CSS样式表文件扩展名是“.css”，注意上传到网站时，这个文件一定要与网页文件同时上传。如果链接中没有用路径，还必须与网页文件放在同一个目录中。这种样式表可同时被网站上多个网页调用，修改样式表可同时改变这多个网页的样式。对于建立批量格式相似的网页很有用。
　　嵌入网页内的代码将存放在网页头部，就是在<head>和</head>之间。这种样式只能对该网页有效。好处是不用另附加文件，网页移动位置时不再考虑样式表都跟随移动的问题。
　　下面看建立样式表操作：
　　选择菜单“文本→CSS样式→新建CSS样式”，弹出“新建CSS样式”对话框如下：
　　

　　名称框中输入样式表名称，注意这不是要保存成文件的名称，是网页中调用样式时用的名称。这个名称是以“.”英文句号开头的，后面你可以输入名字，在没有输入名字时，系统默认为“unnamed1”，哈！他叫做“没有名字1”。
　　最下边的“定义在”选项中，选择“新建样式表文件”就是在网页外建立一个 “.CSS”文件；选择“仅对该文件”就是把样式表嵌入到当前网页之中。这两项根据上面的介绍，按实际需要选择。
　　中间的“类型”项分三种，“自定义样式”、“重定义HTML标签”、“使用CSS选择器”。
　　“自定义样式”是定义新的样式，样式内容下面再详细叙述。
　　“重定义HTML标签”是对网页中的“标签”重新设置。前面讲HTML语言时已经说过代码规则，页面中设置有很多以尖括号定义的区块，区块开始定义的标签中有该区块内设置的各种代码，重定义HTML标签可改变或添加代码设置。譬如原来页面设置中定义淡黄色背景，在“body”标签下以下设置： <body background=#ffffe0>选择 “重定义HTML标签”时，背景选择了淡绿色，于是便改变了原来在“body”标签内的设置。
　　“使用CSS选择器”将对链接的样式重新设置。

外挂式CSS样式表
　　下面先学习建立样式表。
　　在“新建CSS样式”对话框中输入名称，类型选择“自定义样式”，“定义在”选项中，选择“新建样式表文件”，按“确定”按钮，弹出“保存样式表文件”对话框如下：
　　

　　“保存在”框中一定要选择站点文件夹，不要存错地方。在下面“文件名”框中输入一个名字，最好用字母不用汉字，扩展名可以不写，系统默认“.css”，按“保存”按钮，弹出“CSS样式定义对话框”如下图：
　　

　　“字体”选项，和前面的页面设置中叙述的一样，不再重复。
　　“大小”选项，可以选择字号、像素数、英寸、毫米等，比页面设置中可选择的多了，没法一一叙述，你可以自己试试。
　　“粗细”里面可以选择字道的粗细。选择几项试试就知道啦。
　　“样式”中有正常、斜体、偏斜体三项可供选择。
　　“变量”项中是设置变量的显示格式，没有编写程序的就不管他了。
　　“行高”项中就可设置行间距了。可以用像素数、英寸、毫米等设置，但最好的方法是用百分比，因为这样可以适合各种大小的字。譬如要想行间保持半个文字的高度为间距，在“行高”中输入“150”，右框中选择“%”，这样行高就是文字的1.5倍。
　　“修饰”中的几种划线你根据需要选择。“颜色”框中可以重新设置字的颜色。
　　在对话框左边“分类”栏里选择“背景”，对话框变成背景设置状态，如下图：
　　

“背景颜色”可以选择要应用区块中的背景色。如样式表用于某段文字，则定义的颜色就是该段文字的背景颜色。“背景图像”也是这样只对应用范围有效。在应用范围以外，还是页面设置中的背景。
　　“重复”项是指背景图片的平铺方式。
　　“附件”中的“固定”和“滚动”两项分别定义不随文字滚动的背景和会随文字滚动的背景。
　　“水平位置”和“垂直位置”分别定义背景的上下左右边界。
　　CSS内容还有很多，有些项不设置也行，只要你所需要的设置好，按“确定”按钮，文件就保存起来了。

　　如果要对某一段文字使用式样表，将光标放在某一段文字上，选择菜单“文本→CSS样式”，在右边弹出的下级菜单中找到刚建立好的样式名称，单击一下，看该段文字是不是以定义的样式显示了。
　　如果选择了CSS样式表，再输入文字或其他内容都将按照样式表的定义显示。如果原来已经输入好的内容，要让某些部分按样式表显示，要先选择这一部分内容(用鼠标拉黑)，再选择样式表。
　　CSS样式是制作网页的高级应用程序，初开始有“迷迷糊糊”的感觉，可能是试验次数少，要经多次试验才能摸索出门路来。当然还有教材叙述的不足，考虑初学者接受能力，下面再补充试验实例。
　　该例子样式设置行间距离为字高的1.5倍。
　　选择菜单“文本→CSS样式→新建CSS样式”，在“新建CSS样式”对话框中，名称输入“.hjjl”(行间距离)，类型选择“自定义样式”，“定义在”选项中，选择“新建样式表文件”，按“确定”按钮，弹出“保存样式表文件”对话框，保存文件名输入“hjjl”。
　　在弹出的“CSS样式定义对话框”中，“行高”中输入“150”，右框中选择“%”，“颜色”框中选择蓝色。按“确定”按钮。看看你的站点目录里是否有一个名字叫做“hjjl.css”文件。打开“记事本”，选择菜单“文件→打开”，找到“hjjl.css”文件，单击“打开”，可以看到内容如下：
.hjjl {
line-height: 150%;
color: #0000FF;
}
　　第一行是样式标记“.hjjl”，中间大括号内是定义的值，行高为150% ，颜色为蓝色。
　　认识了这个样式文件，回到DW编辑版面中来，把光标放在某一段文字中，选择菜单“文本→CSS样式”，在右边弹出的下级菜单中找到“.hjjl”，单击一下，看该段文字是不是变成蓝色、行间拉开了半个字高的距离。　　
　　上例中设置简单，你自己多做试验，把字体、字号、背景等项都设置一下，看看都能出现什么结果。CSS样式以后越学越复杂，一开始基础一定要打好。这些简单的试验你要懒得去做，以后会遇到想不到的困难。

嵌入式CSS样式表
　　下面再试验用“嵌入网页式”。
　　选择菜单“文本→CSS样式→新建CSS样式”，在“新建CSS样式”对话框中，名称输入“.bt”，类型选择“自定义样式”，“定义在”选项中，选择“仅对该文档”，按“确定”按钮，在弹出的“CSS样式定义对话框”中，“大小”输入“16”px，“颜色”框中选择红色。按“确定”按钮。看看“源代码”，在<head>和</head>之间是不是添加了下面内容：
<style type="text/css">

</style>
　　这段代码和上一讲中保存的“.css”文件内容一样，只是没有生成独立的文件，而只是网页文件中头部的一部分。使用方法和以前讲的一样，只是这个样式表不能被其他网页调用。
　　下面试“重定义HTML标签”。
　　选择菜单“文本→CSS样式→新建CSS样式”，在“新建CSS样式”对话框中，类型选择“重定义HTML标签”，“定义在”选项中，选择“仅对该文档”，在名称项右面框中有一个小三角形，单击小三角形可拉开标签选择菜单，菜单中包括了所有可以嵌入样式的HTML标签。我要想对某项重新设置，就选择某标签。譬如你要设置表格样式可选择“table”或“td”，设置图像样式选择“img”等。
　　本次试验设置整个网页的样式，选择“body”，按“确定”按钮，在弹出的“CSS样式定义对话框”中，“大小”输入“12”px，“行高”中输入“150”“%”，“颜色”框中选择蓝色。再在左边“类型”框中单击“背景”，单击图像框右边“浏览”选择一个图片，在“重复”框中选择“重复”，在“附件”框中选择“固定”。按“确定”按钮。
　　现在你在页面输入文字，看看是不是自动按“body”的定义显示的12px蓝色文字。这就是说重定义标签后，你不用选择样式表，内容就自动按定义样式显示了。
　　再试选中第一行标题文字，选择菜单“文本→CSS样式”，在右边弹出的下级菜单中单击“.bt”样式，看只有标题行变成红色16px的文字了。再看下面样式表做的网页，拉动文字上下滚的时候，背景不动只看到文字在背景上上下滚动，很有趣吧，这是在“背景”类型中选择了“固定”的功能。

修改样式表
　　现在本页中有两个样式表了。可是如果式样表不理想，我们还要再修改样式表。
　　选择菜单“文本→CSS样式→编辑CSS样式”，弹出对话框如下：

　　左边是原来存在的样式表名称，右边是操作按钮。“链接”是应用本网页以外的样式表；新建是再建立一个样式表；“编辑”、“复制”、“删除”操作，要先在左边选中一个样式表，再按相应的按钮。
　　试在左边框中先选中一个的样式表名称，单击右边“编辑”按钮，就进入“CSS样式定义”对话框。对话框和建立新样式表时一样，只是现在里面不是空的，你可以修改里面原定义的值，也可添加新的定义项，也可删除原来的定义项。
　　编辑的样式表可以反复进行，看看版面不理想就可重新修改。如前面有人说在文字后面设置了背景，在属性面板中设置的字体、大小就起作用了，这里因为你在样式表里设置的起作用了，如果要改变字体、大小、颜色等，就重新编辑样式表，在样式表中添加字体、大小、颜色的选择。
　　如果你要对局部文字设置不同格式，可以再建立新的样式表。如前面有人说的空格也被加上下划线的问题，那你可以再建立一个样式表，这个表中把“修饰”项选择“无”，选中有下划线的空格，再选择这个样式表，下划线不就去掉了吗。如果原来文字后面设置了背景色，某几个字不需要背景色，再建立一个无背景色的样式表，对于这几个字用这个样式表就行了。

　　最后再说一下“使用CSS选择器”。
　　选择菜单“文本→CSS样式→新建CSS样式”，在“新建CSS样式”对话框中，类型选择“使用CSS选择器”，“定义在”选项中，选择“仅对该文档”，在名称项右面框中有一个小三角形，单击小三角形拉选择菜单，里面有“a:link”“a:visited”“a:hover”“a:active”四项选择。分别设置超级链接文字的样式、访问过的链接样式、鼠标指向链接时的样式和鼠标键按下时的样式。设置对话框操作和其他设置一样，就不再详细叙述。这些项目设置好后，也和重定义标签一样，不用对每个链接都再作调用样式表操作，就自动执行了。但注意你在输入超级链接的文字时，不要在属性面板中作任何设置。如果你又在属性面板中选择字体、大小、颜色等，可能会不按照样式表的设置显示。