打印本文 打印本文 关闭窗口 关闭窗口
CSS教程(四)--样式选择器
作者:武汉SEO闵涛  文章来源:敏韬网  点击数877  更新时间:2009/4/23 13:47:31  文章录入:mintao  责任编辑:mintao

样式选择器可以用来套用在个别的属性标记上

类选择器(Class Selector)

定义类选择器,可让不同的标记套用相同的样式性质。其定义格式如下:

.类名 { 定义规则1; 定义规则2; ......; }

<html>
<head>
<style type="text/css">
<!--
.blueCenter { color:BLUE;
text-align:CENTER;
}

-->
</style>
</head>
<body>
<h3 class="blueCenter">本段文字设成蓝色并居中</h3>
<h2 class="blueCenter">本段文字设成蓝色并居中</h2>
</body>
</html>

注意 .blueCenter 前有一个点( .)


ID选择器(ID Selector)

ID选择器和类选择器的概念差不多,主要区别在于,在一个HTML文件中,ID只能出现一次。即:ID在整份文件中是只唯一的,而CLASS却可以多次套用。ID的定义如下:

#ID名称 { 定义规则1;定义规则2;......}

<html>
<head>
<style type="text/css">
<!--
#red { color:red }
#blue { color:blue}
-->
</style>
</head>
<body>
<h3 id="red">本段文字设成红色</h3>
<h2 id="blue">本段文字设成蓝色</h2>
</body>
</html>

上下文选择器(Contextual Selector)

上下文选择器则是按照特定的情况,另外定义一套样式规则。如下:

H1 EM (color:red}

上面的定义表示: 当<EM>...</EM>标记被包在<H1>...<H1>标记之间时,则将套用 H1 EM 定义的{color:red}规则。如:

<H1>特别重要的文字,我们将以<EM>红色斜体字</EM>表示</H1>

上面的“红色斜体字”由于符合H1 EM的上下文关系,故套用红色字体样式。

打印本文 打印本文 关闭窗口 关闭窗口