CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”。CSS的定义是由三个部分构成: 选择符(selector)，属性(properties)和属性的取值(value)。  

语法格式: selector {property: value} (选择符 {属性:值})

  1、优先级：内联样式优先级最高，其次是链接样式，再次是内嵌式，再是导入样式，最后是浏览器默认

  2、引入css： 在<head>标签中加入<link href="css.css" rel="stylesheet" type="text/css"/>

   3、选择符组

　　你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义:h1, h2, h3, h4, h5, h6 { color: green } (这个组里包括所有的标题元素，每个标题元素的文字都为绿色)

 　　p, table{ font-size: 9pt } (段落和表格里的文字尺寸为9号字)
 　　效果完全等效于:
 　　p { font-size: 9pt }
　　table { font-size: 9pt }
 

 

样例： 

1、去除table中的边框重叠问题

  1. <style type="text/css"> 
  2.         /*表格宽度为1px，实线，黑色*/ 
  3.         table{ 
  4.             border:1px solid black;    
  5.             border-collapse:collapse;                    
  6.         } 
  7.        td { 
  8.             border:1px solid black;    
  9.             border-collapse:collapse;        
  10.        } 
  11.     </style> 

 2、超链处理

  1. <style> 
  2. A:link{font-size:12px;COLOR: #222222;TEXT-DECORATION: none;} 
  3. A:visited{font-size:12px;COLOR: #222222;TEXT-DECORATION: none;} 
  4. A:hover{font-size:12px;COLOR: red;TEXT-DECORATION: none;} 
  5. A:active{font-size:12px;COLOR: #222222;TEXT-DECORATION: none;} 
  6. .link1 A:link{font-size:12px;COLOR: #222222;TEXT-DECORATION: none;} 
  7. .link1 A:visited{font-size:12px;COLOR: #222222;TEXT-DECORATION: none;} 
  8. .link1 A:hover{font-size:12px;COLOR: blue;TEXT-DECORATION: none;} 
  9. .link1 A:active{font-size:12px;COLOR: #222222;TEXT-DECORATION: none;} 
  10. .link2 A:link{font-size:18px;COLOR: green;TEXT-DECORATION: underline ;} 
  11. .link2 A:visited{font-size:18px;COLOR: green;TEXT-DECORATION: underline ;} 
  12. .link2 A:hover{font-size:24px;COLOR: #000000;TEXT-DECORATION: none;} 
  13. .link2 A:active{font-size:18px;COLOR: green;TEXT-DECORATION: underline ;} 
  14. td A:link{font-size:18px;COLOR: red;TEXT-DECORATION: underline ;} 
  15. td A:visited{font-size:18px;COLOR: red;TEXT-DECORATION: underline ;} 
  16. td A:hover{font-size:18px;COLOR: green;TEXT-DECORATION: none;} 
  17. td A:active{font-size:18px;COLOR: red;TEXT-DECORATION: underline ;} 
  18. </style> 

 引入css.css到htm中

  1. <head> 
  2.     <link href="css.css" rel="stylesheet" type="text/css"/> 
  3. </head> 
  4.  
  5. <a href="b.htm" target="_blank">冷韵</a><br> 
  6. <div class="link1"> 
  7. <a href="b.htm" target="_blank">文字</a><br> 
  8. <a href="b.htm" target="_blank">博克</a><br> 
  9. </div> 
  10. <TABLE border="0" width="320"> 
  11. <TR> 
  12.     <TD class="link2"> 
  13. <a href="b.htm" target="_blank">文字</a><br> 
  14. <a href="b.htm" target="_blank">博克</a><br> 
  15.     </TD> 
  16. </TR> 
  17. </TABLE> 
  18. <TABLE border="1"> 
  19. <TR> 
  20.     <TD><a href="b.htm" target="_blank">跟他们不一样哦</a></TD> 
  21. </TR> 
  22. </TABLE>