发信人: marsz()
整理人: microant(1999-08-02 12:13:33), 站内信件
|
自W3C（The World Wide Web Consortium）制定了代号为Cougar的HTML的4.0版本
以来，存在在Web页面中的动态效果首次被正式的承认了，W3C把动态超文本（Dy
namic HTML）的实现分为了三个部分：脚本、支持动态效果的浏览器和CSS。前两
者也许你经常用到，但CSS是什么或许你并不清楚，如果有过制作Web页面的经历
，你可能听说过样式单或风格单，如果对此你亦无耳闻，不要紧，只要你想制作
出具有更多新特性的Web页，本文将同样适合于你。（请使用IE4或IE5对CSS手册
中的属性实例进行验证）
一、什么是CSS？
CSS是Cascading Style Sheet的缩写，有些书上把它译为"层叠样式单"或"级联样
式单"（下文简称"样式单"），在1997年W3C颁布HTML4标准的同时也公布了有关样
式单的第一个标准CSS1。样式单是对以前的HTML（3.2以前的HTML版本）语法的一
次重大革新，以前的HTML版本中，各种功能的实现是通过标记元素实现的，这也
造成了各个浏览器厂商为了标新立意创建各种只有自家支持的标记，各种标记互
相嵌套，就可以达到不同的效果，比如要在一段文字中把一部分文字变成红色，
HTML3.2中应该是这样的：
<p>这里显示红色字</p>
而在样式单中，把某些标记（如上例中的"font"标记）属性化，利用样式单，上
例可以变成：
<p style="color:red">这里显示红色字</p>
这就是样式单的全部功能吗？远远不是！前面说过样式单是DHTML的一部分，建立
样式单的真正意义在于把对象真正引入了HTML，使得可以使用脚本程序（如Java
script、VBScript）调用对象属性，并且可以改变对象属性，达到动态的目的，
这在以前的HTML中是无法实现的，如果你使用过如VB等面向对象的编程工具，你
会更快的发现，用样式单做DHTML是多么容易。样式单的另一项贡献是简化了HTM
L中各种繁琐的标记，使得各个标记的属性更具有一般性和通用性，并且样式单扩
展了原先的标记功能，能够实现更多的效果，样式单甚至超越了Web页面的本身显
示功能，而把样式扩展到多种媒体上，显示了难以抗拒的魅力。
样式单自从CSS1的版本之后，又在1998年5月发布了CSS2版本，样式单得到了更多
的充实。Internet Explorer4和Netscape Navigator4都宣传支持样式单，但从各
方面来看IE4的效果都要超过NE4，这是因为IE4和NE4的Javascript文档模型（DO
M）不同而造成的，从表面看，二者的模型区别不大，但实质上却是大相径庭，I
E4的模型能够更加容易的把动态效果引入Web页面，虽然现在IE4的模型只有微软
自己支持，但它却已被清楚的写入了W3C的DHTML标准；而NE4的样式单并不能通过
脚本调用对象的属性，说的不好听一点，它的样式单只是徒有其表罢了。（Nets
cape公司自己开发了一种样式单称作JSSS，它利用Javascript来定义样式，但是
并没有得到W3C的承认。）
二、进一步了解样式单
Cascading Style Sheet中的Cascading是"层叠"的意思，也就是说在同一个Web文
档中可以有多个样式单存在，这些样式单根据所在的位置，拥有不同的优先级，
优先级越高，就会被最后在显示时采用。从样式单插入的形式来看可以分为三种
：
内联式样式单：它利于现有的HTML标记，把特殊的样式加入到那些由标记控制的
信息中，比如刚才的例子。
嵌入式样式单：它和Javascript一样可以嵌入到HTML文件的头部中去（<html>和
<body>标记之间），使用<Style>和</Style>容器装载，例如："<style> p {col
or : red ; font-weight : bold} </style>"，这样会对页面中所有<p>标记都起
作用。
外部式样式单：是一种保存在外部的样式单文件，外部文件以.CSS为扩展名，例
如"<link rel=stylesheet href="main-sheet.css" type="text/css">"。
在应用时可以根据需要随意运用以上三种方式，但在实际中内联式样式单和嵌入
式样式单使用得更多一些。
三、样式单的语法特征
样式单有自己独特的书写方法，掌握了它的语法特征，再了解它的各种属性，那
么你会发现在Web页面中运用样式单会是多么轻松。例如有一个最简单的HTML文档
：
<html>
<body>
<p>Text goes here…<p>
</body>
</html>
我们可以用嵌入式样式单规定样式。
<html>
<style>
<!--
p {color:red; font-weight : bold}
- ->
</style>
<body>
<p>这里显示红色字</p>
</bdoy>
</html>
可以看到，在这个文档里，多了"Style"标记，之间用<!-- ……… - ->注释，以
防止不能识别样式单的低版本浏览器把样式单当作内容显示出来，然后是关键的
一句：
p {color:red；font-weight : bold }
这整行称为一个声明（Statement），在样式单中，声明分为两种，一种是象这样
的，叫做"rule set"，另一种则称为"at-rule"。
At-rule以"@"作为关键字，放在元素的最前面，at-rule通常用来对媒体（Media
）的声明，并且如果对同一个at-rule进行声明，那么只有位置靠前的会起到作用
，如：
@import "subs.css"
H1 {color:blue}
@import "list.css"
后一个At-Rule无效。
而rule set就象我们前面看到的样子了，它由几个部分组成，其中包括选择器、
属性和属性值。一般的书写是这样的：
Selector1 {property1:value1; property2:value2;……}
Selector2 {……}
其中刚才例子中的"P"代表段落标记元素，为选择器，"{}"为一个块（Block），
表示对标记属性的声明（Declaration），有多个属性的时候使用";"隔开，属性
在样式单中的一般表示方法是前面是一类属性的名称，后面是具体属性的名称，
中间用"-"隔开，而在脚本中使用属性的时候，则把"-"去掉，并把第二部分的开
头字母大写。属性值的表示可以使用10进制，16进制数值（如#FFFFFF），百分数
（如100%），字符串，URL（如url(http://www.mysite.com)）和RGB（如rgb(25
5,255,255)）等多种方式表示。下面我将对其中的重点部分进行更详细的解释。
--
________________________________________________
欢迎访问飞翔鸟软体驿站： HTTP://JOYSOFT.SOIM.NET
BEST REGUARDS, MARS MAILTO:[email protected]
※ 来源:．月光软件站 http://www.moon-soft.com．[FROM: 202.99.63.74]
|
|