<!--
css样式选择器
HTML选择器
类选择器
ID选择器
关联选择器
组合选择器
伪元素选择器
selector{ /* selector是样式选择器
property:value; /* color：red;
property:value; /* font-size:4cm;
.....
}
selector当定义一条样式规则时，必须指定受这条样式规则作用的网页元素，在一条规则中定义的网页元素就是selector（选择器），也就是选择该样式规则作用于的网页元素。
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css样式选择器</title>
<!--HTML选择器-->
<style>
p{
color:#000000;
font-size:2cm;
}
</style>
<!--类选择器
同一个选择器能有不同的类，因而允许同一个元素有不同的样式
定义方法
[tag].类名（类名是自定义的，如果不加则代表所有HTML元素）
<tag class="类名1 类名2 类名3">
-->
<style>
p.cl1{
color:#0000CC;
font-size:2cm;
}
p.cl2{
color:#00FF00;
font-size:3cm;
}
.cl3{
color:#FF00FF;
font-size:4cm;
}
</style>
<!--
ID选择器
在HTMl页面中，ID属性指定了某个单一元素，ID属性就是用来对单一元素定义单独样式
一个HTML页面中。ID属性值要唯一
定义方法
#idname{ }
用：<tag id="idname">
-->
<style>
#id1{
color:#0000FF;
font-size:2cm;
}
</style>
<!--关联选择器
关联选择器只不过是一个用空格隔开的两个或更多的单一选择器组成的字符串
必须按关联关系使用，不能有反顺序
只要能保持关联关系可以，不管是在多少层
-->
<style>
div #id1 .cl1 p{
color:#0000FF;
font-size:2cm;}
</style>
<!--组合选择器
为了减少样式表的重复声明，组合是允许的
只要使用英文逗号（,）隔开每个选择符
-->
<style>
p,d,div{
background-color:#0033FF;
}
</style>
<!--
伪元素选择器是指对同一个HTML元素在不同的状态下的一种定义状态
目前只有a和p两个HTML元素可以使用
使用时的语法
标签:伪元素
例：a:link a标签在没有任何运作前的状态
a：hover 光标移动到超链接的状态
a:active 选择超链接的状态
a:visited 访问过超链接的状态
p:first-letter 一个段落中首个字母的状态
p:first-line 一个段落中首行的状态
-->
<style>
a.one:link{
color:green;
font-size:1cm;
}
a.one:hover{
color:red;
font-size:2cm;
}
a.one:active{
color:blue;
font-size:3cm;
}
a.one:visited{
color:yelow;
font-size:5cm;
}
a.two:link{
color:yellow;
font-size:1cm;
}
a.two:hover{
color:green;
font-size:2cm;
}
a.two:active{
color:red;
font-size:3cm;
}
a.two:visited{
color:blue;
font-size:5cm;
}
p:first-letter{
color:red;
font-size:3cm;
}
p:first-line{
color:yellow;
font-size:1cm;
}
</style>
</head>
<body>
<p>
1111111111111111111111111111111111111111111111111<br /> 1111111111111111111111111111111111111111111111111<br />
1111111111111111111111111111111111111111111111111</p><br />
<b class="cl1">aaaaaaaaaa</b><br />
<b class="cl2">bbbbbbbbbb</b><br />
<b class="cl3">cccccccccc</b><br />
<b class="cl1">dddddddddd</b><br />
<b class="cl2">eeeeeeeeee</b><br />
<b class="cl3">hhhhhhhhhhhhhh</b><br />
<b id="id1">ddddddddddddddd</b><br />
<div>
<div id="id1">
<div class="cl1">
<p>wwwwwwwwwwww</p>
</div>
</div>
</div>
<a class="one" href="../1/11.html">1.html</a><br />
<a class="two" href="../2/21.html">2.html</a>
</body>
</html>