Web网页的结构是由HTML文档体现，Web网页的表现由CSS文档体现，设计时网页的结构与表现是分离的，网页最终需要靠CSS与HTML的结合才能实现真正效果。
当读到一个样式表时，浏览器会根据它来格式化HTML文档。按CSS样式出现的位置，有如下使用方式：
内联样式
内部样式表
外部样式表

1. 内联样式

内联样式：又称行内样式，由HTML元素的style属性定义
语法：

<标记名称 style=“样式声明1;样式声明2;…;样式声明n;”>内容</标记名称>

样式声明格式：样式属性:属性值；

<div style=“color:red; font-size:12px;width:200px;height:200px;background-color:grey;”>
	这是一个div
</div>

缺点：
属性值内容太多，会导致代码太乱，不能实现样式与元素相分离
只对其所在的标签及嵌套在其内的子标签起作用，其他元素想实现相同效果，需再重写相同的style属性，不能实现代码重用性

2. 内部样式表

使用<style></style>标记将样式表定义在HTML文档的元素中。
语法：

<head>
	<style>
		样式规则定义
	</style>
</head>

样式规则：一组可以应用在某些元素上的样式声明
样式规则语法：

选择器{
	样式声明1；
	样式声明2；
	…
	样式声明n;
}

例如：

<head>
	<style>
		div{
			color:red;
			font-size:12px;
			width:200px;
			height:200px;
			background-color:grey;
		}
	</style>
</head>
<body>
	<div>这是一个Div</div>
	<div>这是一个Div</div>
	<div>这是一个Div</div>
</body>

特点：以独立的方式，定义页面元素的样式（元素与样式相分离），并且能够让样式应用在多个元素中（提升可重用性和可维护性）
缺点：只能在当前页面中使用

3. 外部样式表

将样式定义在外部独立的CSS文件中，应用样式的HTML文档可以引入该CSS文件。
步骤：

创建扩展名为.css的外部样式表文件，编写样式规则，样式规则由选择器和若干样式声明组成。
在页面中以链接或导入的方式引入样式表文件。链接式首先加载外部CSS文件，再加载网页页面，因此，这种情况下显示出来的网页从一开始就是带有样式效果的。
导入式会在整个网页加载完毕后再装载CSS文件，即先将HTML的结构呈现出来，再把外部的CSS文件加载到网页当中，最终显示效果与链接式一样。但是，若网页比较大，或者网速较慢时会出现先显示没有统一CSS样式的HTML网页，然后再显示有样式的网页，这样会给阅读者带来不好的感觉。

4. 样式表的特征

（1）继承性：

样式继承是指书写CSS样式表时，子标签会继承父标签的某些样式。
user agent stylesheet：用户代理样式，即浏览器指定的默认样式。
CSS3提供了针对浏览器的前缀，现代浏览器的内核，主流内容主要有Mozilla、Webkit、Opera、Trident，前缀如下：
Chrome：谷歌浏览器，-webkit-
Safari：苹果浏览器，-webkit-
Firefox：火狐浏览器，-moz-
IE：-ms-
Opera：-o-

恰当使用继承可以简化代码，降低CSS样式的复杂性。但若在网页中所有的元素都大量继承样式，那么判断样式的来源就会很困难，所以对于字体、文本属性等网页中通用的样式，可以使用继承。如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档的所有文本。
并不是所有的CSS属性都可以继承，如边框、外边距、内边距、背景、定位、元素宽高等属性。

（2）层叠性：

样式层叠是指多种CSS样式的叠加，即可以为一个元素定义多个样式规则或样式声明，只要样式声明不冲突，则所有样式声明都可应用于该元素上。

（3）样式冲突与优先级：

样式冲突是指多种CSS样式叠加时，出现属性相同而属性值不同的冲突现象。不同优先级的样式表定义元素的不同属性都会作用在元素上，相同属性的只有优先级最高的会对元素起作用。
若样式表声明出现冲突，则按照样式规则优先级进行样式应用：

低：浏览器缺省设置（User Agent StyleSheet）
中：外部样式表
次高：内部样式表
高：内联样式表注意：
子元素定义的样式会覆盖继承来的样式
样式优先级相同时，则采用就近原则，即选择离元素近的样式
定义CSS样式时，对CSS样式属性值后缀“!important”可调整该样式为最高优先级。

CSS的创建与使用