css打造HTML文字特效

1、css打造HTML文字特效 2 本章提要本章提要 p12-1 字型與字體的變化 p12-2 段落文字左右或置中對齊text- align p12-3 垂直對齊vertical-align 3 前言前言 p文字是網頁的基本元素, 再怎麼陽春或花俏 的網頁, 總還是要有文字相伴。所以我們首 先來學習如何利用 CSS 塑造文字的變化效 果。由於 W3C 建議採用 CSS 來設定文字 的變化, 同時建議停用HTML 的 標籤。因此, 建議您學會本章的技巧之後, 盡量不要使用 標籤, 而改採符合 趨勢的 CSS 來設定文字變化。 4 12-1 字型與字體的變化字型與字體的變化 p12-1-1 改變文字大

2、小font-size p12-1-2 選擇字型font-family p12-1-3 設定文字粗細font-weight p12-1-4 設定斜體字font-style p12-1-5 轉換英文字母大小寫text- transform p12-1-6 加上頂線、底線與刪除線text- decoration p12-1-7 同時設定多種屬性font 5 p文字變化的最基本功夫, 便是改變大小。 CSS 用 font-size 來設定文字的大小, 可 採用絕對大小和相對大小 2 種方 式來設定。 12-1-1 改變文字大小改變文字大小font-size 6 p所謂絕對大小的設定方式, 通常是指用

3、明確的數字或特定的文字（CSS 規定的保 留字）, 來設定文字的大小。 絕對大小的設定方式絕對大小的設定方式 7 p屬性值以數字加度量單位表示如 下： 以以數字數字加加度量單位度量單位表示表示 8 p以上的 px 為度量單位, 各種度量單位的意 義如下： 以以數字數字加加度量單位度量單位表示表示 9 p上表中以 px 較為常用, 當我們以 Dreamweaver 或 FrontPage 設定文字 大小時, 預設便是用 px 為單位。至於到英 吋、厘米和毫米的單位, 則會因為螢幕解析 度的不同而影響大小。舉例而言, 假設螢幕 解析度是 72 DPI (Dot Per Inch), 代表 72 畫

4、素等於 1 英吋；若螢幕解析度是 85 DPI, 則 85 畫素等於 1 英吋, 兩者就相差 了 13 畫素, 因此即使指定文字大小為 1 英吋, 在不同電腦可能呈現不同的大小。 以以數字數字加加度量單位度量單位表示表示 10 p至於 em 與 ex, 由於在觀念上比較不同, 因此要特別說明。以下用 em 為例, 至於 ex 只是參考的基準不同, 其它方面都相同。 假設將文字大小設為 1.5 em： p倘若從上層元素所繼承的文字大小為 20px, 則 1.5em 代表 1.5 20px 30px； 同理, 0.5em 代表 0.5 20px 10px。 以以數字數字加加度量單位度量單位表示表示

5、 11 p若在網頁用數字加度量單位指定了文字的 絕對大小, 便無法利用 IE6 的檢視檢視/字型字型 命令來縮小或放大文字；但是在 IE7 和 Firefox (所有版本), 仍然都能按 Ctrl + + 鍵放大文字、 + 鍵縮小文字。 為何在為何在 IE6 瀏覽器無法縮放文字大瀏覽器無法縮放文字大 小？小？ 12 pCSS 預設有xx-small、x-small、 small、medium、large、x-large、 xx-large 等 7 級預設的大小可供使用, 例如： 採用採用 7 級預設大小級預設大小 13 p這 7 級大小是以 medium 為基準, 每一級 放大或縮小 1.2

6、倍, 而 medium 代表目前 的文字大小（通常是繼承的大小或瀏覽器 的預設文字大小）。由於不同瀏覽器的預 設文字大小可能不同, 所以即使設定相同等 級的文字, 仍可能顯示出不同的文字大小。 採用採用 7 級預設大小級預設大小 14 p所謂相對大小的設定方式, 是指以目前 的文字大小為參考基準（通常是繼承的文 字大小或瀏覽器的預設文字大小）, 然後設 定為基準大小的若干倍。一旦參考基準變 更, 所指定的大小也隨之改變, 因此謂之 相對。 相對大小的設定方式相對大小的設定方式 15 p例如： p假設目前的文字大小為 20px, 200% 代表 放大為兩倍、成為 40px；同理, 400% 代

7、表80px；50% 則縮小為 20px 的 0.5 倍, 成為 10px。經過實測發現：在 IE 中其實 1em 100%, 所以 2em 200%、 3em 300%, 依此類推。 以以 % 指定大小指定大小 16 p沿用先前提過的xx-small、x-small、 small、medium、large、x-large、 xx-large這 7 級預設的大小, 以smaller 縮小一級、larger 放大一級, 例如： 採用採用 smaller 或或 larger 17 p假設目前的參考文字大小為 x-small, larger 代表放大一級成為 small。或者： p假設目前的的參考文字

8、大小為 large, smaller 代表縮小一級成為 medium 採用採用 smaller 或或 larger 18 p瞭解了如何設定文字的絕對大小與相對大 小之後, 接著我們在以下的範例中, 刻意用 不同的設定方式來改變文字的大小： 設定文字大小的綜合範例設定文字大小的綜合範例 19 設定文字大小的綜合範例設定文字大小的綜合範例 20 設定文字大小的綜合範例設定文字大小的綜合範例 21 p對於大多數的網頁設計師來說, 系統預設的 新細明體或細明體未必能展現網 頁整體的風格, 因此會想選用其它的字型, 例如：黑體、隸書、少女字型等等。CSS 用font-family 來指定使用何種字型,

9、其 語法如下： 12-1-2 選擇字型選擇字型font-family 22 p字型名稱字型名稱1,字型名稱字型名稱2,字型名稱字型名稱3,代表 可以一次指定使用多種字型, 每一種字型名 稱必須以逗號（，）隔開。愈靠左邊的字 型愈優先使用, 例如： 12-1-2 選擇字型選擇字型font-family 23 p代表優先以華康瘦金體顯示；若無該 字體, 則以華康中黑體顯示；若無以上 兩種字型, 則以標楷體顯示；若這三種 字型皆無, 則以瀏覽器預設的字型顯示。 12-1-2 選擇字型選擇字型font-family 24 12-1-2 選擇字型選擇字型font-family p輸入字型名稱時, 若該名

10、稱包含空格, 則必 須以 或 包圍住, 例如：Times New Roman 或 Times New Roman。 25 12-1-2 選擇字型選擇字型font-family p而且務必要與作業系統所認定的字型名稱 完全相同, 多一個或少一個空格都不行, 例 如：華康少女文字W8若誤植為“華 康少女文字 W8”（多一個空格）, 便是 無效。 p但是即使在網頁內指定了字型, 仍必須知道 一個重要觀念：網頁文字能否以指定的字 型顯示, 不是網頁程式設計師能控制, 而是 由瀏覽者的電腦安裝了哪些字型所決定！ 26 12-1-2 選擇字型選擇字型font-family p舉例來說, 我們在網頁指定用華

11、康中黑體 或華康少女文字W6兩種字體, 可是瀏 覽者的電腦並無這兩套字型, 結果只好用瀏 覽器預設的字型來顯示。所以, 既然我們無 法事先知道瀏覽者的電腦到底安裝了哪些 字型, 比較保險的方式, 就是要確定在使用 細明體時也能正確顯示網頁文字。 27 12-1-3 設定文字粗細設定文字粗細font-weight p屬性值可以是下兩類： n100 、200 、300 、400 、500 、 600 、700 、800 、900 nLighter（較細）、（較細）、Normal（正常）、（正常）、 Bold（加粗）、（加粗）、Bolder（更粗）（更粗） 28 12-1-3 設定文字粗細設定文字粗

12、細font-weight p不過, 實際上能否有這麼多種變化, 還必須 由字型本身來決定。以中文新細明體字型 為例, 只有 Normal（正常）與 Bold（加粗）兩種變化, 設為 100 500 都相當於正常；設為 600900 都相當於加粗。 29 12-1-3 設定文字粗細設定文字粗細font-weight 30 12-1-3 設定文字粗細設定文字粗細font-weight 31 12-1-4 設定斜體字設定斜體字font-style p對於英文字而言, italic（斜體） 和 oblique（傾斜） 是兩種不同的字型, 前者 是一種特定字型, 亦即在造字時就設計成斜 斜的外觀, 這類

13、字型的名稱通常會加上 italic, 例如：Arial Italic、 Bookman Old Style Italic、 Times New Roman Italic等等。 32 12-1-4 設定斜體字設定斜體字font-style p後者則不是一種特定字型, 只是將正常字予 以傾斜。若對於非 italic 字型卻指定了 italic 值, 瀏覽器會自動改用 oblique 值, 將目前使用的字型予以傾斜化。 p對於中文字而言, 很少有專門設計成斜體的 字型, 所以無論是設為 italic 或 oblique 都沒差別, 所顯示的外觀都是將正常的字型 加以傾斜。 33 12-1-4 設定斜

14、體字設定斜體字font-style 34 12-1-4 設定斜體字設定斜體字font-style 35 12-1-5 轉換英文字母大小寫轉換英文字母大小寫 text-transform pfont-transform 屬性可設定英文字母大寫、 小寫或首字大寫, 屬性值有以下 4 種： nuppercase：將網頁的所有英文字母轉 為大寫。 nlowercase：將網頁的所有英文字母轉 為小寫。 ncapitalize：將網頁的所有英文單字, 轉為首字大寫（亦即第 1 個字母大寫）。 nnone：恢復為原本的大小寫狀態。 36 12-1-5 轉換英文字母大小寫轉換英文字母大小寫 text-tra

15、nsform 37 12-1-5 轉換英文字母大小寫轉換英文字母大小寫 text-transform 38 12-1-6 加上頂線、底線與刪除線加上頂線、底線與刪除線 text-decoration ptext-decoration 屬性用來將文字（中文 或英文）加上頂線、底線或刪除線, 屬性值 可為以下 4 種： nunderline：將文字加上底線。 noverline：將文字加上頂線。 nline-through：將文字加上刪除線。 nnone：恢復為原本的狀態。 39 12-1-6 加上頂線、底線與刪除線加上頂線、底線與刪除線 text-decoration p以上的屬性值可以多種同時

16、使用, 例如：加 底線而且加刪除線。 40 12-1-6 加上頂線、底線與刪除線加上頂線、底線與刪除線 text-decoration 41 12-1-7 同時設定多種屬性同時設定多種屬性font p先前所介紹過關於文字的屬性, 包含： font-family 、font-size、font- weight 和 font-style 等 4 種, 其實可 以用一種屬性font來替代。font 屬性的 語法如下： 42 12-1-7 同時設定多種屬性同時設定多種屬性font p換言之, 利用 font 屬性可以同時設定其它 4 種屬性, 這種設定方式稱為簡便 （Shorthand）設定。至於各種

17、屬性值 的限制, 請參考前文。其中的font-size 屬性值屬性值與font-family 屬性值屬性值是必 要、不可缺少的, 而且兩者出現的順序也不順序也不 可改變可改變。至於font-style 屬性值與 font- weight 屬性值則為可有可無, 出現的順序 也可以調換。每一種屬性值之間至少必須 以一個半形空白隔開, 例如： 43 12-1-7 同時設定多種屬性同時設定多種屬性font p代表文字放大為 2 倍, 優先使用華康仿宋 體, 其次使用華康中黑體。 p代表優先使用華康少女文字W4；文字放大 為 1.5 倍；文字加粗。 44 12-1-7 同時設定多種屬性同時設定多種屬性f

18、ont p代表優先使用華康粗黑體；文字大小為 24 畫素, 而且加粗傾斜。 45 12-1-7 同時設定多種屬性同時設定多種屬性font 46 12-2 段落文字左右或置中對齊段落文字左右或置中對齊 text-align pCSS 對於同一段落內文字, 是以 text_align 屬性來改變對齊方式, 其語法 如下： p屬性值有以下 4 種選擇： 47 12-2 靠左對齊靠左對齊left p常見的作法是將同一段落（paragraph） 內的文字, 統統靠左對齊, 例如： 48 12-2 靠左對齊靠左對齊left 49 12-2-2 靠右對齊靠右對齊right p在某些特殊的版面設計, 會刻意將

19、同一段落 文字靠右對齊, 空出左邊的空間作為其它用 途, 此時會用到 text-align:right 宣告。 50 12-2-2 靠右對齊靠右對齊right 51 12-2-3 置中對齊置中對齊center p當文字字數很少, 或是要作為標題時, 我們 就可以考慮利用 text-align:center 宣告, 讓文字向中間靠齊。 52 12-2-3 置中對齊置中對齊center 53 12-2-4 左右對齊左右對齊justify ptext-align:justify 宣告會要求每一列文字 左右兩邊都對齊, 當各列文字因字數或字型 不同而無法直接對齊時, 會自動拉大或縮小 字與字的間距,

20、以強迫左右兩邊都能對齊。 54 12-2-4 左右對齊左右對齊justify 55 12-3 垂直對齊垂直對齊vertical-align pvertical-align 屬性是用來設定文字或圖片 在垂直方向的對齊方式, 其語法如下： p常用的屬性值如下表： 56 12-3 垂直對齊垂直對齊vertical-align 57 12-3 垂直對齊垂直對齊vertical-align p這裡出現了一個新名詞顯示區域, 我 們必須先瞭解它所代表的意義, 才容易區分 各個屬性值的差異。 p當我們寫信的時候, 通常不會將整張信紙寫 得滿滿的, 而是讓內容與信紙邊緣留一些空 白, 以利於閱讀。同理, 瀏覽

21、器顯示網頁時 也並未用盡全部的範圍, 實際用來顯示文字 或圖形的這塊區域便稱為顯示區域, 如 下圖的斜線區域： 58 12-3 垂直對齊垂直對齊vertical-align 59 12-3-1 上緣對齊上緣對齊top 或或 text-top ptop 與 text-top 雖然都是靠上緣對齊, 但是兩者最大的差異在於對齊基準線 的不同。top 是以顯示區域上緣為對 齊基準線；而 text-top 則是以上一層 標籤所包含的文字之上緣為對齊基準線。 坊間有些書籍或文件說它們的功能一樣, 實 為謬誤。我們看以下的例子就會明白： 60 12-3-1 上緣對齊上緣對齊top 或或 text-top 61 12-3-1 上緣對齊上緣對齊top 或或 text-top 62 12-3-1 上緣對齊上緣對齊top 或或 text-to