CSS 创建样式表有三种方法：内联样式、内部样式、外部样式。
(1)、内联样式
内联样式也叫行内样式或者行间样式，即在相关标签内使用样式（style）属性定义。如下：
<div style="width:200px;height:100px;border:1px solid black;"></div>
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。因此需要慎用这种方法，例如当样式仅需要在一个元素上应用一次时，可以使用内联样式。要使用内联样式，需要在相关的标签内使用样式属性定义，style 属性可以包含任何 CSS 属性。
(2)、内部样式
内部样式也叫内嵌样式，即在文档中创建内嵌的样式表，需要使用 <style> 标签在文档头部定义内部样式表，如下：
<head>
<style>
div{
width:200px;
height:100px;
border:1px solid black;
}
p{
color:blue;
font-size:14px;
}
span{
color:black;
font-weight:bold;
}
</style>
</head>
当单个文档需要特殊的样式时，就应该使用内部样式表。
(3)、外部样式
外部样式也叫做外联样式，即使用 <link> 标签链接到外部样式表，也是使用的多的一种，如下：
<head> <link rel="stylesheet" type="text/css" href="css/style.css"> </head>
当样式需要应用于很多页面时，外部样式表将是理想的选择，在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表，浏览器会从文件 style.css 中读到样式声明，并根据它来格式化文档。注意：<link> 标签中 rel="stylesheet" type="text/css" 是固定代码格式，不可更改。
外部样式表可以在任何文本编辑器中进行编辑，样式文件不能包含任何的 HTML 标签，样式表以 .css 扩展名进行保存。注意：不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，那么它在不同的浏览器中可能无法正常工作，导致意向不到的结果。
(4)、样式优先级
样式优先级，也可以称为层叠次序，即同一个 HTML 元素不止被一个样式定义时，会优先使用哪个样式。一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中：
内联样式 > 内部样式 > 外部样式
内联样式（在 HTML 元素内部）拥有最高的优先权，即优先采用在元素内部定义的样式信息，然后是内部样式表（位于 <head> 标签内部），最后是外部样式表中的样式声明，浏览器中的样式声明（缺省值）同外部样式处于同一层次。
优先级的顺序是有一个前提的，即内联样式、内部样式、外部样式表中 CSS 样式是在的相同权值的情况下。
但是内部样式 > 外部式也有一个前提，即内部样式的位置一定在外部样式的后面。如下：
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
</style>
(5)、多重样式
样式表允许以多种方式规定样式信息，样式可以规定在单个的 HTML 元素中，或在 HTML 页的 <head> 元素中，亦或在一个外部的 CSS 文件中，甚至可以在同一个 HTML 文档内部引用多个外部样式表，但是最终多重样式将被层叠为一个。那就意味着：如果你使用了外部文件的样式，在 <head> 中也定义了该样式，那么内部样式会取代外部文件中的样式。
辽公网安备:42900402000182号