WebBuild

CSS手册简编系列二

作者:parno 日期:2007-06-14

字体大小: 小中大

CSS手册简编

三、样式单的语法特征

样式单有自己独特的书写方法，掌握了它的语法特征，再了解它的各种属性，那么你会发现在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
@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>

</style>
<body>
<p>利用<span class="bigFont">Class</span>和<span id="blueBack">ID</span>显示内容。</p>
</body>
</html>