CSS文字与背景颜色.ppt

第 13 章 用CSS 設定 文字顏色與背景 本章提要 13-1 設定文字顏色－color 13-2 設定背景顏色－background-color 13-3 設定背景圖案－background-image 13-4 重複顯示背景圖案－background-repeat 13-5 指定背景圖案的顯示位置－background-position 13-6 固定背景圖案－background-attachment 13-7 有關背景的簡便設定－background 13-1 設定文字顏色－color 根據 W3C 的說法, color 屬性是用來設定網頁的『前景』（Foreground）。而實際測試的結果, 改變前景的顏色其實等於改變文字的顏色, 至於圖形則不受影響。 color 屬性的語法如下： 關於顏色的屬性值, 在 HTML 和 CSS 都是一樣, 可以用『顏色名稱』、『數字』和『百分比』等 3 種表示方式, 例如： 13-1 設定文字顏色－color red 代表紅色, 這種指定方式最直接、易懂。 下表是 HTML 4.0 規格所制訂的 16 種顏色名稱, 比較為大家普遍使用： 13-1 設定文字顏色－color 至於用數字或百分比, 則是按照紅（Red）、綠（Green）、藍（Blue）的順序, 指定它們所佔的比率, 例如： 代表紅色佔 25%；綠色佔 25%；藍色佔 50%。若改用 10 進位數字則相當於： 13-1 設定文字顏色－color 紅藍綠三色都從 0?255 劃分為 256 級, 100% 等於第 256 級, 然而因為是從 0 起算, 所以對應的級數是 255。 同理, 50% 對應到 127；25% 對應到 63。此外, 不一定要用 10 進位數字, 可以使用 16 進位數字, 但必須在前面加上 # 符號, 而且不必寫在 rgb() 內, 例如： 13-1 設定文字顏色－color 以井字符號『#』開頭的數字, 代表 16 進位數字, 左邊兩個 16 進位數字代表紅色的級數；中間兩個 16 進位數字代表綠色的級數；右邊兩個 16 進位數字代表藍色級數。 16 進位的 3F3F7F 相當於 10 進位的 63,63,127, 但是兩者的表示方法不同, 16 進位數字以井字號『#』開頭；而 10 進位數字必須包含在 rgb() 內, 而且用半形逗號『,』隔開每個數字。 13-1 設定文字顏色－color 以下我們分別用 3 種不同方式來設定網頁文字的顏色： 以 3 位數的 16 進位數字表示顏色 我們或許會看到有的程式碼以『#123』這種格式代表顏色, 此時要特別注意：它並非代表紅、綠、藍三色的級數是 1、2、3, 而是『11 、22 、33』。 因為在 W3C 的規範中, 相同的兩個 16 進位數字可以簡寫為一個, 所以 #123 其實是 #112233 的簡寫。 雖然這種用 3 位數代替 6 位數的寫法比較簡易, 不過我們卻認為容易讓初學者誤解, 因此建議還是把 6 位數都寫清楚比較好。 13-2 設定背景顏色－background-color 我們要建立一個觀念－能否清楚地呈現網頁文字, 除了文字本身的顏色之外, 另一個重要關鍵是背景顏色的搭配。 舉一個實例來說, 曾經有位朋友反映它的網頁無法顯示任何文字, 即使一再檢查標籤、語法, 都看不出有錯, 卻偏偏就是無法顯示文字！後來幾經波折, 終於發現問題在於 『文字顏色與背景顏色相同』 , 所以其實有顯示文字, 只是肉眼看不出來。 13-2 設定背景顏色－background-color 因此在規劃網頁時, 文字色彩和背景色彩同樣重要, 應該一併考量, 才能確保顯示品質。 background-color 屬性的語法如下： 13-2 設定背景顏色－background-color 這裡的屬性值與上一節 color 的顏色屬性值完全相同, 可以用以下多種方式來設定： 13-2 設定背景顏色－background-color 上例是針對 body 標籤設定背景色, 所以整個網頁背景呈現同一種顏色。其實, 另一種常見的用法是對於區塊標籤（包括：p、h1?h6、div、ol、ou、dl、form 等等） 設定背景色, 使不同的區塊有不同的背景色, 例如： 13-2 設定背景顏色－background-color 13-2 設定背景顏色－background-color 13-2 設定背景顏色－background-color 13-2 設定背景顏色－background-color 13-3 設定背景圖案－background- image 網頁的背景若都只是單一顏色, 看起來難免單調, 因此我們不妨善用 background-imag