📄 css12.htm
字号:
projection"><br>
<!--<br>
@import url(http://www.htmlhelp.com/style.css);<br>
@import url(/stylesheets/punk.css);<br>
DT { background: yellow; color: black }<br>
--><br>
</STYLE></font><br>
注意其它的CSS规则应该仍然包括在STYLE元素中，但所有的@import
声明必须放在样式表的开始部分。任意在样式表中指定了的规则，其自身超越在输入样式表中对立的规则。例如上例，即使一个输入的样式表包含DT
{ background: aqua }，定义项(definition terms)依然会是黄色的背景。<br>
<br>
被输入的样式表的顺序对于它们怎样层叠是很重要的。在上述的例子中，如果style.css输入的样式表指定了STRONG元素会显示为红色而punk.css样式表指定了STRONG元素显示为黄色的话，那么后面的规则会获胜，而STRONG元素会显示为黄色。<br>
<br>
输入的样式表对于模块性效果很有用处。例如，一个网站可以通过使用了的选择符分类样式表。一个simple.css样式表给出公共的元素像BODY、P、H1和H2。此外，一个extra.css样式表给出较少共通的元素像CODE、BLOCKQUOTE和DFN。一个tables.css样式表可以用于定义变革元素的规则。这三个样式表在需要的时候可以使用@import
声明包括在HTML中。三个样式表也可以通过LINK元素组合。<br>
<br>
<br>
--------------------------------------------------------------------------------<br>
<br>
<strong>内联样式</strong><br>
样式可以使用STYLE属性内联。STYLE属性可以应用于任意BODY元素(包括BODY本身)，除了BASEFONT、PARAM和SCRIPT。这个属性将任何数量的CSS声明当作自己的值，而每个声明用分号隔开。以下是一个例子:<br>
<br>
<font color="#804000"><P STYLE="color: red; font-family: 'New Century Schoolbook',
serif"></font> 这段的样式是红色的New Century Schoolbook字，如果字体可用的话。</P><br>
<br>
注意在STYLE中New Century Schoolbook包含在单引号中，因为双引号被用作包含样式声明。<br>
<br>
内联的样式比其他方法更加灵活。要使用内联样式，必须使用Content-Style-Type
HTTP页眉扩展对整个文档进行单独的样式表语言声明。使用内联CSS的网页制作者必须将text/css作为Content-Style-Type
HTTP页眉，或在HEAD部分包括以下标记:<br>
<br>
<font color="#804000"><META HTTP-EQUIV="Content-Style-Type"
CONTENT="text/css"></font><br>
<br>
因为和需要展示的内容混合在一起，内联样式会失去一些样式表的优点。同样地，内联样式默认地接受所有媒体，因为没有任何的为内联样式指定明确的媒体的语句。这种方法应该尽量少用，如当一个样式会应用在所有媒体到一个元素的个别情况。如果样式会被应用到单一元素的场合，但只能使用确认的媒体的话，使用ID属性代替STYLE属性。<br>
<br>
<br>
--------------------------------------------------------------------------------<br>
<br>
CLASS属性<br>
CLASS属性用于指定元素属于何种样式的类。例如，样式表可以加入punk和warning类:<br>
<br>
<font color="#804000">.punk { color: lime; background: #ff80c0 }<br>
P.warning { font-weight: bolder; color: red; background: white }</font><br>
这些类可以使用CLASS属性在HTML中引用:<br>
<br>
<H1 CLASS=punk>属性扩展</H1><br>
<P CLASS=warning>一些属性扩展会有负值的边效果，产生于支持和不支持的浏览器上...<br>
<br>
在这个例子中，punk类可以用于任何BODY元素因为它在样式表中没有HTML元素关联。而在这个例子的样式表，warning类只能用于P元素。<br>
<br>
一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的warning类也可以命名为red，但如果网页制作者决定改变这个类的样式为别的颜色，或希望为那些使用PC喇叭的人定义为aural(听觉)样式的话，那么这个名字就变得毫无意义了。<br>
<br>
类会是应用样式到HTML文档中在结构上一样的部分的有效的办法。例如，本页使用类给CSS源代码和HTML源代码使用不同的样式。
<br>
<br>
<br>
--------------------------------------------------------------------------------<br>
<br>
ID属性<br>
ID属性用于定义一个元素的独特的样式。一个CSS规则如<br>
<br>
<font color="#804000">#wdg97 { font-size: larger }</font><br>
<br>
可以通过ID属性应用到HTML中:<br>
<br>
<font color="#804000"><P ID=wdg97>欢迎访问Web Design Group及TV water
168!</P></font><br>
<br>
整个文档当中的每个ID属性的值都必须是唯一的。其值必须是一个以字母开头紧接字母、识字或连字符。字母限于A-Z和a-z。<br>
<br>
注意HTML 4.0允许在ID属性中有句号，但CSS1不允许在ID选择符中有句号。也要注意CSS1允许Unicode字符161-255而且忽略Unicode字符为一个数字代码，但HTML
4.0不允许这些字符在一个ID属性值当中。<br>
<br>
当一个样式只需要在任何文档中应用一次时，使用ID是很适合的。 ID与STYLE属性相比，在于ID允许指定媒体的样式，而且也可以被应用于多个文档(虽然每个文档只用一次)。<br>
<br>
<br>
--------------------------------------------------------------------------------<br>
<br>
<strong>SPAN元素</strong><br>
SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用，而且它也能接受STYLE、CLASS和ID属性。<br>
<br>
SPAN是一个内联元素，所以它可以作为HTML中的元素如EM和STRONG使用。最重要的差别在于虽然EM和STRONG带有结构的意义，但SPAN就没有这样的意义。它的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用。<br>
<br>
一些SPAN例子如下:<br>
<br>
<font color="#804000"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><br>
<HTML><br>
<HEAD><br>
<TITLE>SPAN的例子</TITLE><br>
<STYLE TYPE="text/css" MEDIA="screen, print, projection"><br>
<!--<br>
.firstwords { font-variant: small-caps }<br>
--><br>
</STYLE><br>
</HEAD><br>
<BODY></font><br>
<P><SPAN CLASS=firstwords>The first few words</SPAN>前面是<br>
段落中少数的文字，会是小型大写字母。样式也可以内联，如改变文<br>
字的样式为<SPAN STYLE="font-family:
Arial">Arial</SPAN>.</P><br>
<br>
--------------------------------------------------------------------------------<br>
<br>
<strong>DIV元素</strong><br>
DIV元素在功能上与SPAN元素相似，最主要的差别在于DIV
("division"，"部分"的简称)是一个块级元素。DIV可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类，如章节、摘要或备注。例如:<br>
<br>
<DIV CLASS=note><br>
<H1>Divisions/部分</H1><br>
<P>DIV元素在HTML 3.2中有定义，但HTML 3.2中只有ALIGN属性能兼容。HTML
4.0在属性中加入CLASS、STYLE、和ID属性。</P><br>
<P>因为DIV可以包含其他块级集成，在用于建立文档的大型章节例如本备注是很有用的。</P><br>
<P>要求关闭标记。</P><br>
</DIV><br>
<br>
<br>
--------------------------------------------------------------------------------<br>
<br>
<strong>关于认证的备注</strong><br>
少数使用了CSS样式的文档能在HTML3.2 (Wilbur)层(在WDG网站，译者注)得到认证。HTML3.2不会解释SPAN元素，也不解释CLASS、STYLE或ID属性，而且在LINK和STYLE元素中也很少支持TYPE和MEDIA属性。<br>
<br>
这些有关的样式元素和属性对不支持的浏览器不会有害，因为它们能安全地忽略。文档使用这些元素和属性可以被认证防御于HTML
4.0。<br>
<br>
（未完）<br>
--------------------------------------------------------------------------------<br>
<br>
<br>
版权信息：本教程是根据W3C制定的CSS标准语法英文版本由<a href="mailto:water_tang@126.com">Water Tang</a>和<a href="mailto:tian_tang@126.com">Xianzhen
Liang</a>翻译而成的。<br>
由《<a href="http://pageone.yeah.net" target="_blank">网页设计师</a>》制作网页教程，你可以转载本教程，但请尊重译者和阿捷的辛勤劳动。<br>
转载时注明译者和教程出处。谢谢！</p>
<p align="right"> <a href="css11.htm">上一节</a> <a href="css13.htm">下一节</a> <a href="index.htm">返回dhtml栏目</a> <a href="../index.html">返回首页</a></td>
<td width="10%"></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><hr color="#000000" width="90%">
</td>
</tr>
<tr>
<td width="100%" align="center">《<a href="http://pageone.yeah.net">网页设计师</a>》
阿捷制作 </td>
</tr>
<tr>
<td width="100%" align="center"><font face="Arial">©1999-2000</font> <font face="Arial">All Rights Reserved</font></td>
</tr>
</table>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -