为你的HTML加入一些样式

    在微软公司发布IE3.0以来,人人都在议论样式表。该HTML扩展--曾由W3C建议--可能是唯一的由创作方进行工作以减少下载时间的技术。

    终于,我们可以不用调整表格、改变字体或原图大小就能控制样式属性(如边界宽度等)使用样式表,出版者可以通过字体字号、颜色、空格的“一次设定,多页有效”来节省时间。他们还可以不用imagemap而创作出漂亮、复杂的页面。因为字体字号、文字可以放到图形上去,或者一层一层叠加起来,产生特殊阴影效果。

    那么这些样式表是如何工作的呢?问得好。

    巧妙地使用标记<h4>, <i>和<b>,有时还可以设计出说得过去的页面。但是每次下载页面时,浏览器必须对上述标记进行结石。而样式表可以省去这些烦琐的解释。

    有了样式表,我们可以重定义任何HTML结构。一个结构就是一个能够制定打开和关闭某一属性的标记,如<b></b>或<h4></h4>由于<p>也可以加上一个</p>,所以它也被认为是一个结构而由样式表进行定义。

    样式表可以用于三个不同的层次:local(定义一个页面的局部),global(定义整
个页面)和linked(定义多个页面)。下面我们将依次进行讲解:

第一层次:local样式表

    这是最简单、最具体的层次。样式表可以用来代替诸如<font>等类标记。你不仅可以用它定义字体字号,你还可以定义边界(包括左边界、右边界)、线的高度以及其他许多属性。

    作为一个例子,让我们来重新定义传统的<h2>。如下所示:

<h2>这是一个普通标题</h2>

    它的显示结果是:

这是一个普通标题

    新的,使用样式表的源代码如下:

<h2>This is a normal headline</h2>

    该标题显示如下:

This is a normal headline

注:你将看到一个象图形的标题。

第二层次: global样式表

    global样式表让你可以用短短的几行代码对整个页面的文本和布局进行描述。这些手工标记加在<style>和</style>之间。这一对标记置于<body>标记之前。

    带有global样式表的HTML文件看上去象下面的样子:

<html>
<style type="text/css">
<!--
h4 {font: 17pt "Arial,Helvetica";font-weight: bold;color: maroon}
h2 {font: 15pt "Courier"; font-weight: bold;color: blue}
p {font: 12pt "Arial,Helvetica";color: black}
-->
</style>
<body>
...
</body>
</webmonkey/html>

    注意,在style标记中仍然有HTML标记(<!-->)。这将允许支持样式表的浏览器找到方向,而老的浏览器可以继续解释它认识的代码。

    另外,你可能注意到了,上述的字号是用"points"(点)来定义的。但样式表也允许你用"pixels"(象素)、inches(英寸)和cm(厘米)去定义字号。

第三层次:linked样式表

    如果你用一个样式表为多个页面定义样式,它确有独到之处。要做到这一点,我们首先创建一个独立的样式表文件,扩展名为.css。这些预先定义的样式可以适用于header部分标有.css的HTML文件。

    所以,如果我们有2000个指向相同的.css文件的HTML文件,我们可以通过改动.css文件而改变所有这2000个文件。可以想象我们因此而节省了多少时间和力气。

    一个典型的.css文件可以表达如下:

<html>
<style type="text/css">
<!--
body {font: 10pt "Verdana, sans-serif"};
h2 {font: 50pt "Verdana, sans-serif";font-weight: bold;color: #58F734}
h3 {font: 13pt/15pt "Verdana, sans-serif"; font-weight: bold;color: maroon;margin-left: 0.5in;margin-top: -10px;line-height: 30px}
em {margin-top: -105px}
p {font: 10pt/12pt "Verdana, sans-serif";color: black;margin-left: 0.5in;margin-top: -10px;line-height: 20px}
-->
</style>
<body>
</body>
</html>

    要使该样式表对应于一个HTML文件,你可以在该HTML文件的头部加上

<head>
<link rel=stylesheet href="name.css" type="text/css">
</head>

    因此,通过样式表,我们为HTML文件定义了一个基本样式。只要是在<body>部分的文字,都受该基本样式的控制。我们还重新定义了一些标记,如<em>和<h3>。任何没有被样式表定义的标记将以其本来的面目被解释。

串接部分

    既然我们已经简要地讲解了使用样式表句法的三种方式(local, global和linked)。这里很有必要再提及一下样式表的串接部分。

    假定我们有一个响应linked样式表的HTML文件。我们仍然可以为该HTML文件加上local和global样式表。但这会出现一个问题?哪个样式表具有优先权?答案是,越具体的定义越优先。也就是说,local优先于global,而global又优先于linked。

    在以后的几个月中,我们将在HTML教程中增加样式表的课程。同时,你也可以参考微软公司的样式表用户手册以及W3C的指导。要想得到更多的信息,还可参见微软的CSS Gallery。

<<      >>