当前位置: 代码迷 >> HTML/CSS >> 传智播客 张鹏 带你一周hold住htmlcss 第21讲 css选择符详解
  详细解决方案

传智播客 张鹏 带你一周hold住htmlcss 第21讲 css选择符详解

热度:205   发布时间:2012-09-25 09:55:58.0
传智播客 张鹏 带你一周hold住htmlcss 第21讲 css选择符详解!
传智播客(  http://icd.itcast.cn/)是一家网页平面设计培训学院,专注于网页设计培训,平面设计培训,fash培训,ui设计培训。

 

网页设计视频教程下载地址:http://icd.itcast.cn/icd/video.shtml?from=wl

 

CSS选择符用于指定一个样式表应用在哪个或哪些HTML标签上。内部样式表和外部样式表就是通过选择符把定义的样式应用在HTML文档中的。

选择符有多种,它们有不同的用法。

(1) 类型选择符

和标签同名的选择符就是类型选择符。它表示把样式表应用在与选择符同名的标签上。

例如:

body {
    font-size:20px; color:red;
}

body”是一个类型选择符,它和 <body> 标签同名,所以这个样式表将应用于 <body> 标签上。

说明:类型选择符可以作用于多个标签上,比如,用 p 作为选择符定义样式表,则这个样式表将作用于文档中所有 <p> 标签上。

(2) ID选择符

ID选择符把样式表应用于拥有指定ID属性的标签上。

#选择符名

这种选择符以“#”开头,选择符名应该和某标签的id属性值相同。

例如:

<style type="text/css">
#d1 {
    font-size: 20px; color: blue; font-weight: bold;
}
</style>
……
……
<div id="d1">……</div>

#d1”是一个ID选择符,它表示把样式表将应用于具有 id="d1" 属性的标签上。

说明:多数标签都可以设置id属性,用于标识一个标签。由于在一个网页中,不能有id值相同的标签,所以ID选择符只能作用于单一的标签上。

(3) 类选择符1

类选择符把样式表应用于同一类标签上。

.选择符名

这种选择符以“.”开头,选择符名应该和标签的class属性值相同。

例如:

<style type="text/css">
.txt {
    color: blue; background-color: yellow;
}
</style>
……
……
<p class="txt">……</p>
<div class="txt">……</div>

.txt”是一个类选择符,它表示把样式表将应用于具有 class="txt" 属性的标签上。

说明:多数标签都可以设置class属性,这些标签可以是不同的标签,而且在一个网页中,可以有多个class值相同的标签,所以类型选择符可以作用于多个不同的标签上。

(4) 类选择符2

这种类选择符把样式表应用于同一类型的同一类标签上。

类型名.选择符名

类型名是和标签同名的名字,选择符名应该和标签的class属性值相同。

例如:

<style type="text/css">
div.txt {
    color: blue; background-color: yellow;
}
</style>
……
……
<p class="txt">……</p>
<div class="txt">……</div>

div.txt”是一个类选择符,它表示把样式表将应用于具有 class="txt" 属性的 <div> 标签上。

说明:这种类选择符的作用范围比第一种类选择符小,它除了指定类之外,还指定了类型。所以上例中虽然 <p> 标签和 <div> 标签拥有相同的class属性,但 div.txt 选择符只作用于 <div> 标签上。

(5) 包含选择符

这种选择符是多个选择符的组合,把样式表应用于哪些满足条件的标签上。

选择符1 选择符2 ……

各选择符之间用空格隔开,它定义的样式表应用在包含各个选择符的最内一层的标签上。

例如:

<style type="text/css">
#d1 .txt {
    color: blue; background-color: yellow;
}
</style>
……
……
<div id="d1">
<p class="txt">……</p>
<p>……</p>
</div>

#d1 .txt”是一个包含选择符,它表示把样式表将应用在具有 id="d1" 属性的标签内部的具有 class="txt" 属性的标签上。在例子中,第一个 <p> 标签满足条件,应用这个样式,第二个 <p> 标签不满足条件,不应用这个样式。

说明:复杂网页一般采用分块的设计方式,包含选择符一般用于定义一个区块中标签的样式,这样可方便各区块的独立设计。