CSS手册简编:选择器的使用方法

CSS手册简编:选择器的使用方法

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、注释及空格

样式单也有注释语句:可以用”/*……*/”作为注释标记,在浏览器中有一个对样式单的分析器,它负责对样式单的检查,分析器将忽略注释标记之间的内容。空格在样式单中是有效的,如果字符之间有超过一个空格存在,它将省略其余空格,而只保留一个,特别是在声明某些字体的时候,空格一定不能省略。

第 1 2 页

CSS手册简编:选择器的使用方法

相关文章:

你感兴趣的文章:

标签云: