1.如何将页面和CSS样式文件进行关联
将页面Head部分修改成如下即可：
<head runat="server">
<title>The Test</title>
<link href="CSS.css" rel="Stylesheet" type="text/css" />
</head>
2.css中的选择器
（1）简单选择器（仅描述html的元素）
body {
background-color:red;
}
(2)id选择器(html元素的id属性，唯一)
#myid {
background-color:red;
}
(3)class选择器(html元素的class属性)
.myclass {
background-color:red;
}
(4)多个html元素共用一个样式的定义
body,table,tr,td {
background-color:#000000;
}
css选择器的高级部分
CSS的选择器这里你将学习到CSS中选择器的应用,有些是经常使用的,如组选择器,组合选择器,后代选择器.另外,
其他一些有时用作CSS Hack用(某些选择器IE6及其以下版本不支持).下面是要介绍的选择器列表:
A.组选择器
B.组合选择器
C.自身选择器
D.后代选择器
E.临近选择器
F.子代选择器
G.属性选择器
选择器的目的:减少class和id的滥用,使CSS文档结构和网页文档结构更加清晰,方便维护和管理
介绍这些选择器之前,我们规定下书写:
label:表示标签,比如<p>,<div>,<ul>等等
mix:表示标签,class名,id名其中的一个(class名是某个标签的class属性的属性值,id名是某个标签的id属性的属性值)
1.组选择器:
格式:用逗号分割,mix,mix,mix{..}
功能:多个标签(或id或class)共用一个样式
比如:
<h1></h1>
<div id="test"></div>
<p class="test2"></p>
<p class="test2">
<span></span>
</p>
h1,#test,.test2,span将控制上面所有的标签
2.组合选择器:(这个是我给的名称,本质是一个标签运用多个class样式)
格式:<label class="样式名1 样式名2...."></label> class之间用空格隔开
功能:该标签同时拥有多个样式,也就是被多个样式共同作用
比如:
.color{
color:yellow;
background:green;
}
.box{
200px;
height:100px;
text-align:center;
}
<p class="color box">today,i feel happy.</p>
这里p标签受color 和 box 两个样式共同作用
3.自身选择器:(不常用,因为多数用到class属性时就是为了构成样式组.这里只是添加了元素限定而已.官方建议写class时省略其标签)
格式:label.class名
功能:限定本标签样式,不同于其他运用这个class的标签.
比如:p.test是作用在<p class="test"></p>标签上,而其他运用test样式按照test样式
4.后代选择器:
格式:mix mix(一般第一个mix很少用class,毕竟选择器本着减少class和id的目的)
作用:它们之间有空格,控制第一个mix的后代mix,后代不一定要子代,可以深层嵌套
比如:
<div id="test">
<p id="test2"></p>
<p>
<span></span>
</p>
<h1 class="test3"></h1>
<div>
#test #test2控制<p id="test2"></p>样式(当然这种写法很少用,毕竟都有id了,可以直接控制#test2);
#test span控制<span></span>样式,这里span是深层的后代;
#test .test3控制<h1 class="test3"></h1>样式
常用:(2种)
#id名 label
label label
5.临近选择器(IE6及其以下版本不支持,IE7已提供支持):
格式:mix+label
作用:mix的下一个兄弟指定标签的样式控制
比如:
<div id="test">
<h1></h1>
</div>
<p></p>
<p></p>
#test+p将控制#test后第一个p标签的样式
常用:(2种)
#id名+label
label+label
6.子代选择器(IE6及其以下版本不支持,IE7已提供支持):
格式:mix>label
作用:mix的第一代孩子指定标签的样式控制
比如:
<div id="test">
<p></p>
<div>
<p></p>
</div>
<p></p>
</div>
#test>p将控制第一代的p标签,也就是上面例子的第一个p和最后一个p标签.嵌套的p标签(第二个)不受该样式控制
常用:(2种)
#id名>label
label>label
7.属性选择器(IE6及其以下版本不支持,IE7已提供支持):
属性选择器包括下面4个方面:
元素[属性]{}(相对于后面几个很少用)
元素[属性="xx"]{}
元素[属性~="xx"]{}
元素[属性|="xx"]{}
它们具体功能和用法如下:
<div class="test1"></div>
<div class="test2"></div>
<div class="test1 test2"></div>
<div class="test-1"></div>
div[class]将匹配上面三个div
div[class="test1"]匹配第一个div,也就是限定了class值必须是test1
div[class~="test1"]匹配第一个和第三个div,~表示了属性值中有一个满足即可
div[class|="test"]匹配最后一个div,~表示了属性检查单个属性值全部,并支持比较连字符之前比较
由于这个功能很少用,不深入介绍了,需要的理解和深入可以搜索.
重点:组选择器,组合选择器,后代选择器;
次重点:自身选择器,后代选择器,临近选择器,子代选择器.
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/tpf01/archive/2008/08/24/2822601.aspx