最近评论
正在载入评论列表...
3.2 文档起始位置总体声明样式
这种声明方式的标志是成对<style>元素所囊括的部分。虽然通常设计者都把<style>元素放置在<head>部分中，但是如果设计者把<style>元素放置在其他位置，浏览器同样可以识别这些样式标志。
示例3.5演示了<style>元素的标准定义方法。
示例3.5
<html>
<head>
<!--其他文档头部信息-->
<style>
/*CSS样式表属性定义*/
</style>
</head>
<body>
<!--文档正文内容-->
</body>
</html>
一个html文档中可以有一个甚至多个<style>元素来定义样式表，根据层叠和覆盖原则，后定义的样式将覆盖先前定义的样式。在<style>元素中，CSS属性定义方法如示例3.6所示。
示例3.6
<style>
元素或选择符名称 { 属性: 属性值; 属性: 属性值; …… }
元素或选择符名称 { 属性: 属性值; 属性: 属性值; …… }
元素或选择符名称 { 属性: 属性值; 属性: 属性值; …… }
……
</style>
总体声明样式和行内样式定义稍有不同，它需要首先列出元素或者选择符名称，然后跟上一对“{}”符号。在“{}”符号里，参照行内定义样式定义属性和属性值。
示例3.7演示了声明元素样式的方法。
示例3.7
<style>
body { background-color: #AA0000; color: gold; }
li { line-height: 1.5em; }
</style>
示例3.8演示了使用选择符名称声明样式的代码范例，每一种定义占据一行。
示例3.8
<style>
p:first-letter { font-size: 500%; align: left; }
a:hover { text-decoration: none; }
#uniqueid { cursor: help; }
.myclass { border: solid 1px #000000; }
</style>
除了元素和选择符，<style>元素内可以一次将若干样式定义到多个样式或者选择符中。这就是所谓的编组。示例3.9演示了编组方式。
示例3.9
<style>
p:first-letter, a:hover, #uniqueid, .myclass { color: red; }
</style>
首行伪类、鼠标悬停链接伪类、ID选择符和class选择符将全部显示为红色，它们之间用英文半角空格分隔，样式只需要定义一遍即可。如果用行内定义方式，则无法进行编组，这是<style>元素定义样式的优势所在。
|
注 意 |
||
|
|
逗号之后可以有空格，也可以忽略空格不写。 |
|
除了编组，<style>元素还支持选择性定义样式。示例3.10演示了这种定义方法。
示例3.10
<style>
em { background-color: #CCCCCC; }
p em { text-decoration: underline; font-style: italic; }
</style>
如图3.2所示，第1行定义文档中所有<em>元素显示为灰色背景色，而只有在<p>元素内的<em>元素同时显示为下划线和斜体。
图3.2 特定样式定义
因此，只要在若干个元素或者选择符之间添加空格而不是逗号，就构成了条件样式语句。只有在后者是前者的子元素情况下，这条属性才会生效。
除了以上两种类型的定义在行内无法完成，当设计者运用“@import”或者“!important”规则的时候，同样也只能在<style>元素中定义，具体定义方法详见相关章节介绍。
当作用于一个元素里的属性和属性值过多，就会导致一行文本过长，难以阅读和查看。此时设计者可以把每一个成对的“属性: 属性值;”分行编写。示例3.11演示了这样的编写 格式。
示例3.11
<style>
元素、选择符名称 { 属性: 属性值;
属性: 属性值;
属性: 属性值;
…… }
……
</style>
CSS定义格式还是非常自由的，设计者可以在需要的地方换行，不必拘泥于一个属性占用一行空间，例如，示例3.12的写法同样有效。
示例3.12
<style>
div { background-color: #FFFFFF; color: #000080;
font-size: 10pt; font-weight: bold;
border-style: dotted; border-width: 1px; border-color: #800000; }
</style>
有关颜色的属性都在第1行定义，第2行定义有关字体属性，第3行定义边框属性，这样的定义方法也是允许的。
|
注 意 |
||
|
|
“{}”符号之间的或前后的，以及冒号、逗号后的空格都可以忽略不写。 |
|
行内定义样式会覆盖<style>元素的定义。示例3.13演示了这种覆盖效果，效果如图3.3所示。
示例3.13
<html>
<head>
<title>CSS Demo</title>
<style>
em { background-color: #CCCCCC; }
p em { text-decoration: underline; font-style: italic; }
</style>
</head>
<body>
<h3>包含<em style="background-color: #FFFFFF;">强调语句</em>的标题</h3>
<p>包含<em>强调语句</em>的文本。
<ol>
<li>包含<em style="font-style: normal;">强调语句</em>的列表项目
<li>包含<em>强调语句</em>的列表项目
<li>包含<em>强调语句</em>的列表项目
</li>
</ol>
</body>
</html>
图3.3 行内样式优先级高于<style>元素定义
如图3.3所示，在行内定义的若干属性已经将<style>定义的原样式覆盖，有的去除了背景色（<h3>元素里的<em>），有的去除了斜体字体样式（<li>元素里的<em>）。
