原创声明:本文为作者原创，未经允许不得转载，经授权转载需注明作者和出处
插入样式表的方法有三种:
外部样式表（推荐使用）
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。<link> 标签在（文档的）头部。
<head>
<link rel="stylesheet" type="text/css" href="maomao.css">
</head>
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。
<head>
<style>
hr {color:#000;}
p {margin-left:20px;}
body {background-image:url("images/maomao.gif");}
</style>
</head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
<p style="color:#000;margin-left:20px">跟茂茂研究CSS</p>
层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般来说，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：
标签中的样式声明>内部样式表中的样式声明>外部样式表中的样式声明>浏览器中的样式声明（缺省值）。
但是用!important可以改变优先级顺序，例：
h1的样式表中浏览器会把h1的字体颜色设置为白色，因为CSS执行顺序是h1{ color: #000!important; color: #fff; } h2{ color: #000!important; color: #fff; }（同级）后来者居上
h2的样式表中浏览器会把h2的字体颜色设置为黑色，因为!important把该样式的优先级设置为最大优先级，所以不管后面写多少都会优先读取该样式
当!important声明冲突时，会按照CSS执行顺序执行：
标签中的样式声明>内部样式表中的样式声明>外部样式表中的样式声明>浏览器中的样式声明（缺省值）
CSS权重计算规则
CSS2.1规范中定义了样式规则的计算方式，使用一个4位数字串来表示权重，每个选择器的权重决定了使用哪种样式，使用的规则有如下几种：
- 元素的内联样式属性，加1,0,0,0
- 每个id选择器，加0,1,0,0
- 每个class选择器、属性选择器及伪类，加0,0,1,0
- 每个元素及伪元素（如：
first-child）,加0,0,0,1 - 全局选择器（
*）,加0,0,0,0h1 {color: #000;} /* 只有一个普通元素加成，结果是 0,0,0,1 */ body h1 {color: #222;} /* 两个普通元素加成，结果是 0,0,0,2 */ /*后者胜出*/ h2.grape {color: #444;} /* 一个普通元素、一个class选择符加成，结果是 0,0,1,1*/ h2 {color: #666;} /*一个普通元素，结果是 0,0,0,1 */ /*前者胜出*/ html > body table tr[id=”totals”] td ul > li {color: #888;} /* 7个普通元素、一个属性选择符、两个其他选择符，结果是0,0,1,7 */ li#answer {color: #123456;} /* 一个ID选择符，一个普通选择符，结果是0,1,0,1 */ /*后者胜出*/
喜欢的小伙伴们就打赏下（嘿嘿）
上期回顾：CSS新手学习一（语法、注释、选择器）
下期内容：更新中
共18条评论
Ctrl+Enter
