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 } (这个组里包括所有的标题元素，每个标题元素的文字都为绿色)
样例：
1、去除table中的边框重叠问题
- <style type="text/css">
- /*表格宽度为1px，实线，黑色*/
- table{
- border:1px solid black;
- border-collapse:collapse;
- }
- td {
- border:1px solid black;
- border-collapse:collapse;
- }
- </style>
2、超链处理
- <style>
- A:link{font-size:12px;COLOR: #222222;TEXT-DECORATION: none;}
- A:visited{font-size:12px;COLOR: #222222;TEXT-DECORATION: none;}
- A:hover{font-size:12px;COLOR: red;TEXT-DECORATION: none;}
- A:active{font-size:12px;COLOR: #222222;TEXT-DECORATION: none;}
- .link1 A:link{font-size:12px;COLOR: #222222;TEXT-DECORATION: none;}
- .link1 A:visited{font-size:12px;COLOR: #222222;TEXT-DECORATION: none;}
- .link1 A:hover{font-size:12px;COLOR: blue;TEXT-DECORATION: none;}
- .link1 A:active{font-size:12px;COLOR: #222222;TEXT-DECORATION: none;}
- .link2 A:link{font-size:18px;COLOR: green;TEXT-DECORATION: underline ;}
- .link2 A:visited{font-size:18px;COLOR: green;TEXT-DECORATION: underline ;}
- .link2 A:hover{font-size:24px;COLOR: #000000;TEXT-DECORATION: none;}
- .link2 A:active{font-size:18px;COLOR: green;TEXT-DECORATION: underline ;}
- td A:link{font-size:18px;COLOR: red;TEXT-DECORATION: underline ;}
- td A:visited{font-size:18px;COLOR: red;TEXT-DECORATION: underline ;}
- td A:hover{font-size:18px;COLOR: green;TEXT-DECORATION: none;}
- td A:active{font-size:18px;COLOR: red;TEXT-DECORATION: underline ;}
- </style>
引入css.css到htm中
- <head>
- <link href="css.css" rel="stylesheet" type="text/css"/>
- </head>
- <a href="b.htm" target="_blank">冷韵</a><br>
- <div class="link1">
- <a href="b.htm" target="_blank">文字</a><br>
- <a href="b.htm" target="_blank">博克</a><br>
- </div>
- <TABLE border="0" width="320">
- <TR>
- <TD class="link2">
- <a href="b.htm" target="_blank">文字</a><br>
- <a href="b.htm" target="_blank">博克</a><br>
- </TD>
- </TR>
- </TABLE>
- <TABLE border="1">
- <TR>
- <TD><a href="b.htm" target="_blank">跟他们不一样哦</a></TD>
- </TR>
- </TABLE>
本文转自 tianya23 51CTO博客，原文链接：http://blog.51cto.com/tianya23/397497，如需转载请自行联系原作者
