Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

CSS樣式架構[3] 全站共用型 (Common):通用樣式、其他框架樣式與列印樣式

通用樣式 (style.)

這支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

  • -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.、treble.、narrow.、wide.)

當同一個站台,同時擁有單欄式、雙欄式或三欄式時,就需要加上此樣式。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

Leave a Reply

*