如今我们仍然喜欢使用表格来布局网页。我们知道,表格的高度和宽度是会变化的,比如,表格里放置一张大图片,或者,在表格里插入一根宽度大于表格宽度的分隔线,表格就会被撑宽或撑高,效果不是预期的。再有,浏览器的字体是可以临时设定的,方法很简单:单击浏览器的菜单“查看→文字大小”→选择一种字号,比如“最大”。这时,你的网页的文字大小就变了,像导航条之类的表格就可能严重变形,甚至出现一行变成两行的现象。
为了克服上述问题,除了在设置网页时注意表格里面的占位元素不宽于外表格外,我们还应该有其他措施,以避免访问者的浏览器临时设置而造成网页布局混乱现象。
默认情况下,用了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做成文件,因为,今后如果需要修改网站的文字、链接等样式,只需修改一个或少数几个文件,不必每张网页都去修改。