编写和使用的CSS样式表

    如今我们仍然喜欢使用表格来布局网页。我们知道，表格的高度和宽度是会变化的，比如，表格里放置一张大图片，或者，在表格里插入一根宽度大于表格宽度的分隔线，表格就会被撑宽或撑高，效果不是预期的。再有，浏览器的字体是可以临时设定的，方法很简单：单击浏览器的菜单“查看→文字大小”→选择一种字号，比如“最大”。这时，你的网页的文字大小就变了，像导航条之类的表格就可能严重变形，甚至出现一行变成两行的现象。

    为了克服上述问题，除了在设置网页时注意表格里面的占位元素不宽于外表格外，我们还应该有其他措施，以避免访问者的浏览器临时设置而造成网页布局混乱现象。

    默认情况下，用了CSS样式表来规范网页文字大小后，浏览器的“查看→文字→大小”的选择将不能影响文字大小。CSS样式表还有更强大和灵活的功能，用好它将能使我们的网站规范而富有个性。

    如此强大的样式表，学起来肯定不容易。实用至上，我们无需全面学习它，只用我们用得着的部分。

    让我们用FP（这里以FP2000为例，实际上用FP2003更好设置一些）来制作CSS样式表。启动FP2000，新建一个空白文件，在“普通”编辑模式状态下点击菜单“格式→样式”，将弹出“样式”设置窗口。在这里，我们将设置几个内容。

    1.先设置body样式：

    在左边栏选择body标志，双击它，将弹出“修改样式”窗口，在该窗口点击“格式→字体”，在弹出的字体设置窗口设置文字的字体、字号和颜色，字号单位建议使用pt，如10pt就比较理想，设置好单击确定按钮。如果觉得有必要，再从“格式→段落”设置一下段落对齐、首行缩进等属性。

    2.设置table、td样式：

    再次进入“格式→样式”窗口，得先选择一下左下方“列表”的标志为“所有的 HTML 标志”才能找到table，如上设置好字体和所需要的项目，设置好tabel再设置td；

    如果table，td的样式是一样的，可在代码中将它们合并，格式如下：

    table,td { font-size: 10pt; font-family: 宋体 }

    3.设置链接样式：

    超级链接样式有四项内容需要设置：a:link，a:hover，a:visited，a:active。其含意分别如下：

a:link	  未作任何操作时的样式和前景色
a:hover	  鼠标指针移到时的样式和前景色
a:active  鼠标指针按下时的样式和前景色
a:visited 访问过的样式和前景色

    很遗憾，在FP2000，所有的HTML标志里只有a一项，且不能进行更全面的操作。不用理睬它，先设置好a可设置的内容再说。设置完后，切换到HTML代码，我们将看到在<title> ... </title>的下面有<style> ... </style>段落，它就是我们前面设置的CSS样式表。我们根据a {...}一节的内容，来添加上述四个超级链接的样式，可以在大括号里修改、添加其他的内容，以下是我做的一个链接样式：

a:link     { font-family: 宋体; font-size: 10pt; color: #008800;
	     text-decoration: none; }
a:hover    { font-family: 宋体; font-size: 10pt; color: #008800;
	     text-decoration: underline;}
a:visited  { font-family: 宋体; font-size: 10pt; color: #998800;
	     text-decoration: none }
a:active   { font-family: 宋体; font-size: 10pt; color: #008800;
	     text-decoration: none }

    编辑好以上内容后，a { ... } 一行就不用保留了。

    上面的链接样式中，内容很简单，有字体、字号、颜色和文本样式（是否需要下划线，text-decoration: underline表示有，text-decoration: none表示不要）。

    4.设置其他的内容，比如，如果你经常用到h1、h2等HTML标志，可以设置它，或者今后需要了再补充也行。

    5.设置自定义标志。或许你还需要其他的样式以备将来之用。可以通过FP来做，然后再切换到代码完善它。具体操作：在“样式”设置窗口选择“用户定义的样式”，单击“新建”按钮，在“名称（编辑器）”里输入英文名字，比如red，单击确定按钮，然后设置一下字体字号什么的，确定。切换到HTML代码，你会发现style里多了一个red标志，它的样式如下：

.red    { color: #FF0000; font-family: 宋体; font-size: 14pt;
          font-weight: bold }

    注意它前面有一个小角句号（“.”），这是表示用户自定义的CSS样式项目，以后如果用代码直接设置CSS，凡属于自定义的而不是系统保留有的，都在名称的前面加一个小点。上面的.red样式中，还有一个地方值得注意，font-weight:bold，表示粗体，将来用来做标题用挺不错，醒目。但是，要使用自定义的样式表，需要在代码中加以说明，我们举个例。在“普通”编辑模式下，输入一行文件，完后回车，切换到HTML代码模式，找到这行文字，在<p>里的p的后面加入 class=red（<p class = red>），预览或切换到“普通”样式，马上可见到效果。

    自定义样式表应该建立几个项目（包括链接样式），方便不同背景的页面或和特殊需要的地方调用。

    CSS可以做成独立的文件，供以后各网页使用。现在来介绍一下操作方法。

    在FP2000里切换到HTML模式，把从<style>到</style>的内容剪切出来，粘贴到记事本里，把 <style> 和 </style> 两行删除掉，如果有 <!-- 和 --> 标志也删除掉。在记事本里保存为“所有文件”，文件名为web.css（也可以是其他名字，但必须为小字字母和阿拉伯数字，后缀名只能是.css），注意保存在你的站点文件夹里（我们在第一节建立的目录myweb），可以在那里用一个单独的文件夹保存，也可以跟首页文件同一目录。接着我们来调用该CSS文件：在FP2000的“普通”编辑模式下，单击菜单“格式→样式表链接”，在弹出的“链接样式表”窗口单击“添加”按钮，在弹出的“选择超链接”窗口点击右下角最右边的“浏览”图标，找到刚才保存的CSS文件，确定，样式表立即生效。此时，切换到HTML代码模式，在<title>...</title>的下一行，有如下调用CSS文件的代码：

    <link rel="stylesheet" type="text/css" href="/xueqian/web.css">

    这就是调用CSS文件的代码，今后可以直接在代码中这样使用，注意修改href=后面的文件路径即可；路径也可以是绝对路径：假设你已经上传一个CSS文件到你的空间，用完整的路径引用它。

    在网页中使用CSS样式表还有一种方式，嵌套到HTML代码中，这种方式灵活但不便于批量维护。此用法大家可以自行研究或参考其他资料。

    高效地使用CSS的方式是把CSS做成文件，因为，今后如果需要修改网站的文字、链接等样式，只需修改一个或少数几个文件，不必每张网页都去修改。