首選來介紹一下什么是CSS?其實就是一種層疊樣式表。
CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
就像造房子一樣，如果html是基地的話，那么CSS就是裝修，只有裝修的房子才可以住，自然至於那些燈光之類的是JS了，這是簡單的比例，但也說明了css的重要性。
網頁的核心就是內容與樣式的分離，其中CSS就是分離的一種，那么如果分離了，該如何引用呢?一些網站中很多文件，只有相關的引用才可以實現，其中有四種方式：
1：內聯樣式(行間樣式)：在標簽的style屬性添加樣式：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>行內樣式</title>
</head>
<body>
<!--使用行內樣式引入CSS-->
<h1 style="color:red;">驚風隨筆</h1>
<p style="color:red;font-size:30px;">驚風隨筆</p>
</body>
</html>
2、嵌入式樣式表(內部樣式表)：在style標簽內添加(加在head標簽內部)
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>內部樣式表</title>
<!--使用內部樣式表引入CSS-->
<style type="text/css">
div{
background: green;
}
</style>
</head>
<body>
<div>我是DIV</div>
</body>
</html>
3.外部樣式表：將css樣式編寫在擴展名為.css的文件中，再導入樣式，導入在(head標簽內部)
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>外部樣式表</title>
<!--鏈接式:推薦使用-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</html>
4、@import可以用來導入其他css文件。就相當於原來的css文件中包含被導入的css文件中的樣式。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>導入樣式表</title>
<!--導入式-不推薦使用-->
<style type="text/css">
@import url("css/style.css");
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</html>
不過根據目前網站的做做法，要做到內容與樣式的分離，一般都是使用第三種的做法，也就是使用外部式表。這是通用的方式了，第四種一般很少用，因為需要進一步的加載，不利於優化。