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;}
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;}
#id a{color: blue;}
<p id="id">color is red.<a>color is blue.</a></p>
5）类选择器
.class{color: red;}
.class a{color: blue;}
<a class="class">blue a</a>
<p class="class">red p</p>
.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="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>
<head>
</head>
<body>
<p style="color: red;">color p</p>
</body>
</html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<p style="color: red;">color p</p>
</body>
</html>
<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 元素内部）