CSS应用一例

Author: 唐剑光 Date: 2001年 8期

CSS（Cascading Style Sheet层叠样式表）对于广大网页制作者来说，并不陌生。通过使用CSS，可对页面布局、字体、颜色、背景和其它文图效果实现更加精确的控制；可只通过修改一个文件就改变页数不定的网页的外观和格式；同时通过更少的编码编辑出来的网页可获得更快的下载速度。一般样式表的使用，大家都比较清楚了，笔者在此抛砖引玉，介绍一种样式表的用法，希望通过这个例子的介绍，网友们能够触类旁通，举一反三，将样式表用得更加得心应手。
　　    先来看看普通样式表：
　　    <style type="text/css">
　　    
　　    </style>
　　    再看这样一个例子：
　　    <style type="text/css">
　　    
　　    </style>
　　    看到了吗，它与一般样式表的最大区别是：文字控制和链接控制有.z1、.z3两项，这表示什么意思呢？
　　    对于普通样式表来说，如果某个HTML文档采用的话，那么这个文档的所有内容都将遵守这个样式（当然特别指出的除外）；而对于第二个样式表来说，就可以同时有两个样式供选择，即z1和z3（分别代表两种不同的样式）。
　　    这种样式表的好处是：你可以在同一个网页中，使用两种样式；也可以在整个网站设计中，根据需要，不同的网页选择不同的样式，而不需要为采用另外一种样式的网页再单独设置样式表。这样就达到了“只修改一个文件就可以改变页数不定的网页的外观和格式”的目的。进一步地，你还可以在第二个样式表中添加第三个、第四个样式，这样又扩大了它的使用范围。
　　    下面来谈谈这个样式表的使用方法：
　　    由于是两种不同的样式，所以在引用时，必须指明此处使用哪种样式：
　　    （1）如果使用的地方是表格，那么你可以在<table>或<td>标签中加入class=z1（或z3），比如<tabel class=z1 width=100%>。在<table>标签中加入，表示整个表格都使用此样式；在<td>标签中加入，只表示该行执行此样式；
　　    （2）如果在非表格的地方使用，其代码是<span class=z1>内容</span>。
　　    注意上述代码中，对文字和链接都分别作了单独的样式，如果你只修改文字或链接的样式，可以将上述代码的相关部分删除即可。
　　    最后再来说说样式表的加入方式，对于普通网友来说，用得最多的是置入式样式表和链接式样式表，下面分别对这两种加入方式予以说明：
　　    1.植入式样式表：即直接将上述代码加入到<head> </head>标签中间。
　　    使用植入式样式表，对于个别网页，还比较合适；假设整个网站的网页都要采用这个样式表，那么每个网页中都要加入上述样式表，不仅麻烦，而且样式表"只修改一个文件就可以改变页数不定的网页的外观和格式"的优势也荡然无存。所以对于网站设计来说，最好还是采用链接式样式表。
　　    2.链接式样式表：即使用链接的方式加入到<head> </head>标签中间。
　　    a.先将上述代码复制，去掉<style type="text/css">、 、</style>等四个标签，然后保存为后缀名为.css的文档（如my.css）；
　　    b.然后在需要引用此样式的HTML文档的<head></head>之间加入下面这一句：
　　    <link  rel=stylesheet  href="my.css"  type="text/css">
　　    注意href中的链接路径，一般把样式表放在主页根目录下，这样在首页文件中就可以直接使用上述代码了；如果在子目录下，别忘了将路径修改。