上次我们说到了CSS的一些基础性的概念，这里我们将要说的，是如何从零开始，构建一个样式表。样式表的种类，通常分为三种：外部样式表（推荐）、嵌入样式表和内联样式（最不可取），我们分开来说。
一、
外部样式表：
将所有的样式，统一的放在一个文件中，并添加合适的注释，保存为.css文件。
通常在index.html同级文件下新建一个"CSS"文件夹，专门用来存放css文件，如果css文件只有一个，通常写为style.css。
优点是与HTML文件松散耦合，有的时候多个HTML引用同一份CSS，只需修改CSS文件，就可改变HTML显示的样式，浏览器的缓存机制，也使得使用这种方式的页面加载更快。推荐使用！
加载样式表到HTML中，通常使用链接的方式：(需要注意的是URL是相对于服务器上该样式表的位置，即相对于根目录，而不是HTML文件)
|
<head> <link rel="stylesheet" href="url.css"> </head> |
可以link多个样式表，后面的把前面的覆盖，优先级更高。
嵌入式样式表：
这种方式直接将CSS规则写在HTML文件里，准确的说是放在<head>标签里，同时用<style>标签包围。
|
<head> <style>p{color:red; font-size:1.2em;} </style> </head> |
如果嵌入式样式表出现在link之后，会把外部样式表的规则覆盖。
内联样式表：
这是最后因该考虑的方式，尽管优先级是最高的，除非有！important，否则内联样式会将之前的所有规则覆盖。由于这种方式将内容（HTML）与表现（CSS）混在了一起，严重违背了最佳实践，并且通常内联样式一次只影响单个元素，效率低下，修改起来也很困难。类+外部样式，就可实现对于元素的精确控制，修改起来也很容易，没有必要写成内联样式。
<p style="color:red; border: 1px solid black;"> |
二、
样式的层叠和顺序：只需记住一点，越晚出现的，优先级越高，当然，！important除外，因此，通常情况下，内联样式总是会优先显示出来。！important很少使用，但也有例外，如你的网页引用了第三方服务的新闻源，如果这些HTML中有些样式不符合你的设计思路，就可以用！important实现覆盖！
使用与媒体相关的样式表：
可以指定一个只用于输出，如打印的样式表，货只用于查看屏幕，又或者可以新建一个具有打印和屏幕通用的样式表，再分别编写只用于打印，和只用于屏幕版本的样式。
<link rel="stylesheet" href="url.css" media="output"> |
output可以是print,screen和all（这三个是最常用的），除此之外还有aural,braille,handheld,projection,tty和tv，不同浏览器的支持程度不同，不过最常用的还是前面的三个。如果输出的方式有多个，用逗号隔开，如meida="print,screen"
还有一种方式，就是在样式表，通常是外部样式表，添加媒体输出：
|
p{color:red;} @media print { p{color:blue;} } |
在后面我们还会接触到媒体查询，构建响应式网站，同样也是使用media。
借鉴他人的灵感：
查看网页源代码，如果是外部样式的话，就可以在<head>里找到引用的位置，点击即可打开，查看其CSS。
总结：这次的内容比较少，之后我们统一用外部样式表的形式建立CSS，让HTML，CSS和JavaScript各自独立，这样以来，无论是编写还是维护，都比较简单，这是构建Web最简单的方法论，遵循"渐进增强"的原则。