Download presentation
Presentation is loading. Please wait.
1
第 13 章 用CSS 設定 文字顏色與背景
2
本章提要 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
3
13-1 設定文字顏色－color 根據 W3C 的說法, color 屬性是用來設定網頁的『前景』（Foreground）。而實際測試的結果, 改變前景的顏色其實等於改變文字的顏色, 至於圖形則不受影響。 color 屬性的語法如下： 關於顏色的屬性值, 在 HTML 和 CSS 都是一樣, 可以用『顏色名稱』、『數字』和『百分比』等 3 種表示方式, 例如：
4
13-1 設定文字顏色－color red 代表紅色, 這種指定方式最直接、易懂。
下表是 HTML 4.0 規格所制訂的 16 種顏色名稱, 比較為大家普遍使用：
5
13-1 設定文字顏色－color 至於用數字或百分比, 則是按照紅（Red）、綠（Green）、藍（Blue）的順序, 指定它們所佔的比率, 例如： 代表紅色佔 25%；綠色佔 25%；藍色佔 50%。若改用 10 進位數字則相當於：
6
13-1 設定文字顏色－color 紅藍綠三色都從 0〜255 劃分為 256 級, 100% 等於第 256 級, 然而因為是從 0 起算, 所以對應的級數是 255。 同理, 50% 對應到 127；25% 對應到 63。此外, 不一定要用 10 進位數字, 可以使用 16 進位數字, 但必須在前面加上 # 符號, 而且不必寫在 rgb() 內, 例如：
7
13-1 設定文字顏色－color 以井字符號『#』開頭的數字, 代表 16 進位數字, 左邊兩個 16 進位數字代表紅色的級數；中間兩個 16 進位數字代表綠色的級數；右邊兩個 16 進位數字代表藍色級數。 16 進位的 3F3F7F 相當於 10 進位的 63,63,127, 但是兩者的表示方法不同, 16 進位數字以井字號『#』開頭；而 10 進位數字必須包含在 rgb() 內, 而且用半形逗號『,』隔開每個數字。
8
13-1 設定文字顏色－color 以下我們分別用 3 種不同方式來設定網頁文字的顏色：
9
以 3 位數的 16 進位數字表示顏色 我們或許會看到有的程式碼以『#123』這種格式代表顏色, 此時要特別注意：它並非代表紅、綠、藍三色的級數是 1、2、3, 而是『11 、22 、33』。 因為在 W3C 的規範中, 相同的兩個 16 進位數字可以簡寫為一個, 所以 #123 其實是 # 的簡寫。 雖然這種用 3 位數代替 6 位數的寫法比較簡易, 不過我們卻認為容易讓初學者誤解, 因此建議還是把 6 位數都寫清楚比較好。
10
13-2 設定背景顏色－background-color
我們要建立一個觀念－能否清楚地呈現網頁文字, 除了文字本身的顏色之外, 另一個重要關鍵是背景顏色的搭配。 舉一個實例來說, 曾經有位朋友反映它的網頁無法顯示任何文字, 即使一再檢查標籤、語法, 都看不出有錯, 卻偏偏就是無法顯示文字！後來幾經波折, 終於發現問題在於 『文字顏色與背景顏色相同』 , 所以其實有顯示文字, 只是肉眼看不出來。
11
13-2 設定背景顏色－background-color
因此在規劃網頁時, 文字色彩和背景色彩同樣重要, 應該一併考量, 才能確保顯示品質。 background-color 屬性的語法如下：
12
13-2 設定背景顏色－background-color
設為綠色背景 設為黃色背景 設為白色背景 設為藍色背景
13
13-2 設定背景顏色－background-color
上例是針對 <body> 標籤設定背景色, 所以整個網頁背景呈現同一種顏色。其實, 另一種常見的用法是對於區塊標籤（包括：<p>、<h1>〜<h6>、<div>、<ol>、<ou>、<dl>、<form> 等等） 設定背景色, 使不同的區塊有不同的背景色, 例如：
14
13-2 設定背景顏色－background-color
15
13-2 設定背景顏色－background-color
16
13-2 設定背景顏色－background-color
17
13-2 設定背景顏色－background-color
18
13-3 設定背景圖案－background- image
在 url 括弧( )裡的圖檔路徑可以是絕對路徑或相對路徑, 重點是所指定的圖檔必須存在。在指定時, 初學者經常會漏掉 url( )、只輸入圖檔路徑, 導致無法顯示指定的圖案。
19
13-3 設定背景圖案－background- image
若一個背景圖案的大小無法涵蓋整個畫面時, 預設會自動重複顯示, 猶如貼磁磚一樣, 貼滿整個畫面。如果不想要這種效果, 可以用下一節將會介紹的 background-repeat 來控制。
20
13-3 設定背景圖案－background- image
21
背景顏色與背景圖案的優先順序 許多初學者看到這一節的時候, 心中會有一個疑問：『若同時設定了背景顏色與背景圖案, 我們究竟會看到哪一個呢？』
背景顏色與背景圖案的關係就像貼色紙, 背景圖案是貼在背景顏色之上, 所以若同時設定兩者, 我們只會看到背景圖案, 看不到被覆蓋在下層的背景顏色。 同樣道理, 若我們還設定了框線的顏色, 因為框線又是貼在背景圖案之上, 所以會遮住一部份的背景圖案。
22
13-3 設定背景圖案－background- image
同樣地, 我們可以針對不同的區塊標籤, 分別設定不同的背景圖案：
23
13-4 重複顯示背景圖案－background-repeat
先前使用 background-image 屬性設定背景圖案時, 若一個圖案未能佔滿整個畫面,便會自動重複顯示, 填滿整個畫面。 倘若我們不想如此, 就必須搭配使用本節要說明的background-repeat 來設定是否重複顯示, 或如何重複顯示。background-repeat 屬性的語法如下：
24
13-4 重複顯示背景圖案－background-repeat
這裡可用的屬性值有下列 4 個： no-repeat：不重複顯示。 repeat-x：沿 X 軸方向重複。 repeat-y：沿 Y 軸方向重複。 repeat：沿 X 軸方向和 Y 軸方向重複。
25
13-4 重複顯示背景圖案－background-repeat
在實務上, 我們應該先以 background-image 設定背景圖案後, 才搭配使用background-repeat。否則, 沒有背景圖案、卻設定如何重複顯示背景圖案, 根本就沒意義。
26
no-repeat no-repeat 只忠實顯示背景圖案的實際大小, 未佔滿螢幕的部分則不予理會。
27
no-repeat
28
repeat-x 背景圖案只沿著水平方向（X 軸方向）重複顯示。
29
repeat-x
30
repeat-y 背景圖案只沿著垂直方向（Y 軸方向）重複顯示。
31
repeat-y
32
repeat 背景圖案沿著水平和垂直方向重複顯示, 就像貼磁磚一樣貼滿整個畫面。這也是系統的預設值。
33
repeat
34
13-5 指定背景圖案的顯示位置－ background-position
其實我們可以利用background-position 來改變顯示位置, 為網頁添加更豐富的變化。這可是光用 HTML 標籤所無法做到的功能喔！ background-position 屬性的語法如下： background-position 的屬性值比較多樣, 可以是『保留字』、『百分比』或『數字』其中一種。
35
用『保留字』指定位置 屬性值為保留字時, 應一次給予兩個保留字, 中間以半形空白隔開：
左邊的保留字設定水平方向位置, 有center（中）、left（左）、right（右） 3 個可用；右邊的保留字設定垂直方向位置, 有 top（上）、center（中）、bottom（下） 3 個可用。
36
13-5 指定背景圖案的顯示位置－ background-position
兩者總共可以排列組合出 9 個位置, 如下圖：
37
13-5 指定背景圖案的顯示位置－ background-position
在所有的保留字當中, 唯有 center 與眾不同, 因為它是以『圖案的中心』為對齊的基準點；而其它的保留字則都是以『圖案邊緣』為對齊的基準點。例如：
38
13-5 指定背景圖案的顯示位置－ background-position
X 軸中心
39
13-5 指定背景圖案的顯示位置－ background-position
40
注意, 遇到空白要加上 ""！ 由於『left center』這種寫法中間包含了空白, 所以當我們以 <style> 標籤來定義CSS 時, 務必要將等號（=）後面的所有文字包含在兩個雙引號(“)之內, 否則會出現非預期的顯示畫面。 同理, 後面以『百分比』或『數字』作為屬性值, 也包含空白在內, 自然也是要用雙引號圍住。
41
用『百分比』指定位置 屬性值為百分比數字時, 同樣是一次給予兩個, 中間以半形空白隔開：
第 1 個百分比數字代表 X 軸方向的位置, 以 X 軸的最大長度為 100%；第 2 個百分比數字代表 Y 軸方向位置, 以 Y 軸的最大長度為 100%。用百分比的指定方式, 因為可以訂出的位置更多, 所以比起用保留字更有彈性。
42
用『百分比』指定位置
43
用『百分比』指定位置
44
用『數字』指定位置 屬性值為數字時, 後面必須加上度量單位, 例如：pt、px 等等。一次給定 X 軸方向和 Y 軸方向的座標, 定出顯示位置：
45
用『數字』指定位置
46
用『數字』指定位置
47
13-6 固定背景圖案－background-attachment
當我們使用公司的商標、Logo 或具有特殊意義的圖案作為背景時, 可能會希望無論畫面往上、下、左、右捲動時, 在指定的位置始終會出現背景圖案。這種需求必須藉由background-attachment 屬性來做到, 其語法如下：
48
13-6 固定背景圖案－background-attachment
background-attachment 的屬性值蠻簡單, 就只有 『fixed』 和 『scroll』 兩個。 『fixed』 就是將背景圖案固定, 即使捲動畫面也對它毫無影響；而 『scroll』 則是會隨著捲動畫面而看不到背景圖案。
49
13-6 固定背景圖案－background-attachment
50
13-6 固定背景圖案－background-attachment
51
13-7 有關背景的簡便設定－background
前面介紹了哪麼多屬性, 真正用到時不免要輸入一大串文字。其實, 我們可以用background 這個屬性一次做完簡便（Shorthand）設定, 其語法如下： 至於 background 的屬性值, 其實就是沿用前面各節介紹過的屬性值, 在這裡可以不必按照順序輸入, 但是各屬性值之間必須用半形空白隔開, 更別忘應該用雙引號（"）圍住。
52
13-7 有關背景的簡便設定－background
舉例如下：
Similar presentations
