样式表

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>无标题文档</title>
 4 <link href="css-1.css" rel="stylesheet" type="text/css" />
 5 </head>
 6 
 7 <body>
 8 1.css 叠层样式表  美化HTML   /*注释*/ 
 9 <div style="background-color:#3F0">内联样式表  style</div>
10 2.内嵌样式表  必须写在head标签里面
11 <p>春来了！</p>
12 <p>春天花会开！</p>
13 3.外部样式表
14 <div class="aa" id="a1"></div>
15 <div class="aa" id="a2"></div>
16 <div class="aa" id="a3"></div>
17 <div class="aa" id="a4"></div><br />
18 一般相同的用class，不同的用id<br />
19 标签名用,隔开表示并列，用 隔开表示后代，用.表示筛选<br />
20 <a href="http://www.baidu.com/">百度一下</a>
21 <a class="a" href="http://www.baidu.com/" target="_blank">百度一下</a><br />
22 </body>

 1 p/*针对所有p标签内嵌样式表*/
 2 {
 3     font-size:36px;/*字体大小*/
 4     color:#FF0;/*文字颜色*/
 5     background-color:#0F3/*背景颜色*/}
 6 .aa
 7 {
 8     width:300px;
 9     height:200px;
10     border:1px solid #F00;}
11 #a1
12 {
13     background-color:#0F6;}
14 #a2
15 {
16     background-color:#F00;}
17 #a3
18 {
19     background-color:#906;}
20 #a4
21 {
22     background-color:#00C;}
23 .a:link
24 {
25     text-decoration:none;
26     color:#000;}
27 .a:visited
28 {
29     text-decoration:none;
30     color:#000;}
31 .a:hover
32 {
33     text-decoration:underline;
34     color:#F00;}
35 .a:active
36 {
37     text-decoration:underline;
38     color:#00F;}