第二节CSS层叠样式表学习之配置

第二节CSS层叠样式表学习之配置

CSS样式规则选择器：

选择器定义了HTML当中某条CSS影响的规则。

一、HTML 元素选择器

如果设置 HTML 的样式，选择器通常将是网页中所有的某个 HTML 元素全部进行设置，例如 p、h1、em、a，甚至可以是 html 本身：

1

2

3

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

二、类选择器

如果要将一种HTML标签所创建的各个网页元素分成几类，需要将这个HTML标签的class属性设置为不同的值。

例如段落标签<p></P>,如果想让不同的段落显示的效果不一样就可以这样设置。

1

2

3

</pclass="classSelector1">class selector 1</p>

</pclass="classSelector2">class selector 2</p>

</pclass="classSelector3">class selector 3</p>

在样式中，可以分别为某个HTML标签的各个类别定义样式规则：

1

2

3

4

5

<style>

    p.classSelector1{color:red}

    p.classSelector2{color:yellow}

    p.classSelector3{color:green}

</style>

在样式表中，可以为某个被别的所有HTML标签定义样式规则：

例如：

1

2

3

<style>

    classBlue.classSelector1{color:blue}

</style>

这个表示对HTML标签中CSS样式设置为classBlue的所有标签都起作用。

例如：

1

2

<h1class="classBlue">蓝色的h1标题</h1>

<pclass="classBlue">蓝色的h1标题</p>

三、ID选择器

ID属性用来定义某种特定的HTML元素，一个网页文件中只能有一个元素能使用某个ID属性值，ID选择器就是为样式规则定义语句选择具有某个ID属性值的HTML元素。

在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。类选择器通常是用来定义一组具有形同属性的HTML元素。

语法

首先，ID 选择器前面有一个 # 号 – 也称为棋盘号或井号。

1

*#intro {font-weight:bold;}

与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：

1

#intro {font-weight:bold;}

这个选择器的效果将是一样的。

第二个区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。

1

<pid="intro">This is a paragraph of introduction.</p>

例子：

1

<spanid="yellowone">text here color is yellow</span>

这样式表中，ID值为yellowone的HTML元素的样式规则定义语句如下：

1

2

3

4

5

<style>

<!--

    #yellowone{color:yellow}

-->

</sytle>

备注：

1. ID 选择器只能为单个HTML标签元素设置样式规则，因此具有一定的局限性，在CSS中应该尽量少用。JavaScript和CSS-P可以根据这个ID值来操纵和定位这个特定的HTML标签，所以ID属性在JavaScript中会被广使用。
2. 如果网页只在某种特定媒介上输出时，才需要对某个单一元素进行样式配置的话，应该使用ID 选择器代替直接设置HTML元素的style属性的内联样式表。
3. 在网页中使用了嵌入和链接样式表后，对某个元素的显示效果需要对样式表中已经定义的相关样式重新设置，这就要用到使用内联样式表来直接设置HTML元素的style属性。

四、关联选择器

1.关联选择器是指一个用空格隔开的两个或更多的单一选择器组成的字符串，例如：

1

p em{background:yellow}

其中的“p em”就是关联选择器，它表示段落中的强调文本（<em></em>标签对的内容）的背景为黄色，而其它地方出现的强调文本则不受影响。

2.关联选择器定义的样式规则的优先级比单一选择器定义的样式规则的优先级高即使在

1

p em{background:yellow}

的后面定义了如下样式规则：

1

em{background:green}

但是，在段落标签（<p>）中定义的强调文本仍然用yellow为背景色。

五、组合选择器

为了减少样式表的重复声明，可以在一条样式规则定义语句中组合若干个选择器，每个选择器之间用逗号（,）分隔。例如

1

h1,h2,h3,h,h5,h6,td{color,red;}

六、伪元素选择器

伪元素选择器是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。例如，对于超链接标签（<a></a>）的正常状态（没有任何动作前）、访问过的状态、选中状态、光标移到超链接文本上的状态，对于段落的首字母和首行，都可以用伪元素选择器来定义。

使用伪元素作为选择器的样式规则定义格式：

HTML元素:伪元素{属性:值}

常用的伪元素：

a:active选中超链接时的状态

a:hover光标移动到超链接上的状态

a:link超链接的正常状态（没有任何动作前）

a:visited访问过的超链接状态

p:first-line 段落中的第一行文本

p:first-letter段落中的第一个字母

类选择器与伪元素一起使用的格式：

HTML元素 类名:伪元素{属性:值}

这个表示HTML元素下的某个类名的伪元素有效。

|2|1

文章分页

««第一节CSS层叠样式表学习之概述