CSS排版程式(1)-概念與應用

CSS的優缺點

CSS(Cascading Style Sheets)是一種用來做網頁排版的程式。早期的網頁常使用表格(table)來做骨架進行排版,但是隨著資訊領域越來越強調內容與排版分離,CSS也就越來越盛行。使用CSS的好處是當你要更換網頁的版面配置時,只需要修改CSS即可,而且它可以針對大量的資料一起做樣式修改,不需要一頁一頁地調整。使用CSS就不需要傳統HTML的排版標籤了,因此在減少HTML標籤的同時,可以加快網頁的下載速度,尤其是當CSS被獨立成一個外部的檔案時,會有更明顯的影響。此外,CSS也提供了許多傳統HTML所做不到的畫面功能,可以使版面變得更精緻、更有彈性。

不過,當你想要學CSS來排版你的網頁時,可能還是要有一點心裡準備才行。首先是CSS因為樣式和內容是分開的,所以當你看到HTML檔案時,你無法直覺的了解這段標籤被設定的格式是什麼樣子,它可能受到標籤統一格式的影響,也有可能是受到Class或是ID的影響。所以在撰寫CSS時,最好培養良好的命名習慣,讓人可以一看就知道這個Class或是ID所代表的意義(針對內容做命名,而非樣式),很多人喜歡用縮寫,但其實CSS在命名上沒什麼字數的限字(也許是255個字),所以可以把它的意思寫清楚也無所謂。此外,在同一個網頁中,也要避免相同的ID或Class,在不同的頁面卻有不同的樣式出現,才不會造成以後改版時的錯亂。

學習CSS常見的第二個問題是,即使學會了語法也不見得能應用;雖然後面改版很輕鬆,但第一次撰寫網頁架構時會很辛苦,而且如果第一次沒寫好,後來更換版面時也有可能造成錯誤。本系列文章希望在最後面能用一些簡單的範例來讓讀者了解它的應用方式,不過要完全摸熟CSS語言,恐怕還是要自己試著架構出一個網站來才行。其實CSS的語言並不困難,只是你必需要了解它的排版邏輯,並且運用得宜。

CSS定義模式

當你要撰寫CSS,有四種方法可以使用。第一種方式是在HTML標籤中,直接加入 style 屬性:

這一段文字都會變成藍色的。

第二種方式是使用 style 標籤,並且寫在HTML的標籤之前:


第三種方式是直接將CSS的內容寫在.css檔案中(不必加style標籤),然後使用 link 標籤載入。一樣要寫在之前:


第四種方式和第三種一樣是寫在.css檔,只是載入的方式不同,是在 style 標籤中使用@import語法。它必需要寫在所有的CSS程式之前。此外,使用 link 語法會將新的語法取代舊有的,但@import的效果則會相加,所以要注意樣式間的衝突問題。


CSS媒體樣式

在載入CSS樣式時,若是加入media屬性,可以使網站在不同的設備中顯示出不同的排版結果(請參考link標籤說明)。例如我們如果開了一則Yahoo!奇摩新聞,當你直接按下列印時,印出來的結果也是和螢幕畫面上看到的不同,這就是透過CSS所控制出來的效果。CSS的media屬性如下:

  • screen:電腦螢幕
  • tv:電視
  • projection:劇場
  • handheld:掌上型裝置
  • print:列印
  • braille:觸感設備
  • embossed:盲文設備
  • aural:音頻
  • all:所有媒體

雖然CSS宣稱可以針對不同裝置顯示不同排版樣本,但實際使用時仍然需要根據裝置本身的設定來決定,有的時候並不一定有效。

CSS尺度單位

絕對單位:cm(公分)、mm(公厘)、in(英寸)、pt(磅/點,1/72英寸)、pc(picas,12磅)

相對單位:px(像素)、%(百分比)、em(該字體大寫M的高度)、ex(該字體小寫x的高度)

CSS系列文章參考網站:W3Schools

CSS系列文章參考書目:

More about CSS玩美樣式範例語典More about CSS Layout 達人的階梯( 附1光碟)