css网站布局实录学习笔记第二部分XHTML与CSS基础

2020-04-30 14:53:01易采站长站整理

复制代码
p {
text-align: center;
color: black;
font-family: arial;
}

同样,一个id或class也能通过相同的形式编写样式。

2.6.2 类型选择符

上面的body {}便是一种类型选择符。类型选择符是指以网页中已有的标签名作为名称的选择符。如:body{}、div{}、span{}等。

2.6.3 群组选择符

除了可以对单个XHTML对象进行样式指定外,同样可以对一组对象进行相同的样式指派。例如:

复制代码
h1, h2, h3, p, span {
font-size: 12px;
font-family: arial;
}

使用逗号对选择符进行分隔,使得页面中所有的h1, h2, h3, p, span都将具有相同的样式定义。这样做的好处是,对页面中需要使用相同样式的地方,只需书写一次样式表即可,从而减少代码量,改善CSS代码的结构。

2.6.4 包含选择符

当只打算对某个对象的子对象进行样式指定时,包含选择符就派上用处了。包含选择符指选择符组合中前一个对象包含了后一个对象,对象之间使用空格作为分隔符。例如:

复制代码
h1 span {
font-weight: bold;
}

对h1下面的span进行了样式指派,h1标签下的span标签将被应用font-weight: bold的样式设置。值得注意的是,仅仅对有此结构的标签有效,而对单独存在的h1或者span以及其他非h1标签下属的span则均不会应用到此样式。

包含选择符除了可以二者包含,也可以多级包含,但是为了代码清晰,可读性高,一般不提倡这样做。

2.6.5 id及class选择符

id及class均是CSS提供由用户自定义标签名称的选择符,用户可以使用选择符id及class来对页面中的XHTML标签进行自定义名称。

2.6.6 标签指定式选择符

如果既想使用id或class,也想同时使用标签选择符,那么可以使用如下格式:

h1#content {}: 表示针对所有id为content的h1标签进行指派。

h1.p1 {}: 表示针对所有class为p1的h1标签进行定义。

标签指定式选择符在对标签选择的精确度上介于标签选择符及id/class选择符之间。

2.6.7 组合选择符

对于上述所有CSS选择符而言,无论什么样的选择符,均可以进行组合使用。比如:

h1 .p1 {}: 表示h1标签下的所有class为p1的标签。

#content h1 {}: 表示id为content的标签下的所有h1标签。

h1 .p1, #content h1 {}: 对以上二者进行群组选择。

h1#content h2 {}: 表示id为content的h1标签下的h2标签。

2.6.8 伪类及伪对象

伪类及伪对象是一种特殊的类和对象,它由CSS自动支持,属CSS的一种扩张型类和对象。伪类及伪对象的名称不能被用户自定义,使用时只能够按标准格式进行应用。

伪类及伪对象由以下两种形式组成:

选择符   指伪类