当浏览器读到一个样式表时，浏览器会根据它来格式化HTML文档，让网页变得精美。
插入样式表的方式有三种，分别是：
外部样式表
内部样式表
内联样式
下面详细介绍各种方式的写法。
当样式需要应用于很多页面时，外部样式表将是最合理的选择。
在使用外部样式表的情况下，你可以通过改变样式的一个地方，所有的网页都会跟随变化。
每个页面使用 标签链接到样式表。 标签在（文档的）头部
<head> <link rel="stylesheet" type="text/css" href="common.css"> </head>
浏览器会从文件 common.css 中读到样式声明，并根据它来格式网页。
外部样式表可以在任何文本编辑器中进行编辑。
样式表应该以 .css 扩展名进行保存。
文件不能包含任何的 html 标签。
下面是一个样式表文件的例子：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(/images/back40.gif);}不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
当网页某个地方需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style>
hr {color:sienna;}
p {margin-top:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。因此这种方法不推荐使用。
应用场景：当样式仅需要在一个元素上应用一次时，要使用内联样式。
你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
如下，定义了段落的颜色：
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
如果某些属性在不一样的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h2 选择器的三个属性：
h2
{
color:red;
text-align:left;
font-size:8pt;
}而内部样式表拥有针对 h2 选择器的两个属性：
h2
{
text-align:right;
font-size:20pt;
}假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h2 得到的样式是：
color:red; text-align:right; font-size:20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
通常而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
浏览器缺省设置
外部样式表
内部样式表（位于 head 标签内部）
内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
提示:如果你使用了外部文件的样式在内部样式中也定义了该样式，则内部样式表会取代外部文件的样式。
优先级用于浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。
优先级仅由选择器组成的匹配规则决定的。
优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
下列是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：
通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式
当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。
一些经验法则：
Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
Never 永远不要在全站范围的 css 上使用 !important
Never 永远不要在你的插件中使用 !important
选择器都有一个权值，权值越大越优先；
当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
继承的CSS 样式不如后来指定的CSS 样式；
在同一组属性设置中标有"!important"规则的优先级最大；
原文链接: https://www.yukx.com/moran/article/details/415.html 优科学习网CSS样式的创建方式
