CSS样式选择器

  1 <!--
  2 css样式选择器
  3     HTML选择器
  4     类选择器
  5     ID选择器
  6     关联选择器
  7     组合选择器
  8     伪元素选择器
  9     
 10 selector{                    /* selector是样式选择器
 11     property:value;          /* color：red;
 12     property:value;          /*  font-size:4cm;
 13     .....
 14     }
 15     
 16 selector当定义一条样式规则时，必须指定受这条样式规则作用的网页元素，在一条规则中定义的网页元素就是selector（选择器），也就是选择该样式规则作用于的网页元素。
 17 
 18 
 19 
 20 
 21 -->
 22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 23 <html xmlns="http://www.w3.org/1999/xhtml">
 24 <head>
 25 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 26 <title>css样式选择器</title>
 27 <!--HTML选择器-->
 28 <style>
 29     p{
 30     color:#000000;
 31     font-size:2cm;
 32     }
 33 </style>
 34 
 35 <!--类选择器
 36 同一个选择器能有不同的类，因而允许同一个元素有不同的样式
 37 定义方法
 38     [tag].类名（类名是自定义的，如果不加则代表所有HTML元素）
 39     <tag class="类名1 类名2 类名3">
 40 -->
 41 <style>
 42     p.cl1{
 43     color:#0000CC;
 44     font-size:2cm;
 45     }
 46     p.cl2{
 47     color:#00FF00;
 48     font-size:3cm;
 49     }
 50     .cl3{
 51     color:#FF00FF;
 52     font-size:4cm;
 53     }
 54 </style>
 55 
 56 <!--
 57 ID选择器
 58 在HTMl页面中，ID属性指定了某个单一元素，ID属性就是用来对单一元素定义单独样式
 59 一个HTML页面中。ID属性值要唯一
 60 定义方法
 61     #idname{ }
 62 用：<tag id="idname">
 63 
 64 -->
 65 <style>
 66     #id1{
 67     color:#0000FF;
 68     font-size:2cm;
 69     }
 70 </style>
 71 <!--关联选择器
 72 关联选择器只不过是一个用空格隔开的两个或更多的单一选择器组成的字符串
 73 
 74 必须按关联关系使用，不能有反顺序
 75 
 76 只要能保持关联关系可以，不管是在多少层
 77 
 78 -->
 79 <style>
 80     div #id1 .cl1 p{
 81     color:#0000FF;
 82     font-size:2cm;}
 83 </style>
 84 
 85 <!--组合选择器
 86 为了减少样式表的重复声明，组合是允许的
 87 只要使用英文逗号（,）隔开每个选择符
 88     
 89 -->
 90 <style>
 91     p,d,div{
 92     background-color:#0033FF;
 93     }
 94 </style>
 95 
 96 <!--
 97 伪元素选择器是指对同一个HTML元素在不同的状态下的一种定义状态
 98 目前只有a和p两个HTML元素可以使用
 99 使用时的语法
100     标签:伪元素
101     例：a:link            a标签在没有任何运作前的状态
102         a：hover          光标移动到超链接的状态
103         a:active          选择超链接的状态
104         a:visited         访问过超链接的状态
105         p:first-letter    一个段落中首个字母的状态
106         p:first-line      一个段落中首行的状态
107         
108         
109 -->
110 <style>
111     a.one:link{
112         color:green;
113         font-size:1cm;
114     }
115     a.one:hover{
116         color:red;
117         font-size:2cm;
118     }
119     a.one:active{
120         color:blue;
121         font-size:3cm;
122     }
123     a.one:visited{
124     color:yelow;
125     font-size:5cm;
126     }
127     
128     a.two:link{
129         color:yellow;
130         font-size:1cm;
131     }
132     a.two:hover{
133         color:green;
134         font-size:2cm;
135     }
136     a.two:active{
137         color:red;
138         font-size:3cm;
139     }
140     a.two:visited{
141     color:blue;
142     font-size:5cm;
143     }
144     p:first-letter{
145     color:red;
146     font-size:3cm;
147     }
148     p:first-line{
149     color:yellow;
150     font-size:1cm;
151     }
152 </style>
153 </head>
154 
155 <body>
156     <p>
157 1111111111111111111111111111111111111111111111111<br />                        1111111111111111111111111111111111111111111111111<br />
158 1111111111111111111111111111111111111111111111111</p><br />
159     <b class="cl1">aaaaaaaaaa</b><br />
160     <b class="cl2">bbbbbbbbbb</b><br />
161     <b class="cl3">cccccccccc</b><br />
162     <b class="cl1">dddddddddd</b><br />
163     <b class="cl2">eeeeeeeeee</b><br />
164     <b class="cl3">hhhhhhhhhhhhhh</b><br />
165     <b id="id1">ddddddddddddddd</b><br />
166     <div>
167         <div id="id1">
168             <div class="cl1">
169                 <p>wwwwwwwwwwww</p>
170             </div>
171         </div>
172     </div>
173     <a class="one" href="../1/11.html">1.html</a><br />
174     <a class="two" href="../2/21.html">2.html</a>
175 </body>
176 </html>