学写层叠样式表
---（文/田涛）
层叠样式表(CSS)是W3C组织新近批准的一个辅助HTML设计的新特性,它能够使你保持整个HTML的统一外观。过去当你在设置文本时,为了保持整个段落都使用相同的外观,你不得不为每一段设置属性,很麻烦。如果你使用了CSS,那么你可以在设置文本之前,就指定整个文本的属性,比如颜色、字体大小等等,这样,你就能获得统一的文本外观了。
一、层叠样式表的分类
1. 外部样式表
外部样式表将管理整个Web页的外观,当你在设计HTML时,首先要对整个外观定义一个CSS文件(扩展名为CSS),然后通过链接来使用,格式如下:
<HTML>
<HEAD>
<TITLE>
XXXXXX (网页标题)
</TITLE>
<LINK REL=Stylesheet href="http://www.xxx.net/style.css"
Type="text/css"
</HEAD>
2. 内嵌样式表
内嵌样式表将影响某一个页面的外观,使用格式如下:
<HTML>
<HEAD>
<TITLE>
XXXXXX
</TITLE>
<Style>
<!--
H1 {font-size: x-large; color: green}
H2 {font-size: large; color:blue}
.note {font-size:small}
#footer {font-family: serif}
-->
</Style>
3. 内含样式表
内含样式表改变页面某一段的外观,格式如下:
<HTML>
<HEAD>
<TITLE>
XXXXXX
</TITLE>
</HEAD>
<BODY>
<P Style="color: red">
XXXXX (文本内容)
</P>
</BODY>
</HTML>
如果同时使用上面三个样式表,将会对网页有什么影响呢?顾名思义,层叠样式表是一层层的,也就是说可以设置整个Web页的样式,也可以针对某一页或者某一页中的一段。正如大家知道的,内部的样式表将不受外部样式表的影响,简单地说,越里面的样式表级别越高,越不受其它样式表影响。
二、层叠样式表的基本语法
CSS和HTML同样比较简单好学,其基本语法是:
H1 { font-size: large; color:red }
上面H1代表的是文字标题的属性设置,而font-size设置字体大小 ,在该例子中把字体设置成大字体;而color设置文字的颜色,在该例子中,颜色是红色。有了这个思想,其它标签也是相同的,比如:
H1 {font-size: x-large; color:green}
H2 {font-size:large; color:blue}
H3 {font-size:16pt;color:red}
如果上面的属性都是相同的,你也可以简化成以下格式:
H1,H2,H3 {font-size:large; color:red}
这样三类标题将使用相同的设置。
三、层叠样式表的扩充语法
设置字体字形
{font-family: XXX}
设置字体的粗细
{font-weight: XXX}
设置字体大小
{font-size: XXX}
设置字体的颜色
{color: red}
指定页面背景颜色
{background-color: red}
指定某一个图片为背景
{background-image: url(/images/xxx.JPG)}
指定文字是否下划线
{text-decoration: none}
指定文本的对齐方式
{text-align: left}
指定网页上、下、左、右的边缘距离
{margin: 3cm}
指定段落间的上下距离
{padding: 18px}
四、层叠样式表中的Class和ID
在使用层叠样式表时,你可能会根据网页需要随时使用不同的样式表,也可能在几处地方都使用相同的样式,那么你就可以使用Class
或ID。你可以先定义一个Class或ID,然后在使用时只需指明你的Clas s或ID名就可以了,例如:
.tiantao {font-size: large}
上面.tiantao是Class名,当然你可以起任何名字,定义好以后,就可以使用了。
<HTML>
<HEAD>
<TITLE>
XXXXXX
</TITLE>
<Style>
<!---
.tiantao H1 {font-size: x-large;
color: green}
-->
</Style>
</HEAD>
<BODY>
<DIV Class=tiantao> xxxxxx(文本内容) </DIV>
</BODY>
</HTML>
需要注意的是,如果文本段落跨越不大,可以使用DIV定义,反之用
SPAN定义。
ID实际上与Class非常类似,只是ID只能被调用一次,而Class则次数不限。
五、层叠样式表的应用
层叠样式表的出现给我们设计网页带来了很大的灵活性。目前IE
及Netscape浏览器都支持层叠样式表,目前不少HTML设计工具也都支持层叠样式表,FrontPage98就是其中一个不错的工具。在FrontPage9
8中,你可以方便地使用三种层叠样式表,在这里,你可以给任何对象使用层叠样式表,不管是图片还是文字,并且在使用过程中,不需要你记住层叠样式表的语法,只需要你单击下拉菜单进行选择,只是到了更详细设置时,需要通过FrontPa
ge98的样式表内插工具进行人工书写。如果想了解更详细的CSS语法,可以访问网站
htt p://w3c.org/style /。(作者E-mail: tiantao@public.wh.hb.cn)