Frontpage2000中文教程：第四章 编排网页格式
1、边框与阴影
在FrontPage 2000中，可以用很美的边框和阴影，把段落文字包围起来。
将光标移到段落中，然后执行格式／边框与阴影命令，就会弹出对话框：
在边框标签下，可以为段落设置边框的样式，可以不使用边框，也可以为段落加上相同的边框样式，或者为每条边设置不同的式样。
点击阴影标签，在阴影标签下可以为段落设定背景色和前景色，也可以为段落设置背景图片。
2、级联样式表
样式表CSS在网页中占着极重要的地位，它的使用一直是热门讨论的话题。CSS是Cascading Style Sheet的简写，译为“层叠样式表单”。CSS几乎可以定义所有的网页元素，CSS虽然功能强大，但平时我们用到的是很少的，最常见的有：定义字体大小(用CSS定义的字体大小不会浏览器的字体设置而改变)、去掉超链下划线、超链接变色等等。下面详细、简练地讲如何使用CSS。
1.CSS加在什么位置？编辑CSS时候，强烈建议使用记事本之类的文本编辑工具打开你的网页代码。找到<head>和</head>，在<head>和</head>之间加入这句，<STYLE></STYLE>，然后所有的样式表都定义在<STYLE>和</STYLE>之间。
有很多网站喜欢把样式表写成一个CSS文件，然后所有文件都指向这里来调用它。我个人不喜欢这样做，因为每页的CSS都不一样，这样做的缺点还有，当由于网速慢、或服务器负担重CSS文件连接不上时，网页就变得很乱。直接把CSS嵌在网页中，是比较明智的做法。如果你的许多网页几乎完全一样，坚持想使用CSS文件，可使用这句<link href=***.css rel=stylesheet>来连接CSS文件。
实例1：<STYLE>td{font-size:9pt;line-height:150%}</STYLE>这句表示网页的字体大小为9磅字，行距150%，td是“单元格”元素，这句也就是对单元格内的字体起作用。这里的<style>后面的td，表示选择符，网页内所有的td元素都会起作用。这些选择符可以是所有的html标记，例如p、table、hr等等，只有少数的br除外。
实例2：<STYLE>a{color:FF0000}input{font-size:9pt}</STYLE>表示超链接都为红色，单行文本框的字体是9磅。
2.CSS作用很大的一方面就是可以用来大量减少网页代码，从而为网页减肥，原理就是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。目前大部分网站都是使用class来引用的。
CSS中，class和id的作用是完全一样的，“class”单词比“id”多3个字母。id的使用方法，在网页<STYLE>和</STYLE>之间定义选择符名，选择符名前加#，这些选择符名可以是字母或数字、或组合，然后在网页的元素中使用id=**来引用它。
实例3：<STYLE>#8{color:000080}#p2{margin-left:20}#14{font-size:14pt}</STYLE>，然后在网页使用这句引用它：<a id=8>黑蓝色</a>，<a id=14>14磅的字</a>。<p id=p2>段落……
也就是说，<a id=8>黑蓝色的字</a>等价于<a style=color:000080>黑蓝色的字</a>；<a id=14>14磅的字</a>等价于<a style=font-size:14pt>14磅的字</a>，以此类推。这里的介绍可能有点不太好理解，你可以多实践。
注意：在一定条件下，使用id来引用可能不起作用或报错、或与JavaScript的id发生冲突，这种情况下，你可以使用class来引用。class的使用方法与id一样，所不同的是：在网页的<STYLE>和</STYLE>之间定义选择符名，名前加.(即点)。例如<STYLE>.a1{color:FF0000}</STYLE>，然后用class=a1引用它。
3.样式表语法。样式表的项和它的值应该用冒号连接，例如color:FF00000。样式表也可直接嵌在段落当中，而不用class或id引用，例如<a style=font-size:12pt>12磅字</a>。也就是使用<* style=*:*>的语法。
4.小技巧。可根据需要灵活掌握，同一个选择符名可以多次给它定义，也可以多个选择符名定义同一句。例如<style>#a1{color:FF0000}#a1{font-size:9pt}</style>，它等效于#a1{color:FF0000;font-size:9pt}。多个选择符名定义同一句的方法是，各选择符名之间加逗号，例如<style>#a1,#b1{color:FF0000}#b1{font-size:9pt}</style>这句等效于#a1{color:FF0000}#b1{color:FF0000;font-size:9pt}。可能这里不太好理解，你只要自己稍微实践一下就可以灵活自己定义了。
5.样式表手册。作者苏沈小雨的样式表手册曾经在网上免费发行，现在可以从苏沈小雨的网站下载了，http://www.rainersu.com/download/css20.chm，又更新了，让人耳目一新，553K，里面介绍非常全面。其实，平时我们常用到的样式表语句是非常少的，下面列举最常用的样式表语句：
1)color (颜色，例如FF0000代表红色，000000代表黑色……)
2)font-size (字体大小)
3)font-family (字体类型)
4)width和height (宽度和高度)
5)line-height (段落行距，建议使用百分比的形式，例如150%)
6)margin-top表示段前；margin-bottom表示段后。margin-left表示整个段落向右缩进，margin-right表示段落右边距离右边的边框的距离。例如这句<p style=margin-top:30;margin-left:20;margin-right:20>。而且也可直接定义在图片中，例如<img src=**.jpg align=right style=margin-right:9>表示这张图片向右对齐，并且图片再向左移动9像素。
7)text-align (段落的对齐方式，例如left、center、right)
8)background-color (背景颜色)
9)position:absolute;top:30;left:50 表示绝对定位(DW中的层)
总之，最常用的就是以上这几种了，需要多多实践。
6.最常用的样式表代码实例。
实例4：去掉超链接下划线，<style>a{TEXT-DECORATION:none}</style>
实例5：超链接变色，<style>a{COLOR:000000}a:hover{COLOR:FF0000}</style>
实例6：超链接变色且去掉下划线，<style>a{TEXT-DECORATION:none;COLOR:000000}a:hover{COLOR:FF0000}</style>
实例7：超链接变色且鼠标停在超链接上有下划线，鼠标离开下划线消失，<style>a{color:000000;TEXT-DECORATION:none}a:hover{color:FF0000;TEXT-DECORATION:underline}</style>
实例8，请再翻回头实例1：<STYLE>td{font-size:9pt;line-height:150%}</STYLE>，这句可以让你网页的字体擂打不动，不随IE浏览器的“查看→文字大小”的设置而改变。
如果您需要从网页中复制代码到FP或DW中，复制请注意：一定要先从这里复制到记事本，然后再从记事本复制到FP或DW的html模式下，切记切记，否则无效。
在谈样式表前，我想先谈一下HTML标志与标志属性。
如果你学习了HMTL教程，对HTML标志应该有一个大体的了解，它是网页的信息表示标示符号，也是构成网页的基本元素，或说是基本成员吧。每个标志表示了某种信息的表示，如<P>标志表示一个段落，<h1>表示一个大标题，<table>表示一个表格....，标志只是表明要表示的信息是什么，而同样的信息可能要求显现给人的样子不一样，如同是标题，一个是<h2>你好</h2>,一个是<h2>网络管理中心欢迎你</h2>，我想使前一个呈现出蓝色，另一个是红色，效果如下:
你好
网络管理中心欢迎你
这就要用到标志的属性，标志属性其实也就是标志的特性，由于HTML中的绝大部分标志是用来显示相关信息的，所以标志属性也多集中于标志的字体、颜色、位置、大小及排版格式等外观特性上。如果你对Windows平台下编程熟悉的话，那么对“对象”这个概念一定不陌生，在HTML中，HTML对象也就是这些代表某种信息类型的标志，而对象的属性也就是标志属性。有人称HTML为语言，我想除了它是网上信息表示的特殊语言符号外，还因为有了标志对象及标志属性，可以通过脚本语言进行程序控制，所以又有程序语言的一面。当然，你不一定要对Window下编程很熟悉，只是你想深入脚本语言进行编程的话，那么就必须熟悉这些属性。
为什么称样式单为级联或者层叠的呢？在你还没有对它有一个较全面的了解前，可打一个不很准确的比喻：如我们评价一个人，需要听取大家的意见再汇总，有人说，这个人诚实，有的说干事踏实，有的说很有责任心.....，这样通过这些意见的“层叠”，就可大体地知道这个人的品质；即使是同样的标志，也可以通过层叠使它们显示出不同的特性来，随着学习的深入，你会发现层叠的具体含义及一些妙用的。
网海茫茫，怎样使自己的网页成为一道亮丽的风景线让人过目不忘？怎样使自己的网页的风格独特一致？怎样免除众多HTML标志属性设置的烦恼？一口气说这么多，只是想说，CSS---层叠样式单可以助你一臂之力！
CSS即Cascading Style Sheets(级联样式单)的缩写，我们又常称这为风格样式单、层叠样式表，顾名思义，是用来进行网页风格设计的。比如，我想让我的链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。它的作用可以达到：
（1）在几乎所有的浏览器上都可以使用。
（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
（4）你可以轻松地控制页面的布局。
（5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
想一想，没有使用CSS前我们是如何控制字体的颜色和大小以及所使用的字体的？我们一般使用HTML标签来实现，例如实现右侧一个简单的“HELLO”，它的代码是：
<b><font face="Arial" size="3" color="#FFFF66">HELLO</font></b>
很难想象，如果在一个页面里需要频繁地更替字体的颜色大小，最终生成的HTML代码的长度一定臃肿不堪。
说实话，CSS就是为了简化这样的工作诞生的，当然其功能决非这么简单。
样式是在Web中用来控制字体的类型、调整文本空白的对齐方式、调整页面背景的外观以及其他HTML的属性。各种样式的集合称为“样式块”。
,层叠式”样式块：是一种HTML的语法，用户可以用它精确地控制Web页中的文本格式，这些格式信息保存在Web的样式块中，而且可以应用到整个页或其他的页中。
,外部样式块”：是一种在扩展名为.css的文件中的层叠式样式块。这种文件夹是由有效的.css语法编写的样式规则组成的。通过在外部样式块中定义样式并将它们应用到自己的Web中，可以确保这些页的外观的一致性。如果改变了外部样式块中的样式，这种改变将影响到所有连接到该样式块的页。
,直插样式块”：是一种内含在页中的层叠式样式块。在内含样式块中的样式只能应用在包含该样式块的页中，不能覆盖连接到该页上的任何外部样式块中的样式。
,嵌入样式块”：是在页上元素（例如表格、图片或者ActiveX控件）中应用层叠式样式块的特性和设置值的方法，即使该页没有连接到外部样式块或者没有包含内含的样式块，也能使用这种方法。通过在不同的设置对话框中单击“样式”按钮，就会激活“样式”对话框，如图6-6所示，在这个对话框中可以进行内嵌式样式块的特性设置。
图6-6,样式”对话框
一、修改样式
我们可以利用如图6-6所示的“样式”对话框，对FrontPage中的HTML标记符进行样式修改。具体步骤如下：
1）打开或者新建网页。
2）选择菜单命令“格式—样式”选项，或者单击“样式”工具栏的 “样式”按钮，此时将弹出“样式”对话框。
3）在对话框中的“列表”选项中选择“所有HTML标记”，此时将在“样式”列表框中显示FrontPage中的所有HTML标记，在其中选择要进行编辑的对象，例如选择“body”选项，在右面的“段落预览”框中显示了当前的样式设置情况。
4）单击“修改”按钮，此时将弹出“修改样式”对话框。
5）在对话框中的“名称”中显示了选择的“HTML标记”名称。单击“格式”按钮，在其中可以选择修改“字体”、“段落”、“边框”、“编号方式”、“定位”等五种格式。
6）选择“字体”选项，此时将弹出“字体”对话框，如图6-7所示。选择其中的“字体”选项卡，并在其中设置“字体”选项为“黑体”；设置“字型”选项为“加粗倾斜”；设置“大小”选项为“18pt”；设置“效果”选项为“删除线”；在“预览”区域可以看到设置的效果。选择“字符间距”选项卡，在其中设置段落间距为“扩充”；设置“间距”大小选项为“4pt”。单击“确定”按钮，回到“修改样式”对话框，在其中可以预览设置的新效果，并可以在“说明”选项中查看所修改的具体项目。
图6-7,字体”对话框
7）在“修改样式”对话框中的“格式”中，选择“段落”选项，将弹出如图6-8所示的“段落”对话框，在其中可以设置新的段落格式。
图6-8,段落”对话框
8）在“修改样式”对话框中的“格式”中，选择“边框”选项，此时将弹出图6-9所示的“边框与阴影”对话框，利用这个功能可以指定层叠式样式的边框特性。
图6-9,边框”对话框
在FrontPage 2000的编辑器中可以打开当前页选中的一些元素，例如段落、表格或者ActiveX控件等，将这些特性作为它们内嵌的样式。应当注意的是：并不是所有的游览器都支持层叠式样式单，如果指定的特性在该Web浏览器中不支持，那么这个页有可能不显示出来。
在“边框”选项卡中，如果正在编辑的页是连接到外部的样式单，或者该页内部包含内含的样式单，那么指定的内嵌的样式特性将超过任意指定的外部或者内含的样式单的特性。
在这个选项卡中，可以为列出的每一个边框指定边框格式、颜色和宽度。在“样式”下拉列表框中，可以通过预览框中的选框按钮为任意一个“边框”（左、右、上和下）指定样式。如果浏览器支持层叠式样式单，那么可以通过选择给定的边框样式来实现预览的功能。在“样式”列表框中，有如下的选项。
实线：设定实线边框。
虚线：设定虚线边框。
破折号：设定破折号边框。
双线：设定双线边框。
凹线：设定凹痕边框。
凸线：设定凸纹边框。
嵌入：设定镶嵌边框。
开端：设定开始边框。
在“颜色”下拉框中，通过颜色列表为每一个边框指定颜色。这里默认的颜色是黑色。如果要定制颜色，可以在颜色弹出菜单的底部选择“更改颜色”选项，然后在颜色列表中选择需要定制的颜色。
在“宽度”区域为每一个边框指定宽度。如果没有选定边框图样式，这个功能就没有意义。可以通过设定关键字的宽度值，来指定边框的宽度。但是不能指定一个负的宽度值。有关的关键字是：
Thin：薄的边框线。
Medium：中等的边框线。
Tick：厚的边框线。
如果要指定一个相对的宽度，则直接输入带有度量单位的数值。在这里，有效的相对长度单位是：
Em：指定元素字体的高度。
Ex：指定字母的高度。
Px：指定像素，这个单位与显示屏的设置有关。
9）选择“阴影”选项卡，如图6-10所示。在“背景颜色”选项中可以设置网页的背景色；在“前景颜色”选项中可以设置网页的前景色；在“背景图片”选项中可以通过“浏览”按钮选择网页的背景图案，并可以设置背景图片的设置方式。
图6-10,阴影”选项卡
利用“附件”下拉框可以指定是否将选中的背景图片附在选中的元素上。有效的选项有两种：
滚动条：将背景图片附在选中的元素上。当Web页在浏览器中水平或者垂直滚动时，该图片和元素将一同移动。
固定：将背景图片附在选中的元素上。当Web也在浏览器中滚动时，该图片不和元素一起移动。
利用“重复”下拉式框也可以指定当图片小于选中的元素时，是否将图片水平或者垂直平铺在选中的元素上。有如下的选项：
重复：将图片沿水平和垂直方向平铺在选中的元素上。
重复-X：将图片水平方向平铺在选中的元素上。
重复-Y：将图片垂直方向平铺在选中的元素上。
不重复：不采用图片水平或者垂直平铺在选中的元素上。
当指定了“附件”选项为“滚动条”时，在“垂直位置”下拉式框中可以指定背景图片相对于选中元素的初始垂直位置。如果“附件”选项设为“固定”，可以指明背景图片相对于元素的垂直位置。具体内容如下：
靠上：将背景图片的顶端与选中图片或者页的顶端放在一起。
中：将背景图片安置在选中元素或者页的垂直中心。
下：将背景图片的底端与选中图片或者页的底端放在一起。
如果“附件”选项为“滚动条”时，利用“水平位置”下拉框可以指定背景图片相对于选中元素的位置为水平位置。如果“附件”选项设置为“固定”，可以指明背景图片相对于元素的水平位置。具体选项如下：
左：将背景图片的左边缘与选中图片或者页的左边缘放在一起。
中：将背景图片安置在选中的元素或者页的水平中心。
右：将背景图片的右边缘与选中图片或者页的右边缘放在一起。
10）单击“确定”按钮回到“修改样式”对话框，在“格式”弹出菜单中，选择“编号方式”选项，此时将弹出“项目符号和编号方式”对话框，在其中可以选择并设置各种类型的“项目符号和编号”方式，如图6-11所示。
图6-11,项目符号和编号”对话框
11）单击“确定”按钮回到“修改样式”对话框，在“格式”弹出式菜单中，选择“定位”选项，此时将弹出“定位”对话框。在其中可以选择插入图片与文本的环绕和定位方式，并可以设置图片的绝对位置与大小，如图6-12所示。
图6-12,定位”对话框
12）单击“确定”按钮回到普通编辑窗口，在网页中添加相关的元素，可以观察使用默认“body”标记格式和使用修改的格式的区别，如图6-13所示。
图6-13 修改body样式效果图
二、使用样式块链接
在网页或网站设计时，常常需要改变整个网页或站点的字体、颜色等属性，此时，就可以使用级联式样式块（Cascading Style Sheet，缩写为CSS）。这样使用单个CSS文档就可以将整个站点的文本格式统一起来。级联式样式块是一个标准，指出HTML页面应用样式元素的方法，其中的样式包括网页上的任意元素，例如字体、背景色、文本、链接元素、页边控制以及元素在网页上的放置位置。将样式块应用到HTML文档中有三种方式：直插式、嵌入式、链接（外部）式。其中链接式将信息保存到文档中，并将其保存为扩展名为.css，并可以将这种格式链接到新的网页或网站上。
样式块的语法格式为：selector {Property:Value:}
其中selector 是一个选择符，代表了一个元素；Property是一个特性，代表了选择元素的属性；Value是一个值，代表了元素属性的数值。其中特性和值构成了一个声明；一个选项和一个声明构成了一条规则。
为了使用链接样式块，在FrontPage2000的编辑窗口中选择菜单命令“格式—样式表链接”选项，此时将弹出如图6-14所示对话框，其中各项的含义如下：
在“样式表链接”对话框中，当选择“所选的网页”单选项时，将仅使选择的样式块链接到所选取中的网页上。
图6-14,链接样式表”对话框
当在“样式表链接”对话框中选择“添加”按钮时，将弹出如图6-15所示的“选择文件”对话框，在其中可以选择样式块.css文件。
图6-15,选择文件”对话框
通过“链接样式表”对话框中的“删除”按钮，可将链接文件从网页中删除。
当选择多个样式块时，可以通过上移按钮或下移按钮调整文件的顺序。
小 结
本章介绍了样式和主题，在样式中可以精确调整网页的位置、字体、颜色等特性；并介绍了如何将外部样式块链接到网页中，当然，这些页面格式在不同的Web浏览器中显示出来的效果是不太一样的。同时介绍了如何在网页或站点中应用主题，并修改主题特性。
习 题
1．设置网页的样式，包括字体、段落、边框、编号方式、定位等格式，利用自定义的样式编辑网页。
2．编辑级联样式块（CSS）将其文件保存，并使用链接（外部）方式将该文档应用到网页。
3．创建新的主题，修改该主题的颜色、图形和文本，并将其应用到整个网站中。
4．在背景主题窗口中，“所有网页”与“所选网页”的使用有什么区别。
5．对所选的背景主题可以进行哪些设置？
6．如何对选定的主题进行修改？
1、边框与阴影
在FrontPage 2000中，可以用很美的边框和阴影，把段落文字包围起来。
将光标移到段落中，然后执行格式／边框与阴影命令，就会弹出对话框：
在边框标签下，可以为段落设置边框的样式，可以不使用边框，也可以为段落加上相同的边框样式，或者为每条边设置不同的式样。
点击阴影标签，在阴影标签下可以为段落设定背景色和前景色，也可以为段落设置背景图片。
2、级联样式表
样式表CSS在网页中占着极重要的地位，它的使用一直是热门讨论的话题。CSS是Cascading Style Sheet的简写，译为“层叠样式表单”。CSS几乎可以定义所有的网页元素，CSS虽然功能强大，但平时我们用到的是很少的，最常见的有：定义字体大小(用CSS定义的字体大小不会浏览器的字体设置而改变)、去掉超链下划线、超链接变色等等。下面详细、简练地讲如何使用CSS。
1.CSS加在什么位置？编辑CSS时候，强烈建议使用记事本之类的文本编辑工具打开你的网页代码。找到<head>和</head>，在<head>和</head>之间加入这句，<STYLE></STYLE>，然后所有的样式表都定义在<STYLE>和</STYLE>之间。
有很多网站喜欢把样式表写成一个CSS文件，然后所有文件都指向这里来调用它。我个人不喜欢这样做，因为每页的CSS都不一样，这样做的缺点还有，当由于网速慢、或服务器负担重CSS文件连接不上时，网页就变得很乱。直接把CSS嵌在网页中，是比较明智的做法。如果你的许多网页几乎完全一样，坚持想使用CSS文件，可使用这句<link href=***.css rel=stylesheet>来连接CSS文件。
实例1：<STYLE>td{font-size:9pt;line-height:150%}</STYLE>这句表示网页的字体大小为9磅字，行距150%，td是“单元格”元素，这句也就是对单元格内的字体起作用。这里的<style>后面的td，表示选择符，网页内所有的td元素都会起作用。这些选择符可以是所有的html标记，例如p、table、hr等等，只有少数的br除外。
实例2：<STYLE>a{color:FF0000}input{font-size:9pt}</STYLE>表示超链接都为红色，单行文本框的字体是9磅。
2.CSS作用很大的一方面就是可以用来大量减少网页代码，从而为网页减肥，原理就是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。目前大部分网站都是使用class来引用的。
CSS中，class和id的作用是完全一样的，“class”单词比“id”多3个字母。id的使用方法，在网页<STYLE>和</STYLE>之间定义选择符名，选择符名前加#，这些选择符名可以是字母或数字、或组合，然后在网页的元素中使用id=**来引用它。
实例3：<STYLE>#8{color:000080}#p2{margin-left:20}#14{font-size:14pt}</STYLE>，然后在网页使用这句引用它：<a id=8>黑蓝色</a>，<a id=14>14磅的字</a>。<p id=p2>段落……
也就是说，<a id=8>黑蓝色的字</a>等价于<a style=color:000080>黑蓝色的字</a>；<a id=14>14磅的字</a>等价于<a style=font-size:14pt>14磅的字</a>，以此类推。这里的介绍可能有点不太好理解，你可以多实践。
注意：在一定条件下，使用id来引用可能不起作用或报错、或与JavaScript的id发生冲突，这种情况下，你可以使用class来引用。class的使用方法与id一样，所不同的是：在网页的<STYLE>和</STYLE>之间定义选择符名，名前加.(即点)。例如<STYLE>.a1{color:FF0000}</STYLE>，然后用class=a1引用它。
3.样式表语法。样式表的项和它的值应该用冒号连接，例如color:FF00000。样式表也可直接嵌在段落当中，而不用class或id引用，例如<a style=font-size:12pt>12磅字</a>。也就是使用<* style=*:*>的语法。
4.小技巧。可根据需要灵活掌握，同一个选择符名可以多次给它定义，也可以多个选择符名定义同一句。例如<style>#a1{color:FF0000}#a1{font-size:9pt}</style>，它等效于#a1{color:FF0000;font-size:9pt}。多个选择符名定义同一句的方法是，各选择符名之间加逗号，例如<style>#a1,#b1{color:FF0000}#b1{font-size:9pt}</style>这句等效于#a1{color:FF0000}#b1{color:FF0000;font-size:9pt}。可能这里不太好理解，你只要自己稍微实践一下就可以灵活自己定义了。
5.样式表手册。作者苏沈小雨的样式表手册曾经在网上免费发行，现在可以从苏沈小雨的网站下载了，http://www.rainersu.com/download/css20.chm，又更新了，让人耳目一新，553K，里面介绍非常全面。其实，平时我们常用到的样式表语句是非常少的，下面列举最常用的样式表语句：
1)color (颜色，例如FF0000代表红色，000000代表黑色……)
2)font-size (字体大小)
3)font-family (字体类型)
4)width和height (宽度和高度)
5)line-height (段落行距，建议使用百分比的形式，例如150%)
6)margin-top表示段前；margin-bottom表示段后。margin-left表示整个段落向右缩进，margin-right表示段落右边距离右边的边框的距离。例如这句<p style=margin-top:30;margin-left:20;margin-right:20>。而且也可直接定义在图片中，例如<img src=**.jpg align=right style=margin-right:9>表示这张图片向右对齐，并且图片再向左移动9像素。
7)text-align (段落的对齐方式，例如left、center、right)
8)background-color (背景颜色)
9)position:absolute;top:30;left:50 表示绝对定位(DW中的层)
总之，最常用的就是以上这几种了，需要多多实践。
6.最常用的样式表代码实例。
实例4：去掉超链接下划线，<style>a{TEXT-DECORATION:none}</style>
实例5：超链接变色，<style>a{COLOR:000000}a:hover{COLOR:FF0000}</style>
实例6：超链接变色且去掉下划线，<style>a{TEXT-DECORATION:none;COLOR:000000}a:hover{COLOR:FF0000}</style>
实例7：超链接变色且鼠标停在超链接上有下划线，鼠标离开下划线消失，<style>a{color:000000;TEXT-DECORATION:none}a:hover{color:FF0000;TEXT-DECORATION:underline}</style>
实例8，请再翻回头实例1：<STYLE>td{font-size:9pt;line-height:150%}</STYLE>，这句可以让你网页的字体擂打不动，不随IE浏览器的“查看→文字大小”的设置而改变。
如果您需要从网页中复制代码到FP或DW中，复制请注意：一定要先从这里复制到记事本，然后再从记事本复制到FP或DW的html模式下，切记切记，否则无效。
在谈样式表前，我想先谈一下HTML标志与标志属性。
如果你学习了HMTL教程，对HTML标志应该有一个大体的了解，它是网页的信息表示标示符号，也是构成网页的基本元素，或说是基本成员吧。每个标志表示了某种信息的表示，如<P>标志表示一个段落，<h1>表示一个大标题，<table>表示一个表格....，标志只是表明要表示的信息是什么，而同样的信息可能要求显现给人的样子不一样，如同是标题，一个是<h2>你好</h2>,一个是<h2>网络管理中心欢迎你</h2>，我想使前一个呈现出蓝色，另一个是红色，效果如下:
你好
网络管理中心欢迎你
这就要用到标志的属性，标志属性其实也就是标志的特性，由于HTML中的绝大部分标志是用来显示相关信息的，所以标志属性也多集中于标志的字体、颜色、位置、大小及排版格式等外观特性上。如果你对Windows平台下编程熟悉的话，那么对“对象”这个概念一定不陌生，在HTML中，HTML对象也就是这些代表某种信息类型的标志，而对象的属性也就是标志属性。有人称HTML为语言，我想除了它是网上信息表示的特殊语言符号外，还因为有了标志对象及标志属性，可以通过脚本语言进行程序控制，所以又有程序语言的一面。当然，你不一定要对Window下编程很熟悉，只是你想深入脚本语言进行编程的话，那么就必须熟悉这些属性。
为什么称样式单为级联或者层叠的呢？在你还没有对它有一个较全面的了解前，可打一个不很准确的比喻：如我们评价一个人，需要听取大家的意见再汇总，有人说，这个人诚实，有的说干事踏实，有的说很有责任心.....，这样通过这些意见的“层叠”，就可大体地知道这个人的品质；即使是同样的标志，也可以通过层叠使它们显示出不同的特性来，随着学习的深入，你会发现层叠的具体含义及一些妙用的。
网海茫茫，怎样使自己的网页成为一道亮丽的风景线让人过目不忘？怎样使自己的网页的风格独特一致？怎样免除众多HTML标志属性设置的烦恼？一口气说这么多，只是想说，CSS---层叠样式单可以助你一臂之力！
CSS即Cascading Style Sheets(级联样式单)的缩写，我们又常称这为风格样式单、层叠样式表，顾名思义，是用来进行网页风格设计的。比如，我想让我的链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。它的作用可以达到：
（1）在几乎所有的浏览器上都可以使用。
（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
（4）你可以轻松地控制页面的布局。
（5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
想一想，没有使用CSS前我们是如何控制字体的颜色和大小以及所使用的字体的？我们一般使用HTML标签来实现，例如实现右侧一个简单的“HELLO”，它的代码是：
<b><font face="Arial" size="3" color="#FFFF66">HELLO</font></b>
很难想象，如果在一个页面里需要频繁地更替字体的颜色大小，最终生成的HTML代码的长度一定臃肿不堪。
说实话，CSS就是为了简化这样的工作诞生的，当然其功能决非这么简单。
样式是在Web中用来控制字体的类型、调整文本空白的对齐方式、调整页面背景的外观以及其他HTML的属性。各种样式的集合称为“样式块”。
,层叠式”样式块：是一种HTML的语法，用户可以用它精确地控制Web页中的文本格式，这些格式信息保存在Web的样式块中，而且可以应用到整个页或其他的页中。
,外部样式块”：是一种在扩展名为.css的文件中的层叠式样式块。这种文件夹是由有效的.css语法编写的样式规则组成的。通过在外部样式块中定义样式并将它们应用到自己的Web中，可以确保这些页的外观的一致性。如果改变了外部样式块中的样式，这种改变将影响到所有连接到该样式块的页。
,直插样式块”：是一种内含在页中的层叠式样式块。在内含样式块中的样式只能应用在包含该样式块的页中，不能覆盖连接到该页上的任何外部样式块中的样式。
,嵌入样式块”：是在页上元素（例如表格、图片或者ActiveX控件）中应用层叠式样式块的特性和设置值的方法，即使该页没有连接到外部样式块或者没有包含内含的样式块，也能使用这种方法。通过在不同的设置对话框中单击“样式”按钮，就会激活“样式”对话框，如图6-6所示，在这个对话框中可以进行内嵌式样式块的特性设置。
图6-6,样式”对话框
一、修改样式
我们可以利用如图6-6所示的“样式”对话框，对FrontPage中的HTML标记符进行样式修改。具体步骤如下：
1）打开或者新建网页。
2）选择菜单命令“格式—样式”选项，或者单击“样式”工具栏的 “样式”按钮，此时将弹出“样式”对话框。
3）在对话框中的“列表”选项中选择“所有HTML标记”，此时将在“样式”列表框中显示FrontPage中的所有HTML标记，在其中选择要进行编辑的对象，例如选择“body”选项，在右面的“段落预览”框中显示了当前的样式设置情况。
4）单击“修改”按钮，此时将弹出“修改样式”对话框。
5）在对话框中的“名称”中显示了选择的“HTML标记”名称。单击“格式”按钮，在其中可以选择修改“字体”、“段落”、“边框”、“编号方式”、“定位”等五种格式。
6）选择“字体”选项，此时将弹出“字体”对话框，如图6-7所示。选择其中的“字体”选项卡，并在其中设置“字体”选项为“黑体”；设置“字型”选项为“加粗倾斜”；设置“大小”选项为“18pt”；设置“效果”选项为“删除线”；在“预览”区域可以看到设置的效果。选择“字符间距”选项卡，在其中设置段落间距为“扩充”；设置“间距”大小选项为“4pt”。单击“确定”按钮，回到“修改样式”对话框，在其中可以预览设置的新效果，并可以在“说明”选项中查看所修改的具体项目。
图6-7,字体”对话框
7）在“修改样式”对话框中的“格式”中，选择“段落”选项，将弹出如图6-8所示的“段落”对话框，在其中可以设置新的段落格式。
图6-8,段落”对话框
8）在“修改样式”对话框中的“格式”中，选择“边框”选项，此时将弹出图6-9所示的“边框与阴影”对话框，利用这个功能可以指定层叠式样式的边框特性。
图6-9,边框”对话框
在FrontPage 2000的编辑器中可以打开当前页选中的一些元素，例如段落、表格或者ActiveX控件等，将这些特性作为它们内嵌的样式。应当注意的是：并不是所有的游览器都支持层叠式样式单，如果指定的特性在该Web浏览器中不支持，那么这个页有可能不显示出来。
在“边框”选项卡中，如果正在编辑的页是连接到外部的样式单，或者该页内部包含内含的样式单，那么指定的内嵌的样式特性将超过任意指定的外部或者内含的样式单的特性。
在这个选项卡中，可以为列出的每一个边框指定边框格式、颜色和宽度。在“样式”下拉列表框中，可以通过预览框中的选框按钮为任意一个“边框”（左、右、上和下）指定样式。如果浏览器支持层叠式样式单，那么可以通过选择给定的边框样式来实现预览的功能。在“样式”列表框中，有如下的选项。
实线：设定实线边框。
虚线：设定虚线边框。
破折号：设定破折号边框。
双线：设定双线边框。
凹线：设定凹痕边框。
凸线：设定凸纹边框。
嵌入：设定镶嵌边框。
开端：设定开始边框。
在“颜色”下拉框中，通过颜色列表为每一个边框指定颜色。这里默认的颜色是黑色。如果要定制颜色，可以在颜色弹出菜单的底部选择“更改颜色”选项，然后在颜色列表中选择需要定制的颜色。
在“宽度”区域为每一个边框指定宽度。如果没有选定边框图样式，这个功能就没有意义。可以通过设定关键字的宽度值，来指定边框的宽度。但是不能指定一个负的宽度值。有关的关键字是：
Thin：薄的边框线。
Medium：中等的边框线。
Tick：厚的边框线。
如果要指定一个相对的宽度，则直接输入带有度量单位的数值。在这里，有效的相对长度单位是：
Em：指定元素字体的高度。
Ex：指定字母的高度。
Px：指定像素，这个单位与显示屏的设置有关。
9）选择“阴影”选项卡，如图6-10所示。在“背景颜色”选项中可以设置网页的背景色；在“前景颜色”选项中可以设置网页的前景色；在“背景图片”选项中可以通过“浏览”按钮选择网页的背景图案，并可以设置背景图片的设置方式。
图6-10,阴影”选项卡
利用“附件”下拉框可以指定是否将选中的背景图片附在选中的元素上。有效的选项有两种：
滚动条：将背景图片附在选中的元素上。当Web页在浏览器中水平或者垂直滚动时，该图片和元素将一同移动。
固定：将背景图片附在选中的元素上。当Web也在浏览器中滚动时，该图片不和元素一起移动。
利用“重复”下拉式框也可以指定当图片小于选中的元素时，是否将图片水平或者垂直平铺在选中的元素上。有如下的选项：
重复：将图片沿水平和垂直方向平铺在选中的元素上。
重复-X：将图片水平方向平铺在选中的元素上。
重复-Y：将图片垂直方向平铺在选中的元素上。
不重复：不采用图片水平或者垂直平铺在选中的元素上。
当指定了“附件”选项为“滚动条”时，在“垂直位置”下拉式框中可以指定背景图片相对于选中元素的初始垂直位置。如果“附件”选项设为“固定”，可以指明背景图片相对于元素的垂直位置。具体内容如下：
靠上：将背景图片的顶端与选中图片或者页的顶端放在一起。
中：将背景图片安置在选中元素或者页的垂直中心。
下：将背景图片的底端与选中图片或者页的底端放在一起。
如果“附件”选项为“滚动条”时，利用“水平位置”下拉框可以指定背景图片相对于选中元素的位置为水平位置。如果“附件”选项设置为“固定”，可以指明背景图片相对于元素的水平位置。具体选项如下：
左：将背景图片的左边缘与选中图片或者页的左边缘放在一起。
中：将背景图片安置在选中的元素或者页的水平中心。
右：将背景图片的右边缘与选中图片或者页的右边缘放在一起。
10）单击“确定”按钮回到“修改样式”对话框，在“格式”弹出菜单中，选择“编号方式”选项，此时将弹出“项目符号和编号方式”对话框，在其中可以选择并设置各种类型的“项目符号和编号”方式，如图6-11所示。
图6-11,项目符号和编号”对话框
11）单击“确定”按钮回到“修改样式”对话框，在“格式”弹出式菜单中，选择“定位”选项，此时将弹出“定位”对话框。在其中可以选择插入图片与文本的环绕和定位方式，并可以设置图片的绝对位置与大小，如图6-12所示。
图6-12,定位”对话框
12）单击“确定”按钮回到普通编辑窗口，在网页中添加相关的元素，可以观察使用默认“body”标记格式和使用修改的格式的区别，如图6-13所示。
图6-13 修改body样式效果图
二、使用样式块链接
在网页或网站设计时，常常需要改变整个网页或站点的字体、颜色等属性，此时，就可以使用级联式样式块（Cascading Style Sheet，缩写为CSS）。这样使用单个CSS文档就可以将整个站点的文本格式统一起来。级联式样式块是一个标准，指出HTML页面应用样式元素的方法，其中的样式包括网页上的任意元素，例如字体、背景色、文本、链接元素、页边控制以及元素在网页上的放置位置。将样式块应用到HTML文档中有三种方式：直插式、嵌入式、链接（外部）式。其中链接式将信息保存到文档中，并将其保存为扩展名为.css，并可以将这种格式链接到新的网页或网站上。
样式块的语法格式为：selector {Property:Value:}
其中selector 是一个选择符，代表了一个元素；Property是一个特性，代表了选择元素的属性；Value是一个值，代表了元素属性的数值。其中特性和值构成了一个声明；一个选项和一个声明构成了一条规则。
为了使用链接样式块，在FrontPage2000的编辑窗口中选择菜单命令“格式—样式表链接”选项，此时将弹出如图6-14所示对话框，其中各项的含义如下：
在“样式表链接”对话框中，当选择“所选的网页”单选项时，将仅使选择的样式块链接到所选取中的网页上。
图6-14,链接样式表”对话框
当在“样式表链接”对话框中选择“添加”按钮时，将弹出如图6-15所示的“选择文件”对话框，在其中可以选择样式块.css文件。
图6-15,选择文件”对话框
通过“链接样式表”对话框中的“删除”按钮，可将链接文件从网页中删除。
当选择多个样式块时，可以通过上移按钮或下移按钮调整文件的顺序。
小 结
本章介绍了样式和主题，在样式中可以精确调整网页的位置、字体、颜色等特性；并介绍了如何将外部样式块链接到网页中，当然，这些页面格式在不同的Web浏览器中显示出来的效果是不太一样的。同时介绍了如何在网页或站点中应用主题，并修改主题特性。
习 题
1．设置网页的样式，包括字体、段落、边框、编号方式、定位等格式，利用自定义的样式编辑网页。
2．编辑级联样式块（CSS）将其文件保存，并使用链接（外部）方式将该文档应用到网页。
3．创建新的主题，修改该主题的颜色、图形和文本，并将其应用到整个网站中。
4．在背景主题窗口中，“所有网页”与“所选网页”的使用有什么区别。
5．对所选的背景主题可以进行哪些设置？
6．如何对选定的主题进行修改？
