1. css样式计算
（1）默认情况下，浏览器给元素有一个默认的样式。
（2）如果元素继承了父元素的样式，则继承的样式覆盖浏览器默认的样式。
（3）如果给元素指定了样式，则会覆盖继承的样式和浏览器默认的样式。可能有多个位置给一个元素的指定了样式，则需要根据优先级来确定元素使用哪个样式。
2. 给元素指定样式
根据指定的样式的位置，可分为外部样式、内部样式和内联样式。外部样式是从外部引用的样式、内部样式是在html中style标签内写的样式，内联样式是通过属性style=''设置的样式。
<head> <style type="text/css"> <!--内部样式--> p{font-size:20px} </style> <!--外部样式--> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <p style="font-size:12px">段落文字</p><!--内联样式-->
</body>
指定样式的优先级：
（1）important优先级最高。
（2）若没有important，计算权值，权值大的优先级越高。
根据选择器不同，有五类权值：
a. 内联样式：1000
b. ID选择器：100
c. 类选择器、属性选择器和伪类选择器：10
d. 元素和伪元素选择器：1
e. 结合符和通配符：0
一次定义选择器的优先权等于各类选择器权值相加。
如:
#main{ color: red;/*权值为100*/ } div #main{ color:green;/*权值为 1 ＋ 100 ＝ 101*/ } *[id="main"]{ color: blue;/＊权值为0 + 10 = 10*/ }
/*#main的字体颜色为绿色。div #main的权值最大。*/
（3）若权值相等，根据声明的样式的先后顺序。无论是外部样式，还是内部样式，在后面声明的覆盖先前的。
style.css #main p{ color :red; }
<head> <style type="text/css"> # main p{color:blue;} </style> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="main"> <p>段落文字</p> </div> </body> <!--p的字体颜色为红色。-->
<head> <link rel="stylesheet" type="text/css" href="style.css" /> <style type="text/css"> # main p{color:blue;} </style> </head> <body> <div id="main"> <p>段落文字</p> </div> </body> <!--p的字体颜色为蓝色。-->