CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
CSS声明总是以分号(;)结束，声明组以大括号({})括起来:
p { color:red; text-align:center; }id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>id选择器</title> <style> #para1 { text-align:center; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>这个段落不受该样式的影响。</p> </body> </html>效果：
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.”号显示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>class选择器</title> <style> .center { text-align:center; } </style> </head> <body> <h1 class="center">标题居中</h1> <p class="center">段落居中。</p> <p>普通段落</p> </body> </html>效果：
也可以指定特定的HTML元素使用class。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>class选择器</title> <style> p.center { text-align:center; } </style> </head> <body> <h1 class="center">这个标题不受影响</h1> <p class="center">这个段落居中对齐。</p> </body> </html>效果：
CSS伪类是用来添加一些选择器的特殊效果。 伪类的语法：
selector:pseudo-class {property:value;} selector.class:pseudo-class {property:value;}示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪类选择器</title> <style> a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */ </style> </head> <body> <p><b><a href="https://www.baidu.com/" target="_blank">这是一个链接</a></b></p> <p><b>注意：</b> a:hover 必须在 a:link 和 a:visited之后，需要严格按顺序才能看到效果。</p> <p><b>注意：</b> a:active 必须在 a:hover 之后。</p> </body> </html>效果：
