本節書摘來異步社群《jquery mobile入門經典》一書中的第2章，第2.2節，作者：【美】phil dutson，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
jquery mobile入門經典
層疊樣式表單用來把平淡無奇的内容轉換成為令人興奮和着迷的體驗。可以使用幾種不同的方式把樣式添加到網站中。
當在style标記或外部檔案中添加css樣式時，可以在單獨的一行中書寫css樣式，也可以把它分解成段落的格式。
不熟悉css的開發者通常喜歡段落的格式，而熟練的開發者可能使用單獨的一行并附帶空格或制表符來表示樣式和布局的層級。
盡管我确實喜歡某一種格式的風格，不過當所有都完成的時候，我會壓縮我的css樣式以在真實環境中使用，是以保持css使用一種格式實際上隻在維護時有意義。我們将在第21章講述壓縮以及它可以如何使您受益。
程式清單2.3展示了一段使用段落格式寫成的css代碼片段。每一個樣式屬性放置在單獨的一行中，與根元素保持縮進。可以看到這是易于閱讀的格式，不需要進行水準滾動。這個方法的缺點是造成垂直方向上的檔案很長（繼而因為衆多的換行而導緻更大的檔案），并且沒有直覺的方法表示層級關系。
程式清單2.3 使用段落風格格式化的css代碼
程式清單2.3中的css代碼很常見。分成段落容易閱讀，每個css屬性列在屬于自己的一行中也增強了可讀性。正如所看到的，在第6、10和15行，包含了一個空行。這是有意為之。即使存在制表符，有時候當在大的css檔案中滾動時，還是可能會感到混亂，是以空行可以幫助分隔多個部分。
程式清單2.4包含與之前的代碼片段相同的樣式，但是一個單行的層級風格的css編碼示例。
程式清單2.4 使用單行的層級風格格式化的css代碼
可以看到這在樣式表中占據更少的垂直空間。這樣格式化的樣式表把完全相同的代碼從18行縮減到4行。
還可以看到，通過使用制表符或空格，元素之間的層級關系可以顯現出來。這從第1行和第2行可以明顯地看出來。在第1行，body元素前沒有制表符，而第2行的h1元素前有制表符，說明它包含在body元素之内。
使用這種方法的缺點是，通常會存在大量的水準滾動（特别是包含針對特定浏覽器的樣式并同時使用了css3标記的時候）。如果不習慣閱讀用這種格式寫成的css，這種方法對調試來說也是個挑戰，因為分隔多個屬性的字元就隻有一個分号。
不管使用何種風格來格式化css代碼，都可以在html檔案中實作樣式。下面來讨論如何實作。
html 4已經支援其中一種方法，即使用style标記。這個标記通常包含在head元素中并包括要應用到文檔中的所有樣式。在html文檔中使用style元素适合于當要将一些特定的樣式應用到目前文檔的時候。
程式清單2.5展示了在html文檔包含的head元素中，使用style元素應用樣式的示例。
程式清單2.5 headstyles.html檔案的摘錄
第1行中可以看到以head元素開始。第2行是title元素。雖然這與樣式無關，但它是屬于head元素的。第4行是style元素的開始标記。style元素包含type="text/css"，讓浏覽器知道如何處理這個元素内部的資料。第5行到第23行展示了段落格式寫成的css，每個元素互相之間沒有空行。第24行包含了style的結束标記。剩下第25行是head元素的結束标記。
圖2.2所示為headstyles.html檔案應用樣式渲染後的效果。
通過對比圖2.1與圖2.2，可以看到樣式在表現上可以起到相當的作用。樣式不必總是包含在style元素中。它們也可以在外部css檔案中。
在内容釋出與壓縮的多種方法中，使用css最常見的選擇是把它包含在一個單獨的檔案中。通過建立一個檔案擴充名為.css的檔案，然後在head元素中使用一個link元素來調用這個檔案完成此功能。
以下是調用或連結到一個外部css檔案的示例。
在前面的代碼片段中，有一個命名為styles.css的檔案，與調用它的html檔案在相同的檔案夾中。任何編寫好并放入styles.css檔案中的樣式将會加入到文檔中并進行使用。
值得注意的是，可以在子檔案夾中儲存css檔案，甚至從外部站點載入。
在html文檔中不限于使用一個css檔案，實際上也可以使用多個css檔案。使用多個外部css檔案的優勢是，分離無須用到的樣式，直到網站進入到某個部分，并使代碼易于維護成。
分離式樣式表的另一個用途是，建立針對特定浏覽器的樣式，當檢測到某個浏覽器時才包含對應的樣式表。
警告：使用多個css檔案
使用多個css檔案可能會有一些比較嚴重的缺點。如果全部在相同的頁面上調用它們，可能會造成http請求阻塞，并在所有檔案下載下傳和解析到記憶體時無意中造成網頁加載緩慢。如果基于浏覽器檢測來使用分離式檔案，很可能會遇到為不同版本維護不同檔案的麻煩。網站也可能會增加載入時間，因為檢測腳本需要加載并根據它們的檢測結果來包含相應的css檔案。
雖然可以使用内聯樣式，但我強烈推薦隻在快速原型開發或當确實沒有其他方法來完成想要做的事的時候才使用内聯樣式。
内聯樣式會覆寫浏覽器預置的樣式和已經包含進來的樣式。它們在調試的時候特别有用，因為可以明确地指定确切的元素并調整它們。
我反對使用内聯樣式的原因是，它們打破了内容與表現之間的界限。如果把樣式“寫死”到内容塊中，這個樣式就會一直保留，除非采取措施将這個特定的樣式或元素移除。雖然可以使用别的方法移除寫死的樣式，但更簡單的就是避免它，進而避免自己在html文檔中查找糟糕代碼的痛苦。
程式清單2.6是一個在不同的html元素中使用内聯樣式的示例。
程式清單2.6 inlinestyles.html檔案的全文
程式清單2.6中的代碼完全有效。事實上，應用到第8行的内聯樣式會使div元素在浏覽器檢視的時候居中，同時也應用上邊框和一些内邊距。内聯樣式通過在div元素的開始标記中包含一個style屬性來應用到div元素。在第10行，可以看到給p元素的開始标記加了一個style屬性。應用到p元素的樣式會使文本加粗。
圖2.3顯示了inlinestyles.html應用了内聯樣式進行渲染的效果。
既然已經看過了使用css表現網頁的不同方法，是時候來看看如何使它發揮功能了。