1，CSS 规则
由两个主要的部分构成：选择器，以及一条或多条声明:
实例：p {
color:red;
text-align:center;
}
2，id 和 class 选择器
id 选择器以 "#" 来定义：ID属性不要以数字开头
#para1
{
text-align:center;
color:red;
}
<p id="para1">Hello World!</p>
类选择器以一个点 . 号显示：class 选择器用于描述一组元素的样式
<h1 class="center">标题居中</h1>
所有的 p 元素使用 class="center" 让该元素的文本居中，其他元素调用不受影响
p.center {text-align:center;}
3，样式表
外部样式表：<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表：<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式：<p style="color:sienna;margin-left:20px">这是一个段落。</p>
4，CSS 背景
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
5，CSS 文本格式
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>这是标题 1</h1>：调用h1选择器
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>：调用默认的body选择器，这是文本书写
<p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>：选择了class选择器
</body>
对齐方式
h1 {text-align:center;}：居中对齐
p.date {text-align:right;}：右排列
p.main {text-align:justify;}：每一行被展开为宽度相等，左，右外边距是对齐
文本修饰
h1 {text-decoration:overline;}：上划线
h2 {text-decoration:line-through;}：中划线
h3 {text-decoration:underline;}：下划线
文本转换
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
文本缩进
p {text-indent:50px;}
6,CSS 字体
7，CSS 链接
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻