通用樣式 (style.css)

這支css的用途是定義網頁的通用樣式，其中也包含共用區塊header、content-sidebar (content-nav)、footer的樣式定義，底下介紹style一定會寫的幾個區塊。

• common
  body底下的背景、字型、顏色…等等都在這個區塊下設定，其他只要是影響範圍是所有網頁的，也可在這個區塊下設定。
  字型的設定順序現在是：Verdana, Tahoma, Helvetica, Arial, sans-serif。

  相關參考內容：
  1.网页设计中的默认字体
  2.[教程] 谈谈网页设计中的字体应用 (1) Font Set
  3.[教程] 谈谈网页设计中的字体应用 (2) serif 和 sans-serif
  4.[教程] 谈谈网页设计中的字体应用 (3) 实战应用篇·上
  5.[教程] 谈谈网页设计中的字体应用 (4) 实战应用篇·下
  6.全局字体最佳实践
  7.“helvetica, arial”, Not “arial, helvetica”
  8.Helvetica vs. Arial

• css-sprite
  這個區塊是要做到把網頁經常會用到的圖拼起來，需要用到這張圖的時候只要設定background-position就可以，同時可以減少伺服器的負擔。目前我們把圖分成四張：cs-bg、cs-bg-box、cs-title、cs-icon，前面都用cs開頭，後面再加上類別名稱。
• anchor
  連結、錨點的設定，順序依序為link、visited、hover、active，記憶口訣為：LoVe HAte。
   
• form（若必要也可獨立為form.css而歸類到模組套件型樣式裡）
  為了統一在各個瀏覽器輸入欄位的長度、focus之後的樣式及按鈕…等等，我們會在這個區塊設定，長度部份定義出幾個通用的樣式(length-min、length-xxs、length-xs、length-s、length-m、length-l、length-xl、length-xxl、length-max、length-full)，這10組樣式應該就可以處理絕大部份的需求，但如果有特殊狀況需要增加的話，命名方式也要比照這幾個通用樣式，或利用各頁的css重新定義來覆寫樣式。
   
• clear、clearfix
  這個區塊是用來清除浮動的工具，加了這個樣式工具後，便不需要在浮動區塊的後方再多寫一條規則去清除浮動，只要在浮動區塊加上class=”clear”或class=”clearfix”即可，用的時機可區分為：以套用樣式區塊本身的角度來看，清除前方浮動用clear，清除後方浮動用clearfix。
   
• header、content-sidebar (content-nav)、footer
  因為header、content-sidebar (content-nav)、footer在同一個站台下，幾乎都會以類似的呈現結構來設計，所以把他們集中在這支通用樣式裡面，除了好維護以外，還可以少引入一些css。

其他框架樣式 (single.css、treble.css、narrow.css、wide.css)

當同一個站台，同時擁有單欄式、雙欄式或三欄式時，就需要加上此樣式。layout.css是以最common的框架為主樣式，然後如果是單欄式的網頁就要再加上single.css，所以這支css跟layout.css一樣只做結構上的設定。通常為了以防萬一會把content-sidebar (content-nav) 設成display: none，並重設content-main的寬度。其他三欄式(triple.css)及多欄式的頁面也跟單欄式的一樣，只需要做結構上的設定。

※要注意一點，這類css (single.css、double.css、treble.css、narrow.css、wide.css等與結構相關的樣式)要link在layout.css底下，這樣才有辦法重設layout.css的樣式。

列印樣式 (print.css)

當網頁有列印需求的時候，就需要一支列印樣式去定義網頁在列印時的樣式，因為我們的css已經有加上媒體類型，所以列印樣式本身，等同於需包含重置樣式(reset.css)、結構樣式(layout.css)和通用樣式(style.css)。我們的print.css參考了Hartija-CSS Framework和blueprint綜合起來，並以我們的coding style重新設計。如果其他頁面有客製化的需求，則在該頁面的CSS檔最底下用@media print的方式直接書寫，所有的列印樣式會以@media print {…}包起來，以便整合Minify的CSS多檔合併機制。另外雖然print.css是屬於共用型的CSS，但是在引入順序上，我們並不會把他和其他共用型的CSS放在一起，而是會在最後一個才引入。

※在撰寫列印樣式時，可以先把列印樣式的媒體類型改為screen，這樣就能直接在瀏覽器上看你修改的樣式，而不用去看預覽列印。

相關參考內容：

1. 讓瀏覽器支援列印 CSS Background
2. 標記語言 打印樣式
3. 通過重定義CSS，實現網頁內容完美打印輸出
4. Print-Friendly Images and Logos with CSS
5. ALA’s New Print Styles
6. A Default Print Stylesheet Template
7. A useful print stylesheet
8. Go Green With CSS Print Stylesheets
9. 7 Tips for Great Print Style Sheets
10. Printing the Web: Solutions and Techniques