一个样式表由样式规则组? 以告诉浏览器怎样dC个文? 有很多将样式规则加入C的HTML文档中的Ҏ, 但最单的启动Ҏ是用HTML的STYLElg. q个元素攄于文档的HEAD部分, 包含|页的样式规?
要注意到管STYLE元素是试验样式表的好Ҏ, 它具有某些在用户使用q种Ҏ之前应该考虑的缺? 不同Ҏ的优点和~点在将样式表加入到HTML中部分中有讨论?
每个规则的组成包括一个选择W?-通常是一个HTML的元? 例如BODY, P, 或EM--和该选择W所接受的样?
有很多的属性可以用于定义一个元? 每个属性带一个? 共同地描q选择W应该如何呈?
样式规则l成如下:
选择W?{ 属? ?}
单一选择W的复合样式声明应该用分号隔开:
选择W?{ 属?: ?; 属?: ? }
以下是一D定义了H1和H2元素的颜色和字体大小属?
<HEAD>
<TITLE>CSS例子</TITLE>
<STYLE TYPE="text/css">
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
</STYLE>
</HEAD>
--------------------------------------------------------------------------------
有很多方法将样式表加入到HTML中，每个都带有自q优点和缺炏V新的HTML元素和属性已被加入以允许样式表与HTML文档更简易地l合h?
q接C个外部的样式?
嵌入一个样式表
输入一个样式表
内联样式
CLASS属?
ID属?
SPAN元素
DIV元素
关于认证的备?
--------------------------------------------------------------------------------
q接C个外部的样式?
一个外部的样式表可以通过HTML的LINK元素q接到HTML文档?
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print">
<LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print">
<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>
< LINK>标记是放|在文档的HEAD部分。可选的TYPE属性用于指定媒体类?-text/css是一个层叠样式表--允许览器忽略它们不支持的样式表cd。ؓCSS文g配置服务器而将text/css当作Content-type内容发送出M是一个好注意?
外部样式表不能含有Q何像<HEAD>?lt;STYLE>q样的HTML的标记。样式表仅仅由样式规则或声明l成。一个单独由
P { margin: 2em }
l成的文件就可以用作外部样式表了?
<LINK>标记也有一个可选的MEDIA属性，用于指定样式表被接受的介质或媒体。允许的值有
screen (~省?Q提交到计算机屏q；
printQ?输出到打印机Q?
projectionQ提交到投媄机；
auralQ扬声器Q?
brailleQ提交到凸字触觉感知讑֤Q?
ttyQ电传打字机 (使用固定的字?Q?
tvQ电视机Q?
allQ所有输备?
多样的媒体通过用逗号隔开的列表或值all指定?
Netscape Navigator 4.x 错误地忽略除了screen值外的Q何用MEDIA值声明的q接或嵌入样式表。例如，MEDIA="screen,projection"会o到样式表被Navigator 4.x忽略Q尽展C的讑֤是计机的屏q。Navigator 4.x 也忽略用MEDIA=all声明的样式表?
REL 属性用于定义连接的文g和HTML文档之间的关pRREL=StyleSheet指定一个固定或首选的样式而REL="Alternate StyleSheet"定义一个交互样式。固定样式在样式表激zL总被应用。缺的TITLE属性，像例子中的W一?lt;LINK>标记Q定义一个固定样式?
一个首选样式会自动被应用，像例子中的W二?lt;LINK>标记。REL=StyleSheet和一个TITLE属性的l合指定一个首选的样式。网制作者不能指定多于一个的首选样式?
交互样式通过REL="Alternate StyleSheet"指出。例子中的第三个<LINK>标记定义一个交互样式，用户可以选择用来代替首选样式表?
注意现在的浏览器一般都~Z选择交互样式的能力?
单一的样式也可以通过多个样式表给?
<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">
在这个例子中Q三个样式表l合成一?quot;Contemporary"样式Q作Z个首选样式表被应用。要l合多个样式表成一个单一样式Q必d每个样式表中使用相同TITLE?
当样式被应用到很多的|页Ӟ一个外部样式表是理想的。网制作者用外部样式表可以改变整个|站的外观而仅仅通过改变一个文件。同LQ大多数览器会保存外部样式表在~冲区，从而如果样式表在缓冲区避免了在展C网|的gq?
Microsoft Internet Explorer 3 for Windows 95/NT4q不支持来自q接的样式表中的BODY 背景图象或颜艌Ӏ如果考虑到这个错误，|页制作者不妨提供另外的包括一个背景图象或颜色的结构，例缜度牖蚰诹剑蚴褂肂ODY元素?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元素也一栗同样地QTITLE和MEDIA属性也可以用STYLE指定?
旧版本的览器，q不能识别STYLE元素Q会其当作BODY的一部分照常展示其内容，从而ɘq些样式表对用户是可见的。要防止q样做，STYLE元素的内容要包含一个SGML注解(<!-- comment -->)在里面，像上qC子那栗?
嵌入的样式表可用于当一个文档具有独一无二的样式的时候。如果多个文档都使用同一样式表，那么外部样式表会更适用?
--------------------------------------------------------------------------------
输入一个样式表
一个样式表可以使用CSS的@import 声明被输入。这个声明用于一个CSS文g或内部的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 声明必须攑֜样式表的开始部分。Q意在样式表中指定了的规则Q其自n越在输入样式表中对立的规则。例如上例，即一个输入的样式表包含DT { background: aqua }Q定义项(definition terms)依然会是黄色的背景?
被输入的样式表的序对于它们怎样层叠是很重要的。在上述的例子中Q如果style.css输入的样式表指定了STRONG元素会显CZؓU色而punk.css样式表指定了STRONG元素昄为黄色的话，那么后面的规则会莯Q而STRONG元素会显CZؓ黄色?
输入的样式表对于模块性效果很有用处。例如，一个网站可以通过使用了的选择W分cL式表。一个simple.css样式表给出公q元素像BODY、P?H1和H2。此外，一个extra.css样式表给共通的元素像CODE、BLOCKQUOTE和DFN。一个tables.css样式表可以用于定义变革元素的规则。这三个样式表在需要的时候可以用@import 声明包括在HTML中。三个样式表也可以通过LINK元素l合?
--------------------------------------------------------------------------------
内联样式
样式可以使用STYLE属性内联。STYLE属性可以应用于LBODY元素(包括BODY本n)Q除了BASEFONT、PARAM和SCRIPT。这个属性将M数量的CSS声明当作自己的|而每个声明用分号隔开。以下是一个例?
<P STYLE="color: red; font-family: 'New Century Schoolbook', serif"> q段的样式是U色的New Century Schoolbook字，如果字体可用的话?lt;/P>
注意在STYLE中New Century Schoolbook包含在单引号中，因ؓ双引可用作包含样式声明。内联的样式比其他方法更加灵zR要使用内联样式Q必M用Content-Style-Type HTTP늜扩展Ҏ个文档进行单独的样式表语a声明。用内联CSS的网制作者必dtext/css作ؓContent-Style-Type HTTP늜Q或在HEAD部分包括以下标记:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
因ؓ和需要展C的内容混合在一P内联样式会失M些样式表的优炏V同样地Q内联样式默认地接受所有媒体，因ؓ没有M的ؓ内联样式指定明确的媒体的语句。这U方法应该尽量少用，如当一个样式会应用在所有媒体到一个元素的个别情况。如果样式会被应用到单一元素的场合，但只能用确认的媒体的话Q用ID属性代替STYLE属性?
--------------------------------------------------------------------------------
CLASS属?
CLASS属性用于指定元素属于何U样式的cR例如，样式表可以加入punk和warningc?
.punk { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white }
q些cd以用CLASS属性在HTML中引?
<H1 CLASS=punk>属性扩?lt;/H1>
<P CLASS=warning>一些属性扩展会有负值的Ҏ果，产生于支持和不支持的览器上...
在这个例子中Qpunkcd以用于Q何BODY元素因ؓ它在样式表中没有HTML元素兌。而在q个例子的样式表Qwarningcd能用于P元素?
一个良好的习惯是在命名cȝ时候，Ҏ它们的功能而不是根据它们的外观。上qC子中的warningcM可以命名为redQ但如果|页制作者决定改变这个类的样式ؓ别的颜色Q或希望为那些用PC喇叭的h定义为aural(听觉)样式的话Q那么这个名字就变得毫无意义了?
cM是应用样式到HTML文档中在l构上一L部分的有效的办法。例如，本页使用cȝCSS源代码和HTML源代码用不同的样式?
--------------------------------------------------------------------------------
ID属?
ID属性用于定义一个元素的独特的样式。一个CSS规则?
#wdg97 { font-size: larger }
可以通过ID属性应用到HTML?
<P ID=wdg97>Ƣ迎讉KWeb Design Group及TV water 168!</P>
整个文档当中的每个ID属性的值都必须是唯一的。其值必L一个以字母开头紧接字母、识字或q字W。字母限于A-Z和a-z?
注意HTML 4.0允许在ID属性中有句P但CSS1不允许在ID选择W中有句受也要注意CSS1允许Unicode字符161-255而且忽略Unicode字符Z个数字代码，但HTML 4.0不允许这些字W在一个ID属性值当中?
当一个样式只需要在M文档中应用一ơ时Q用ID是很适合的?ID与STYLE属性相比，在于ID允许指定媒体的样式，而且也可以被应用于多个文?虽然每个文档只用一??
--------------------------------------------------------------------------------
SPAN元素
SPAN元素被加入到HTML中以允许|页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作Z个选择W用，而且它也能接受STYLE、CLASS和ID属性?
SPAN是一个内联元素，所以它可以作ؓHTML中的元素如EM和STRONG使用。最重要的差别在于虽然EM和STRONG带有l构的意义，但SPAN没有这L意义。它的存在纯_Ҏ应用样式Q所以当样式表失效时它就没有M的作用?
一些SPAN例子如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>SPAN的例?lt;/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>前面?
D落中少数的文字Q会是小型大写字母。样式也可以内联Q如改变?
字的样式?lt;SPAN STYLE="font-family: Arial">Arial</SPAN>.</P>
--------------------------------------------------------------------------------
DIV元素
DIV元素在功能上与SPAN元素怼Q最主要的差别在于DIV ("division"Q?部分"的简U?是一个块U元素。DIV可以包含D落、标题、表格甚臛_它部分。这使DIV便于建立不同集成的类Q如章节、摘要或备注。例?
<DIV CLASS=note>
<H1>Divisions/部分</H1>
<P>DIV元素在HTML 3.2中有定义Q但HTML 3.2中只有ALIGN属性能兼容。HTML 4.0在属性中加入CLASS、STYLE、和ID属性?lt;/P>
<P>因ؓDIV可以包含其他块集成Q在用于建立文档的大型章节例如本备注是很有用的?lt;/P>
<P>要求关闭标记?lt;/P>
</DIV>
--------------------------------------------------------------------------------
关于认证的备?
数使用了CSS样式的文档能在HTML3.2 (Wilbur)?在WDG|站Q译者注)得到认证。HTML3.2不会解释SPAN元素Q也不解释CLASS、STYLE或ID属性，而且在LINK和STYLE元素中也很少支持TYPE和MEDIA属性?
q些有关的样式元素和属性对不支持的览器不会有宻I因ؓ它们能安全地忽略。文档用这些元素和属性可以被认证防M于HTML 4.0?
看到虫子老是有排版的问题。。?p{了一贴。。现在的|页布局都用层了。?Q哎Q，其实也我也习惯了表格。。虽然很ȝQ，但是熟悉了。）其实层布局实是简单很多。。。?大家看看吧?!-- / message -->
__________________
]]>
邮箱注册:http://mail.zj.com/index.htm
L?A target=_blank>q里
]]>
]]>