CSS基础
一）简介
·CSS 指层叠样式表 (Cascading Style Sheets) ·样式定义如何显示 HTML 元素 ·样式通常存储在样式表中 ·把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 ·外部样式表可以极大提高工作效率 ·外部样式表通常存储在 CSS 文件中 ·多个样式定义可层叠为一二）语法
1）基本语法：选择器 { 属性: 值 } body { color : blue } p { font-family : "sans serif", arial, serif ; } p { text-align : center ; color : red ; padding : 1px 2px 3px 4px ; }
2）选择器分组
h1,h2,h2,h3,h5,h6 { color : green ; }
3）派生选择器 li a { color : blue ; }
4）id 选择器
#id { color : red ; } #id a { color : blue ; }
< p id ="id" > color is red. < a > color is blue. </ a ></ p >
5）类选择器
.class{color: red;} .class a{color: blue;} < p class ="class" > color is red. < a > color is blue. </ a ></ p > a.class {color: blue;} p.class {color: red;} < a class ="normal" > normal a </ a >< br /> < a class ="class" > blue a </ a > < p class ="class" > red p </ p >
三）使用样式表
1）内部样式 < html > < head > < style type ="text/css" > a.class { color : blue ; } p.class { color : red ; } </ style > </ head > < body > < a class ="normal" > normal a </ a >< br /> < a class ="class" > blue a </ a > < p class ="class" > red p </ p > </ body > </ html > 2）内联样式 < html > < head > </ head > < body > < p style ="color: red;" > color p </ p > </ body > </ html > 3）外部样式 < html > < head > < link rel ="stylesheet" type ="text/css" href ="mystyle.css" /> </ head > < body > < p style ="color: red;" > color p </ p > </ body > </ html > mystyle.css p{color: red;}
当同一个 HTML 元素被不止一个样式定义时，样式的优先级由低到高排列如下：
1：浏览器缺省设置 2：外部样式表 3：内部样式表（位于 <head> 标签内部） 4：内联样式（在 HTML 元素内部）