CSS目的：使内容与表现分离
层叠次序
- 内联样式（在 HTML 元素内部）
- 内部样式表（位于 <head> 标签内部）
- 外部样式表
- 浏览器缺省设置
外部样式表<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部样式表<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
CSS用法示例<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
/*body选择器*/
body {
font-family: Verdana, sans-serif;
color:blue;
background-color: gray; /*设置段落背景*/
}
/*段落*/
p {
text-indent: 5em; /*首行缩进*/
}
/*CSS 框模型*/
#box {
width: 70px; /*内容区域的宽度*/
margin: 10px; /*外边距*/
padding: 5px; /*内边距*/
}
/*摆脱父元素body的规则*/
h1 { color:green;}
/*派生选择器 <h1><strong>此处起作用</strong></h1>*/
h1 strong {
font-style: italic;
font-weight: normal;
}
/*id选择器*/
#reditalic {
color:red;
font-style: italic;
}
/*id派生选择器*/
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
/*类选择器*/
.center {text-align: center}
/*类派生选择器*/
.fancy p {
color: green;
background: black;
}
/*元素也可以基于它们的类而被选择*/
p.fancy {
color: orange;
background: blue;
}
/*伪类，向文档中的超链接添加不同的颜色*/
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
/*伪类，段落中的首字母特效*/
p:first-letter
{
color: #ff0000;
font-size:xx-large
}
</style>
</head>
<body>
<h1>标题1</h1>
<h1><strong>标题1：验证h1 strong选择器--此处起作用</strong></h1>
<h2>标题2</h2>
正文
<p>段落</p>
<p><strong>段落：验证h1 strong选择器--此处无用 </strong></p>
<p id="reditalic">段落：验证id选择器reditalic</p>
<div id="sidebar"><p>段落：验证sidebar p派生选择器</p></div>
<p class="center">段落：验证类选择器center</p>
<div class="fancy"><p>段落：验证类派生选择器 fancy p</p></div>
<p class="fancy">段落：验证p.fancy--类名为 fancy 的段落将是带有蓝色背景的橙色</p>
<div id="box"><p>段落：验证类派生选择器 fancy p</p></div>
<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
</body>
</html>