自己写的web标准教程，帮你走进web标准设计的世界——第六讲（css篇3）
声明：本教程源于本人学习的一些经验的总结，希望大家帮忙完善与指正，也希望会给初学者带来方便，希望大家不要随便转载，写的不是很好，还不完善，不过转载时要注明作者和出处，附加原文的链接地址，谢谢了
已出：
自己写的web标准教程，帮你走进web标准设计的世界——第一讲
自己写的web标准教程，帮你走进web标准设计的世界——第二讲
自己写的web标准教程，帮你走进web标准设计的世界——第三讲（html终结篇）
上讲回顾： 上一讲主要介绍了web构建的一般结构以及css属性的学习方法
非常感谢网友对我的大力支持，谢谢你们给我的鼓励！
本节概况：
1. 利用html element 为元素添加css属性
2. 利用class为html元素添加css属性
3. 通过id为html元素添加css属性
4.继承
5.css的优先级机制：
6.css优先级法则：
ok，Begin！Right now！
1. 利用html element 为元素添加css属性
实例：
<title>无标题文档</title>
<style type="text/css">
p {
color:red;
}
</style>
</head>
<body>
<div id="redP">
<p>red</p>
<p>red</p>
</div>
<div id="greenP">
<p>green</p>
<p>green</p>
</div>
</body>
这种方式我们通常叫做利用元素选择器来设置css属性，他代表的是某个范围内的所有指定的标签。上例中就是代表为html document内的所有p元素设置前景色为红色。
2. 利用class为html元素添加css属性
疑问：如果我要把页面上所有的p设置为不同的前景色应该怎么办呢？上面所说的某个范围内是什么意思呢？
实例：
<style type="text/css">
.redP p {
color:red;
}
.greenP p {
color:green;
}
</style>
</head>
<body>
<div class="redP">
<p>red</p>
<p>red</p>
</div>
<div class="greenP">
<p>green</p>
<p>green</p>
</div>
</body>
讲解：我们为div设置了一个class属性，通过点号+className可以定位到拥有该class属性值的元素上，我们通常叫做通过类选择器来为html元素设置css属性，上例中我们通过类选择器定位到具体的div上（这就是上面所谓的范围），然后再利用元素选择器选择该范围内的p元素，并为他们设置了一个前景色。
3. 通过id为html元素添加css属性
id选择器选择器与类选择器非常的相识，只不过，一个网页上id是不能重复的，而且每个元素只能有一个id，而每个元素可以有多个类
实例：
<style type="text/css">
#redP p {
color:red;
}
.greenP p {
color:green;
}
</style>
</head>
<body>
<div id="redP">
<p>red</p>
<p>red</p>
</div>
<div class="greenP">
<p>green</p>
<p>green</p>
</div>
</body>
我改了什么？
注意：类选择器用“.assName”构建，id选择器用“#idName”来构建
4.继承：
简单的理解就是父亲的东西儿子（孙子。。）传承了
实例：
<style type="text/css">
#redP p {/*两个color属性在同一组*/
color:red;
}
</style>
</head>
<body>
<div id="redP">
<p>red<em>em red</em></p>
<p>red</p>
</div>
</body>
可见，em也具有了p元素的前景色，这就是继承，不过有的属性是不能够继承的，比如border，padding，margin。。。
继承具有很好的用途，也许你会发现许多网页都有一个base.css文件，上面设置了一些基本的css属性：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td{
margin: 0;
padding: 0;
}/*这里重新设置了margin和padding为0，那么所有的标签都会继承这一点*/
body,button, input, select, textarea {
font: 12px/1.5 arial, “宋体”, sans-serif;
}
。。。
这些东西就是很好了利用继承这一原则，节省了程序员不少的体力，一旦我写了这条
body,button, input, select, textarea {
font: 12px/1.5 arial, “宋体”, sans-serif;
}
那么我就不用在为每个标签设置字体了（除了有特殊的要求），他们都会继承这个设置。
5.css的优先级机制：
解释：
1.内联样式的权值最高1000；
2."#id"权值100
3.".class"权值10
4.元素权值为1
6.css优先级法则：
1. （了解）在同一组属性设置中标有“！important”规则的优先级最大
实例：
<style type="text/css">
#redP p {/*两个color属性在同一组*/
color:#000 !important;//胜出
color:red;
}
</style>
</head>
<body>
<div id="redP">
<p>red</p>
<p>red</p>
</div>
</body>
去掉!important试试？
2. 创作者规则高于浏览者：意思就是说网页编写人员设置的css样式要优先于浏览者设置的默认样式，这个很好理解，当然你也可以不去管他，他的用处不大
3. 选择器都有一个权值，权值越大越优先
4. 权值相等时后出现的要优于先出现的（这就是上面的实例去掉“！important”后为什么会采用后面的红色的原因了）
有点迷糊？请继续！
下面我们针对于上面的原则3做一下拓展：
1. 继承不如指定：这是当然的，继承的样式不如指定的样式
实例：
<style type="text/css">
#redP p {/*两个color属性在同一组*/
color:red;
padding-left:100px;
}
em {
color:#00F;
}
</style>
</head>
<body>
<div id="redP">
<p>red<em>em red</em></p>
<p>red</p>
</div>
</body>
虽然em继承了red但是我有重新指定了#00F（蓝色），所以继承的样式就被覆盖了
利用firefox的firebug我们选择em标签，右面的css样式显示很好的显示了这一点：
2. 利用权值计算进行比较（这个方法比较慢，我介绍个取巧的方法）
a) 最高的高才是真的高
b) 最高的级别相同看其次
c) 顺次比较级别都相同看长度，长者获胜
实例：
<style type="text/css">
#redP p {/*权值=100+1=101*/
color:red;
}
#redP .red em {/*权值=100+10+1=111*/
color:#00F;/*蓝色*/
}
#redP p span em {/*权值=100+1+1+1=103*/
color:#FF0;/*黄色*/
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red<span><em>em red</em></span></p>
<p>red</p>
</div>
</body>
蓝色胜出
注意：通过上面的介绍，我们知道内联的样式是最nb的，无人能挡，所以大家在写css的时候尽量不要写为内联样式的，实在不利于维护啊！
下期预告：
1. 为什么不用*｛margin：0；padding：0｝
2. css伪类之LoVeHAte
3. 盒模型
交流QQ群： 71019430（菜鸟居多，请大家见谅！）
