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;}