Created in: 2015/9/30 18:35:44
原文地址：http://matthewjamestaylor.com/blog/adding-css-to-html-with-link-embed-inline-and-import
前言：因工作使用到以前未曾接觸的CSS，但是在調用CSS的過程中遇到一個大問題：
<style type="text/css" src="path/to/style.css">無法加載的問題。（只知道是無效的方法，具體原因不解，求解）這篇博客詳細地列舉了4種HTML導入的方式，前面2種方式使用頻率最高，同時還列舉了使用的場景，不愧爲一篇新手需要的博文。
正文
HTML文檔調用CSS的方法不止一種。在這篇簡短的教程中，我將會解釋四種主要方式的優缺點。
1. 鏈接單獨CSS文件
此方法是在HTML文檔中加載CSS規則的最常用方法。通過此方法，所有Style規則將會被保存到後綴名爲.CSS文本文件中。此文件常存儲於Server端，且由你在HTML文件中直接鏈接它。此鏈接僅僅在HTML文件中單獨的一行，如：
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
你需要確認在href中包含正確的CSS文件。如果CSS文件與HTML文件位於相同路徑，則無需路徑；反之，按照href="foldername/mystyles.css"的方式指明路徑。其中，media參數指明CSS規則在何時被使用。“screen”表明用於計算機屏幕。如果指明“print”，規則只有在頁面打印時纔會被使用。你可按照需要包含若干CSS文件。
鏈接單獨CSS文件有許多優勢。如果需要修改整個網站的一個Style，只需要在CSS文件中修改一次。如果需要修改整個網站的外觀，則只需要升級一個文件。也許使用單獨CSS文件的重要原因是爲了訪問加速。當用戶第一次訪問網站時，瀏覽器下載當前頁面以及鏈接的CSS文件。當導航到另一網頁時，瀏覽器只需要下載HTML頁面，CSS文件因已被緩存故無需再次下載。這可以顯著提升網頁瀏覽速度。
2. HTML嵌入CSS
另一種方法是直接在HTML中嵌入CSS規則。你只需要加HTML頁面加入以下代碼片段：
<style media="screen" type="text/css">
Add style rules here
</style>
所有CSS規則存放在style標籤中。media元素的值可以像上文所述的“screen”/“print”。
這種方法的缺點是每次用戶訪問網頁時Style文件都需要重新下載，這將導致輕微慢的瀏覽體驗。相對的，這種方法也有一些優點。因爲CSS是HTML文檔的一部分，整個頁面只以一個文件的方式存在。在向他人發送郵件頁面時或者HTML頁面作爲類似博客模板時，此方式將會被使用。另一個使用此方法的優點是動態內容。如果你通過數據庫來生成頁面內容，你同時也能產生動態Style。Blogger採用了這種方法——它動態地插入HTML標題顏色到嵌入在HTML中的CSS規則。這使得用戶可以通過Admin頁面改變顏色而非在Blog模板中修改CSS。
3. HTML標記加入內聯CSS
Style規則也可以直接加入HTML元素中。你只需要在元素中加入一個style參數，同時輸入Style規則作爲其值。下面是一個標題文本爲紅色、背景爲黑色的示例：
<h2 style="color:red;background:black;">This is a red heading with a black background</h2>
這是一種不好的方法，因爲它將使網頁膨脹，使得網頁維護變得頭疼。但是它在一些條件下，仍然有些用途。一個例子便是：假如你在使用一個你沒有CSS文件權限時，對應的只需簡單地在元素中加入Style規則。
4. 在CSS文件中導入CSS文件
另外一種有趣的在HTML頁面加入CSS的方式是導入規則。這種方式讓我們從CSS內部附加一個新的CSS文件。下面瞧瞧一個如何完成的例子，然後我將會展示當你可能使用這種方法的特殊例子。爲了在內部導入CSS文件，只需簡單地用下面規則：
@import "newstyles.css";
只需將”newstyles”改成你的CSS文件名，同時確定包含正確的文件路徑。記住，文件路徑是相對於現在我們所在的CSS文件而言的，如果CSS文件是嵌入到HTML頁面中，則路徑是相對於HMTL文件而言。
讓我們想像：我們有一個1000張頁面的網站，並且我們在網站的每一個頁面都鏈接到一個CSS文件。現在我們想像：我們需要加入第二個CSS文件到所有頁面中。我們可以編輯這1000個頁面，增加第二個CSS鏈接或者一個更好的方式即是在第一個文件中導入新的CSS文件。我們可以節約自己許多小時的工作量。
Happy CSS coding…