CSS2参考之二（转贴）
三、样式单的语法特征
样式单有自己独特的书写方法，掌握了它的语法特征，再了解它的各种属性，那么你会发现在Web页面中运用样式单会是多么轻松。例如有一个最简单的HTML文档：
<html>
<body>
<p>Text goes here…<p>
</body>
</html>
我们可以用嵌入式样式单规定样式。
<html>
<style>
<!--
p {color:red; font-weight : bold}
- ->
</style>
<body>
<p>这里显示红色字</p>
</bdoy>
</html>
可以看到，在这个文档里，多了“Style”标记，之间用<!-- ……… - ->注释，以防止不能识别样式单的浏览器把样式单当作内容显示出来，然后是关键的一句：
p {color:red；font-weight : bold }
这整行称为一个声明（Statement），在样式单中，声明分为两种，一种是象这样的，叫做“rule set”，另一种则称为“at-rule”。
At-rule以“@”作为关键字，放在元素的最前面，at-rule通常用来对媒体（Media）的声明，并且如果对同一个at-rule进行声明，那么只有位置靠前的会起到作用，如：
@import "subs.css"
H1 {color:blue}
@import "list.css"
后一个At-Rule无效。
而rule set就象我们前面看到的样子了，它由几个部分组成，其中包括选择器、属性和属性值。一般的书写是这样的：
Selector1 {property1:value1; property2:value2;……}
Selector2 {……}
其中刚才例子中的“P”代表段落标记元素，为选择器，“{}”为一个块（Block），表示对标记属性的声明（Declaration），有多个属性的时候使用“;”隔开，属性在样式单中的一般表示方法是前面是一类属性的名称，后面是具体属性的名称，中间用“-”隔开，而在脚本中使用属性的时候，则把“-”去掉，并把第二部分的开头字母大写。属性值的表示可以使用10进制，16进制数值（如＃FFFFFF），百分数（如100%），字符串，URL（如url(http://www.mysite.com)）和RGB（如rgb(255,255,255)）等多种方式表示。下面我将对其中的重点部分进行更详细的解释：
1、选择器（Selector）
选择器不只是文档中的元素标记，它还可以是类（Class，这不同于Java或C＋＋中的类）、ID（给予元素特殊的名称，也便于在脚本中使用）或是元素的某种状态（如：a:link）。如：
<html>
<style>
<!--
p {color:red；font-weight : bold }
.bigFont {font-size:200%}
#blueBack {background-color:blue;color:yellow}
-->
</style>
<body>
<p>利用<span class="bigFont">Class</span>和<span id="blueBack">ID</span>显示内容。</p>
</body>
</html>
其中.someclass代表类，#someID代表ID。类和ID也可以和元素标记合用，比如：
p.bigFont {……}
则表示必须在某个为bigFont类的P标记（<p class="bigFont">）才执行样式单，同样的也适合于ID。
为了简化声明某些重复属性的标记，可以用“,”把不同的选择器隔开，表示它们都表示成相同的属性，如：
H1,H2 {color:red}
Div, p.mytext {……}
有时我们还希望能够在特定的范围内使样式单生效：
p em {color:red}
元素标记间又空格隔开，表示在<p>和</p>间的<em>、<em>用红色表示。另外还可以利用“~”表示一个选择器后面紧跟另一个选择器，并且两边以“/”围住：
/ Selector1 ~ Selector2/ {……}
表示如果Selector2紧跟着Selector1则使用该样式单。
2、属性值的单位
在样式单中，属性的单位多为长度单位，包括px（象素）、pt（磅）、em（一种排版中的单位，1em＝12pt）、mm（毫米）、cm（厘米）、pc（1pc＝12pt）、in（英寸），这些单位可以使用整数（如px）表示，也可以使用实数（如em）表示，并且元素中对数值还有继承（inherit）的关系比如：
body {font-size:12pt;
text-indent:3em;
}
H1 {font-size:15pt}
那么在显示中H1的text-indent属性就不是36pt而是45pt。
有的属性的单位甚至可以是负值，如margin，可以达到一些特殊的效果，如元素之间的重叠。
另外还有一些其他的单位如角度，它的单位有deg（度）、grad（梯度）和rad（弧度）；频率的单位，Hz和kHz，这些都是我们非常熟悉的。
3、注释及空格
样式单也有注释语句：可以用“/*……*/”作为注释标记，在浏览器中有一个对样式单的分析器，它负责对样式单的检查，分析器将忽略注释标记之间的内容。空格在样式单中是有效的，如果字符之间有超过一个空格存在，它将省略其余空格，而只保留一个，特别是在声明某些字体的时候，空格一定不能省略。
要注意的方面
首先，样式单是区分大小写的，所以要注意拼写；其次对于CSS2未声明的属性和方法，样式单的分析器会忽略它的存在，如：
H1 ,H2 {color:green}
H3 ,H4 & H5 {color:red}
P {color:blue ;font-variant:small-caps}
其中“&”是样式单中没有的标号，第二行整个被分析器略过，第三行中的font-variant不是一个合法属性，也被略过（“color:blue”有效）。
了解了以上规则，你就已经对样式单入门了，下面我将详细介绍样式单的各种属性及属性值。
样式单有自己独特的书写方法，掌握了它的语法特征，再了解它的各种属性，那么你会发现在Web页面中运用样式单会是多么轻松。例如有一个最简单的HTML文档：
<html>
<body>
<p>Text goes here…<p>
</body>
</html>
我们可以用嵌入式样式单规定样式。
<html>
<style>
<!--
p {color:red; font-weight : bold}
- ->
</style>
<body>
<p>这里显示红色字</p>
</bdoy>
</html>
可以看到，在这个文档里，多了“Style”标记，之间用<!-- ……… - ->注释，以防止不能识别样式单的浏览器把样式单当作内容显示出来，然后是关键的一句：
p {color:red；font-weight : bold }
这整行称为一个声明（Statement），在样式单中，声明分为两种，一种是象这样的，叫做“rule set”，另一种则称为“at-rule”。
At-rule以“@”作为关键字，放在元素的最前面，at-rule通常用来对媒体（Media）的声明，并且如果对同一个at-rule进行声明，那么只有位置靠前的会起到作用，如：
@import "subs.css"
H1 {color:blue}
@import "list.css"
后一个At-Rule无效。
而rule set就象我们前面看到的样子了，它由几个部分组成，其中包括选择器、属性和属性值。一般的书写是这样的：
Selector1 {property1:value1; property2:value2;……}
Selector2 {……}
其中刚才例子中的“P”代表段落标记元素，为选择器，“{}”为一个块（Block），表示对标记属性的声明（Declaration），有多个属性的时候使用“;”隔开，属性在样式单中的一般表示方法是前面是一类属性的名称，后面是具体属性的名称，中间用“-”隔开，而在脚本中使用属性的时候，则把“-”去掉，并把第二部分的开头字母大写。属性值的表示可以使用10进制，16进制数值（如＃FFFFFF），百分数（如100%），字符串，URL（如url(http://www.mysite.com)）和RGB（如rgb(255,255,255)）等多种方式表示。下面我将对其中的重点部分进行更详细的解释：
1、选择器（Selector）
选择器不只是文档中的元素标记，它还可以是类（Class，这不同于Java或C＋＋中的类）、ID（给予元素特殊的名称，也便于在脚本中使用）或是元素的某种状态（如：a:link）。如：
<html>
<style>
<!--
p {color:red；font-weight : bold }
.bigFont {font-size:200%}
#blueBack {background-color:blue;color:yellow}
-->
</style>
<body>
<p>利用<span class="bigFont">Class</span>和<span id="blueBack">ID</span>显示内容。</p>
</body>
</html>
其中.someclass代表类，#someID代表ID。类和ID也可以和元素标记合用，比如：
p.bigFont {……}
则表示必须在某个为bigFont类的P标记（<p class="bigFont">）才执行样式单，同样的也适合于ID。
为了简化声明某些重复属性的标记，可以用“,”把不同的选择器隔开，表示它们都表示成相同的属性，如：
H1,H2 {color:red}
Div, p.mytext {……}
有时我们还希望能够在特定的范围内使样式单生效：
p em {color:red}
元素标记间又空格隔开，表示在<p>和</p>间的<em>、<em>用红色表示。另外还可以利用“~”表示一个选择器后面紧跟另一个选择器，并且两边以“/”围住：
/ Selector1 ~ Selector2/ {……}
表示如果Selector2紧跟着Selector1则使用该样式单。
2、属性值的单位
在样式单中，属性的单位多为长度单位，包括px（象素）、pt（磅）、em（一种排版中的单位，1em＝12pt）、mm（毫米）、cm（厘米）、pc（1pc＝12pt）、in（英寸），这些单位可以使用整数（如px）表示，也可以使用实数（如em）表示，并且元素中对数值还有继承（inherit）的关系比如：
body {font-size:12pt;
text-indent:3em;
}
H1 {font-size:15pt}
那么在显示中H1的text-indent属性就不是36pt而是45pt。
有的属性的单位甚至可以是负值，如margin，可以达到一些特殊的效果，如元素之间的重叠。
另外还有一些其他的单位如角度，它的单位有deg（度）、grad（梯度）和rad（弧度）；频率的单位，Hz和kHz，这些都是我们非常熟悉的。
3、注释及空格
样式单也有注释语句：可以用“/*……*/”作为注释标记，在浏览器中有一个对样式单的分析器，它负责对样式单的检查，分析器将忽略注释标记之间的内容。空格在样式单中是有效的，如果字符之间有超过一个空格存在，它将省略其余空格，而只保留一个，特别是在声明某些字体的时候，空格一定不能省略。
要注意的方面
首先，样式单是区分大小写的，所以要注意拼写；其次对于CSS2未声明的属性和方法，样式单的分析器会忽略它的存在，如：
H1 ,H2 {color:green}
H3 ,H4 & H5 {color:red}
P {color:blue ;font-variant:small-caps}
其中“&”是样式单中没有的标号，第二行整个被分析器略过，第三行中的font-variant不是一个合法属性，也被略过（“color:blue”有效）。
了解了以上规则，你就已经对样式单入门了，下面我将详细介绍样式单的各种属性及属性值。
- 没有相关文章
- 没有评论
