CSS编写规则
1、引入CSS样式三种方式：外部样式表(External style sheet)，内部样式表(Internal style sheet)，内联样式(Inline style)，若同时引用，根据就近原则，内联样式优先使用。例如：<link rel="stylesheet" type="text/css" href="my.css">、<style></style>、<p style="color:red;"></p>
2、CSS 规则(rule)构成：选择器、花括号、声明、分号，每条声明由属性、冒号和值组成。声明块里最后一个声明可以不用分号，不过建议加上，以方便扩展声明块。例如：p{color:red;font-size:14px;}
3、CSS注释以 "/*" 开始, 以 "*/" 结束。例如：/*这是个注释*/
4、类名、ID属性推荐用小写，多语义之间用“-”连接。例如：.blue-box{backgroud-color:blue;}
冲突规则
在某些时候，在做一个项目过程中你会发现一些应该产生效果的样式没有生效。通常的原因是你创建了两个规则同时对相同的元素生效。
层叠(cascade)
简单的说，css规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。
特异性(Specificity)
浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。
继承(Inheritance)
继承也需要在上下文中去理解 —— 一些设置在父元素上的css属性是可以被子元素继承的，有些则不能。
控制继承：inherit-设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承"。initial-设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。unset-将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样。
下面我们通过例子来演示CSS的层叠和控制继承。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>层叠继承演示</title>
<style>
body {
color: green;
h2 {
background-color: black;
color: white;
p {
background-color: blue;
p {
background-color: yellow;
.my-class-1 a {
color: inherit;
.my-class-2 a {
color: initial;
.my-class-3 a {
color: unset;
</style>
</head>
<body>
<div>
<h2>层叠演示</h2>
<p>本段落背景色最初为蓝色，然后又定义了黄色，根据层叠规则，最后的背景色为黄色。</p>
</div>
<div>
<h2>继承演示</h2>
<ul>
<li>Default <a href="#">link</a> color</li>
<li class="my-class-1">Inherit the <a href="#">link</a> color</li>
<li class="my-class-2">initial the <a href="#">link</a> color</li>
<li class="my-class-3">Unset the <a href="#">link</a> color</li>
</ul>
</div>
</body>
</html>
下面是页面的显示效果：
图文讲解-CSS规则以及特性
感兴趣的同学可以自己尝试下示例，以上内容部分摘自视频课程03网页前端CSS-2CSS规则及特性。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c58307.shtml
