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