层叠样式表二 

一个外部的样式表可以通过HTML的LINK元素连接到HTML文档中:

标记是放置在文档的HEAD部分。可选的TYPE属性用于指定媒体类型--text/css是一个层叠样式表--允许浏览器忽略它们不支持的样式表类型。为CSS文件配置服务器而将text/css当作Content-type内容发送出去也是一个好注意。 外部样式表不能含有任何像或

STYLE元素放在文档的HEAD部分。必须的TYPE属性用于指定媒体类型,LINK元素也一样。同样地,TITLE和MEDIA属性也可以用STYLE指定。

旧版本的浏览器,并不能识别STYLE元素,会将其当作BODY的一部分照常展示其内容,从而使这些样式表对用户是可见的。要防止这样做,STYLE元素的内容要包含一个SGML注解()在里面,像上述例子那样。

嵌入的样式表可用于当一个文档具有独一无二的样式的时候。如果多个文档都使用同一样式表,那么外部样式表会更适用。 输入一个样式表

一个样式表可以使用CSS的@import声明被输入。这个声明用于一个CSS文件或内部的STYLE元素:

注意其它的CSS规则应该仍然包括在STYLE元素中,但所有的@import声明必须放在样式表的开始部分。任意在样式表中指定了的规则,其自身超越在输入样式表中对立的规则。例如上例,即使一个输入的样式表包含DT{background:aqua},定义项(definition terms)依然会是黄色的背景。

被输入的样式表的顺序对于它们怎样层叠是很重要的。在上述的例子中,如果style.css输入的样式表指定了STRONG元素会显示为红色而punk.css样式表指定了STRONG元素显示为黄色的话,那么后面的规则会获胜,而STRONG元素会显示为黄色。

输入的样式表对于模块性效果很有用处。例如,一个网站可以通过使用了的选择符分类样式表。一个simple.css样式表给出公共的元素像BODY、P、H1和H2。此外,一个extra.css样式表给出较少共通的元素像CODE、BLOCKQUOTE和DFN。一个tables.css样式表可以用于定义变革元素的规则。这三个样式表在需要的时候可以使用@import声明包括在HTML中。三个样式表也可以通过LINK元素组合。 内联样式

样式可以使用STYLE属性内联。STYLE属性可以应用于任意BODY元素(包括BODY本身),除了BASEFONT、PARAM和SCRIPT。这个属性将任何数量的CSS声明当作自己的值,而每个声明用分号隔开。以下是一个例子:

这段的样式是红色的New Century Schoolbook字,如果字体可用的话。 注意在STYLE中New Century Schoolbook包含在单引号中,因为双引号被用作包含样式声明。

内联的样式比其他方法更加灵活。要使用内联样式,必须使用Content-Style-Type HTTP页眉扩展对整个文档进行单独的样式表语言声明。使用内联CSS的网页制作者必须将text/css作为Content-Style-Type HTTP页眉,或在HEAD部分包括以下标记:

因为和需要展示的内容混合在一起,内联样式会失去一些样式表的优点。同样地,内联样式默认地接受所有媒体,因为没有任何的为内联样式指定明确的媒体的语句。这种方法应该尽量少用,如当一个样式会应用在所有媒体到一个元素的个别情况。如果样式会被应用到单一元素的场合,但只能使用确认的媒体的话,使用ID属性代替STYLE属性。 CLASS属性

CLASS属性用于指定元素属于何种样式的类。例如,样式表可以加入punk和warning类:

.punk{color:lime;background:#ff80c0}

P.warning{font-weight:bolder;color:red;background:white} 这些类可以使用CLASS属性在HTML中引用: 属性扩展

一些属性扩展会有负值的边效果,产生于支持和不支持的浏览器上.

在这个例子中,punk类可以用于任何BODY元素因为它在样式表中没有HTML元素关联。而在这个例子的样式表,warning类只能用于P元素。

一个良好的习惯是在命名类的时候,根据它们的功能而不是根据它们的外观。上述例子中的warning类也可以命名为red,但如果网页制作者决定改变这个类的样式为别的颜色,或希望为那些使用PC喇叭的人定义为aural(听觉)样式的话,那么这个名字就变得毫无意义了。

类会是应用样式到HTML文档中在结构上一样的部分的有效的办法。例如,本页使用类给CSS源代码和HTML源代码使用不同的样式。 ID属性

ID属性用于定义一个元素的独特的样式。一个CSS规则如 #wdg97{font-size:larger} 可以通过ID属性应用到HTML中:

欢迎访问Web Design Group及TV water 168!

整个文档当中的每个ID属性的值都必须是唯一的。其值必须是一个以字母开头紧接字母、识字或连字符。字母限于A-Z和a-z。

注意HTML 4.0允许在ID属性中有句号,但CSS1不允许在ID选择符中有句号。也要注意CSS1允许Unicode字符161-255而且忽略Unicode字符为一个数字代码,但HTML 4.0不允许这些字符在一个ID属性值当中。

当一个样式只需要在任何文档中应用一次时,使用ID是很适合的。ID与STYLE属性相比,在于ID允许指定媒体的样式,而且也可以被应用于多个文档(虽然每个文档只用一次)。 SPAN元素

SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用,而且它也能接受STYLE、CLASS和ID属性。

SPAN是一个内联元素,所以它可以作为HTML中的元素如EM和STRONG使用。最重要的差别在于虽然EM和STRONG带有结构的意义,但SPAN就没有这样的意义。它的存在纯粹是应用样式,所以当样式表失效时它就没有任何的作用。 一些SPAN例子如下:

STYLE type=text/css media=\!--

.firstwords{font-variant:small-caps} --

/STYLE SPAN class=firstwords The first few words/SPAN The first few words前面是段落中少数的文字,会是小型大写字母。样式也可以内联,如改变文字的样式为Arial. DIV元素

DIV元素在功能上与SPAN元素相似,最主要的差别在于DIV(\,\部分\的简称)是一个块级元素。DIV可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类,如章节、摘要或备注。例如: Divisions/部分

DIV元素在HTML 3.2中有定义,但HTML 3.2中只有ALIGN属性能兼容。HTML 4.0在属性中加入CLASS、STYLE、和ID属性。

因为DIV可以包含其他块级集成,在用于建立文档的大型章节例如本备注是很有用的。要求关闭标记。 关于认证的备注

少数使用了CSS样式的文档能在HTML3.2(Wilbur)层(在WDG网站,译者注)得到认证。HTML3.2不会解释SPAN元素,也不解释CLASS、STYLE或ID属性,而且在LINK和STYLE元素中也很少支持TYPE和MEDIA属性。

这些有关的样式元素和属性对不支持的浏览器不会有害,因为它们能安全地忽略。文档使用这些元素和属性可以被认证防御于HTML 4.0。 依赖样式表

层叠样式表还没有开始广泛使用,但CSS的滥用已经开始。样式表,当使用得当时,可以是一个提供独特和有吸引力的展示的有力工具,当时也允许一个网页被所有用户轻易处理。然而,一旦网页的信息变得依赖样式表时,网页就变成了Web上的失败者。

样式表的设计在于允许网页制作者去改变网页的展示,而不是控制展示。样式表会被可能选择-或需要-他们自己的样式表的用户所超越。因为这些原因,依赖一些样式的网页制作者会发现他们的网页对于部分重要的用户来说难以接受。

样式表的无聊使用演示于一些所谓的CSS图表。一个出现在许多地方的共通弊端是\制作阴影\。这种做法使用了负边界值,而加入了大量的依赖样式表的因素。当样式表被除去,无论是用户的决定还是使用了不支持CSS的浏览器,这些网页往往都不可用了。

例如,看看SpaceGUN Magazine,一个虚构在Microsoft's CSS Gallery的杂志。使用Microsoft Internet Explorer 3.01的打开样式表时,其展示必定是独特和引人注目的,但一旦样式表失效,即使使用同样的浏览器,结果也非常不同。 十分明显,网页因为制作的阴影和负边界值的把戏而在Web上不可用,从而因为搞得乱七八糟脱离了许多读者。这个例子也显示依赖样式表是必然失败的。一个Web文档如果不易处理是没有生命力。

样式表设计者应该小心以总是保证他们的网页没有依赖样式表。一些网页制作者尝试使用WingDings字体制作图象无须争议和增加真正图象的下载时间。尽管这种减少下载时间的动机是可赞赏的,然而这样的人依赖于用户具有WingDings字体和样式表是有效的--在万维网(World Wide Web)上,这些条件是永远无法确认的。 CSS参考

从以下网址你可以了解到CSS发展的最新动态和技术资料:

CSS,level1/层叠样式表1 W3C推荐的完整的、详细的CSS1说明书。CSS1速成 一个CSS1属性和单位的速成手册。CSS规范草稿

W3C的CSS大本营,有关于浏览器和编辑器支持方面的注意事情,加上所有CSS以前和现在的草稿。CSS常见问题

一个关于CSS常见问题的详尽列表。CSS'金手指' 一个广泛的优秀CSS连接列表。CSS'臭虫'/免疫

一个广泛适用于CSS浏览器的'臭虫'和免疫的列表。Microsoft Internet Explorer 3.0的CSS1支持

看看Microsoft Internet Explorer 3.0 for Windows 95&NT 4.0中对CSS1的错误的、欠缺的支持样式表Web评论参考指南

有帮助的文章和一直流行的浏览器兼容图解t样式表已知问题

Netscape Navigator 4.0对CSS的实现中出现的缺陷和不支持。Amaya的CSS支持 描述Amaya(W3C的实验浏览器)中对CSS的支持的文档。

版权信息:本教程是根据W3C制定的CSS标准语法英文版本由Water Tang和

Xianzhen Liang翻译而成的。由《网页设计师》制作网页教程,在此表示感谢!

特别声明: 1:资料来源于互联网,版权归属原作者 2:资料内容属于网络意见,与本账号立场无关 3:如有侵权,请告知,立即删除。



联系客服:cand57il.com