CSS–层叠样式表大全(4)-IDC资讯中心

11.CSS 单位
长度单位
一个长度的值由可选的正号" + "或负号" – "、接着的一个数字、还有标明单位的两个字母组成。在一个长度的值之中是没有空格的，例如，1.3 em就不是一个有效的长度的值，但1.3em就是有效的。一个为零的长度不需要两个字母的单位声明。

无论是相对值还是绝对值长度，CSS1都支持。相对值单位确定一个相对于另一长度属性的长度，因为它能更好地适应不同的媒体，所以是首选的。以下是有效的相对单位:

em (em，元素的字体的高度)
ex (x-height，字母 "x" 的高度)
px (像素，相对于屏幕的分辨率)
绝对长度单位视输出介质而定，所以逊色于相对单位。以下是有效的绝对单位:

in (英寸，1英寸=2.54厘米)
cm (厘米，1厘米=10毫米)
mm (米)
pt (点，1点=1/72英寸)
pc (帕，1帕=12点)

——————————————————————————–

百分比单位
一个百分比值由可选的正号"＋"或负号"－"、接着的一个数字，还有百分号"%"。在一个百分比值之中是没有空格的。

百分比值是相对于其它数值，同样地用于定义每个属性。最经常使用的百分比值是相对于元素的字体大小。

——————————————————————————–

颜色单位
颜色值是一个关键字或一个RGB格式的数字。

Windows VGA(视频图像阵列)形成了16各关键字: aqua，black， blue，fuchsia，gray，green， lime，maroon，navy，olive， purple，red，silver，teal，white，and yellow。

RGB颜色可以有四种形式:

#rrggbb (如，#00cc00)
#rgb (如，#0c0)
rgb(x,x,x) x是一个介乎0到255之间的整数 (如，rgb(0,204,0))
rgb(y%,y%,y%) y是一个介乎0.0到100.0之间的整数 (如，rgb(0%,80%,0%))
上述的例子指定同一颜色。

Douglas R. Jacobson先生还开发了速查手册RGB Color Chart (61 kB)。

——————————————————————————–

统一资源管理URLs
一个URL值的格式为 : url(foo)，foo是一个URL(统一资源管理，因特网的地址)。URL可以选择用单引号( ‘ )或者双引号( " )，并且，在URL之前或之后可以包含空格。

在URL中的括弧，逗号，空格，单引号，或双引号必须避开反斜杠。不完整的URLs被理解为样式表的源代码，而不是HTML源代码。

注意: Netscape Navigator 4.x 会错误地将不完整的URLs理解为相关的HTML源代码。注意到这个错误后，网页制作者应该在可能的地方使用完整的URLs。

例如:

BODY { background: url(stripe.gif) }
BODY { background: url(http://www.htmlhelp.com/stripe.gif) }
BODY { background: url( stripe.gif ) }
BODY { background: url("stripe.gif") }
BODY { background: url(\"Ulalume\".png) } /* quotes in URL escaped */

12.将样式表加入到HTML中
有很多方法将样式表加入到HTML中，每个都带有自己的优点和缺点。新的HTML元素和属性已被加入以允许样式表与HTML文档更简易地组合起来。

连接到一个外部的样式表
嵌入一个样式表
输入一个样式表
内联样式
CLASS属性
ID属性
SPAN元素
DIV元素
关于认证的备注

——————————————————————————–

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

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

外部样式表不能含有任何像<HEAD>或<STYLE>这样的HTML的标记。样式表仅仅由样式规则或声明组成。一个单独由

P { margin: 2em }

组成的文件就可以用作外部样式表了。

<LINK>标记也有一个可选的MEDIA属性，用于指定样式表被接受的介质或媒体。允许的值有

screen (缺省值)，提交到计算机屏幕；
print，输出到打印机；
projection，提交到投影机；
aural，扬声器；
braille，提交到凸字触觉感知设备；
tty，电传打字机 (使用固定的字体)；
tv，电视机；
all，所有输出设备。
多样的媒体通过用逗号隔开的列表或值all指定。

Netscape Navigator 4.x 错误地忽略除了screen值外的任何使用MEDIA值声明的连接或嵌入样式表。例如，MEDIA="screen,projection"会令到样式表被Navigator 4.x忽略，尽管展示的设备是计算机的屏幕。Navigator 4.x 也忽略使用MEDIA=all声明的样式表。

REL属性用于定义连接的文件和HTML文档之间的关系。REL=StyleSheet指定一个固定或首选的样式而REL="Alternate StyleSheet"定义一个交互样式。固定样式在样式表激活时总被应用。缺少的TITLE属性，就像例子中的第一个<LINK>标记，定义一个固定样式。

一个首选样式会自动被应用，就像例子中的第二个<LINK>标记。REL=StyleSheet和一个TITLE属性的组合指定一个首选的样式。网页制作者不能指定多于一个的首选样式。

交互样式通过REL="Alternate StyleSheet"指出。例子中的第三个<LINK>标记定义一个交互样式，用户可以选择用来代替首选样式表。

注意现在的浏览器一般都缺乏选择交互样式的能力。

单一的样式也可以通过多个样式表给出

在这个例子中，三个样式表组合成一个"Contemporary"样式，作为一个首选样式表被应用。要组合多个样式表成一个单一样式，必须在每个样式表中使用相同TITLE。

当样式被应用到很多的网页时，一个外部样式表是理想的。网页制作者使用外部样式表可以改变整个网站的外观而仅仅通过改变一个文件。同样的，大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟。

Microsoft Internet Explorer 3 for Windows 95/NT4并不支持来自连接的样式表中的BODY 背景图象或颜色。如果考虑到这个错误，网页制作者不妨提供另外的包括一个背景图象或颜色的结构，例如嵌入或内联样式，或使用BODY元素的BACKGROUND属性。

——————————————————————————–

嵌入一个样式表
一个样式表可以使用STYLE元素在文档中嵌入:

<STYLE TYPE="text/css" MEDIA=screen>
<!–
BODY { background: url(foo.gif) red; color: black }
P EM { background: yellow; color: black }
.note { margin-left: 5em; margin-right: 5em }
–>
</STYLE>
STYLE元素放在文档的HEAD部分。必须的TYPE属性用于指定媒体类型，LINK元素也一样。同样地，TITLE和MEDIA属性也可以用STYLE指定。

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

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

——————————————————————————–

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

<STYLE TYPE="text/css" MEDIA="screen, projection">
<!–
@import url(http://www.htmlhelp.com/style.css);
@import url(/stylesheets/punk.css);
DT { background: yellow; color: black }
–>
</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声明当作自己的值，而每个声明用分号隔开。以下是一个例子:

<P STYLE="color: red; font-family: ‘New Century Schoolbook’, serif"> 这段的样式是红色的New Century Schoolbook字，如果字体可用的话。</P>

注意在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中引用:

<H1 CLASS=punk>属性扩展</H1>
<P CLASS=warning>一些属性扩展会有负值的边效果，产生于支持和不支持的浏览器上…

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

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

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

——————————————————————————–

ID属性
ID属性用于定义一个元素的独特的样式。一个CSS规则如

#wdg97 { font-size: larger }

可以通过ID属性应用到HTML中:

<P ID=wdg97>欢迎访问Web Design Group及TV water 168!</P>

整个文档当中的每个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例子如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>SPAN的例子</TITLE>
<STYLE TYPE="text/css" MEDIA="screen, print, projection">
<!–
.firstwords { font-variant: small-caps }
–>
</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=firstwords>The first few words</SPAN>前面是
段落中少数的文字，会是小型大写字母。样式也可以内联，如改变文
字的样式为<SPAN STYLE="font-family: Arial">Arial</SPAN>.</P>

——————————————————————————–

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

<DIV CLASS=note>
<H1>Divisions/部分</H1>
<P>DIV元素在HTML 3.2中有定义，但HTML 3.2中只有ALIGN属性能兼容。HTML 4.0在属性中加入CLASS、STYLE、和ID属性。</P>
<P>因为DIV可以包含其他块级集成，在用于建立文档的大型章节例如本备注是很有用的。</P>
<P>要求关闭标记。</P>
</DIV>

——————————————————————————–

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

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

13.依赖样式表

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

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

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

　　例如，看看SpaceGUN Magazine，一个虚构在Microsoft’s CSS Gallery的杂志。使用Microsoft Internet Explorer 3.01的打开样式表时，其展示必定是独特和引人注目的:

但一旦样式表失效，即使使用同样的浏览器，结果也非常不同:

十分明显，网页因为制作的阴影和负边界值的把戏而在Web上不可用，从而因为搞得乱七八糟脱离了许多读者。这个例子也显示依赖样式表是必然失败的。一个Web文档如果不易处理是没有生命力。

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

14.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的支持的文档。

CSS–层叠样式表大全(4)

相关推荐

热门标签

热门文章

分类目录