《css打造HTML文字特效.ppt》由会员分享，可在线阅读，更多相关《css打造HTML文字特效.ppt（74页珍藏版）》请在三一文库上搜索。
1、第 12 章,CSS 塑造文字特效,本章提要,12-1 字型與字體的變化 12-2 段落文字左右或置中對齊text-align 12-3 垂直對齊vertical-align,前言,文字是網頁的基本元素, 再怎麼陽春或花俏的網頁, 總還是要有文字相伴。所以我們首先來學習如何利用 CSS 塑造文字的變化效果。由於 W3C 建議採用 CSS 來設定文字的變化, 同時建議停用HTML 的 標籤。因此, 建議您學會本章的技巧之後, 盡量不要使用 標籤, 而改採符合趨勢的 CSS 來設定文字變化。,12-1 字型與字體的變化,12-1-1 改變文字大小font-size 12-1-2 選擇字型font-
2、family 12-1-3 設定文字粗細font-weight 12-1-4 設定斜體字font-style 12-1-5 轉換英文字母大小寫text-transform 12-1-6 加上頂線、底線與刪除線text-decoration 12-1-7 同時設定多種屬性font,文字變化的最基本功夫, 便是改變大小。 CSS 用 font-size 來設定文字的大小, 可採用絕對大小和相對大小 2 種方式來設定。,12-1-1 改變文字大小font-size,所謂絕對大小的設定方式, 通常是指用明確的數字或特定的文字（CSS 規定的保留字）, 來設定文字的大小。,絕對大小的設定方式,屬性值以數
3、字加度量單位表示如下：,以數字加度量單位表示,以上的 px 為度量單位, 各種度量單位的意義如下：,以數字加度量單位表示,上表中以 px 較為常用, 當我們以 Dreamweaver 或 FrontPage 設定文字大小時, 預設便是用 px 為單位。至於到英吋、厘米和毫米的單位, 則會因為螢幕解析度的不同而影響大小。舉例而言, 假設螢幕解析度是 72 DPI (Dot Per Inch), 代表 72 畫素等於 1 英吋；若螢幕解析度是 85 DPI, 則 85 畫素等於 1 英吋, 兩者就相差了 13 畫素, 因此即使指定文字大小為 1 英吋, 在不同電腦可能呈現不同的大小。,以數字加度量
4、單位表示,至於 em 與 ex, 由於在觀念上比較不同, 因此要特別說明。以下用 em 為例, 至於 ex 只是參考的基準不同, 其它方面都相同。假設將文字大小設為 1.5 em： 倘若從上層元素所繼承的文字大小為 20px, 則 1.5em 代表 1.5 20px 30px；同理, 0.5em 代表 0.5 20px 10px。,以數字加度量單位表示,若在網頁用數字加度量單位指定了文字的絕對大小, 便無法利用 IE6 的檢視/字型命令來縮小或放大文字；但是在 IE7 和 Firefox (所有版本), 仍然都能按 Ctrl + +鍵放大文字、 + 鍵縮小文字。,為何在 IE6 瀏覽器無法縮放
5、文字大小？,CSS 預設有xx-small、x-small、small、medium、large、x-large、xx-large 等 7 級預設的大小可供使用, 例如：,採用 7 級預設大小,這 7 級大小是以 medium 為基準, 每一級放大或縮小 1.2 倍, 而 medium 代表目前的文字大小（通常是繼承的大小或瀏覽器的預設文字大小）。由於不同瀏覽器的預設文字大小可能不同, 所以即使設定相同等級的文字, 仍可能顯示出不同的文字大小。,採用 7 級預設大小,所謂相對大小的設定方式, 是指以目前的文字大小為參考基準（通常是繼承的文字大小或瀏覽器的預設文字大小）, 然後設定為基準大小的若
6、干倍。一旦參考基準變更, 所指定的大小也隨之改變, 因此謂之相對。,相對大小的設定方式,例如： 假設目前的文字大小為 20px, 200% 代表放大為兩倍、成為 40px；同理, 400% 代表80px；50% 則縮小為 20px 的 0.5 倍, 成為 10px。經過實測發現：在 IE 中其實 1em 100%, 所以 2em 200%、3em 300%, 依此類推。,以 % 指定大小,沿用先前提過的xx-small、x-small、small、medium、large、x-large、xx-large這 7 級預設的大小, 以smaller縮小一級、larger 放大一級, 例如：,採用
7、smaller 或 larger,假設目前的參考文字大小為 x-small, larger 代表放大一級成為 small。或者： 假設目前的的參考文字大小為 large, smaller 代表縮小一級成為 medium,採用 smaller 或 larger,瞭解了如何設定文字的絕對大小與相對大小之後, 接著我們在以下的範例中, 刻意用不同的設定方式來改變文字的大小：,設定文字大小的綜合範例,設定文字大小的綜合範例,設定文字大小的綜合範例,對於大多數的網頁設計師來說, 系統預設的新細明體或細明體未必能展現網頁整體的風格, 因此會想選用其它的字型, 例如：黑體、隸書、少女字型等等。CSS 用fo
8、nt-family 來指定使用何種字型, 其語法如下：,12-1-2 選擇字型font-family,字型名稱1,字型名稱2,字型名稱3,代表可以一次指定使用多種字型, 每一種字型名稱必須以逗號（，）隔開。愈靠左邊的字型愈優先使用, 例如：,12-1-2 選擇字型font-family,代表優先以華康瘦金體顯示；若無該字體, 則以華康中黑體顯示；若無以上兩種字型, 則以標楷體顯示；若這三種字型皆無, 則以瀏覽器預設的字型顯示。,12-1-2 選擇字型font-family,12-1-2 選擇字型font-family,輸入字型名稱時, 若該名稱包含空格, 則必須以 “ 或 包圍住, 例如：“T
9、imes New Roman“ 或 Times New Roman。,12-1-2 選擇字型font-family,而且務必要與作業系統所認定的字型名稱完全相同, 多一個或少一個空格都不行, 例如：華康少女文字W8若誤植為“華康少女文字 W8”（多一個空格）, 便是無效。 但是即使在網頁內指定了字型, 仍必須知道一個重要觀念：網頁文字能否以指定的字型顯示, 不是網頁程式設計師能控制, 而是由瀏覽者的電腦安裝了哪些字型所決定！,12-1-2 選擇字型font-family,舉例來說, 我們在網頁指定用華康中黑體或華康少女文字W6兩種字體, 可是瀏覽者的電腦並無這兩套字型, 結果只好用瀏覽器預設的
10、字型來顯示。所以, 既然我們無法事先知道瀏覽者的電腦到底安裝了哪些字型, 比較保險的方式, 就是要確定在使用細明體時也能正確顯示網頁文字。,12-1-3 設定文字粗細font-weight,屬性值可以是下兩類： 100 、200 、300 、400 、500 、600 、700 、800 、900 Lighter（較細）、Normal（正常）、Bold（加粗）、Bolder（更粗）,12-1-3 設定文字粗細font-weight,不過, 實際上能否有這麼多種變化, 還必須由字型本身來決定。以中文新細明體字型為例, 只有 Normal（正常）與 Bold（加粗）兩種變化, 設為 100500
11、都相當於正常；設為 600900 都相當於加粗。,12-1-3 設定文字粗細font-weight,12-1-3 設定文字粗細font-weight,12-1-4 設定斜體字font-style,對於英文字而言, italic（斜體） 和 oblique（傾斜） 是兩種不同的字型, 前者是一種特定字型, 亦即在造字時就設計成斜斜的外觀, 這類字型的名稱通常會加上italic, 例如：Arial Italic、Bookman Old Style Italic、Times New Roman Italic等等。,12-1-4 設定斜體字font-style,後者則不是一種特定字型, 只是將正常字予
12、以傾斜。若對於非 italic 字型卻指定了 italic 值, 瀏覽器會自動改用 oblique 值, 將目前使用的字型予以傾斜化。 對於中文字而言, 很少有專門設計成斜體的字型, 所以無論是設為 italic 或 oblique 都沒差別, 所顯示的外觀都是將正常的字型加以傾斜。,12-1-4 設定斜體字font-style,12-1-4 設定斜體字font-style,12-1-5 轉換英文字母大小寫 text-transform,font-transform 屬性可設定英文字母大寫、小寫或首字大寫, 屬性值有以下 4 種： uppercase：將網頁的所有英文字母轉為大寫。 lower
13、case：將網頁的所有英文字母轉為小寫。 capitalize：將網頁的所有英文單字, 轉為首字大寫（亦即第 1 個字母大寫）。 none：恢復為原本的大小寫狀態。,12-1-5 轉換英文字母大小寫 text-transform,12-1-5 轉換英文字母大小寫 text-transform,12-1-6 加上頂線、底線與刪除線text-decoration,text-decoration 屬性用來將文字（中文或英文）加上頂線、底線或刪除線, 屬性值可為以下 4 種： underline：將文字加上底線。 overline：將文字加上頂線。 line-through：將文字加上刪除線。 non
14、e：恢復為原本的狀態。,12-1-6 加上頂線、底線與刪除線text-decoration,以上的屬性值可以多種同時使用, 例如：加底線而且加刪除線。,12-1-6 加上頂線、底線與刪除線text-decoration,12-1-7 同時設定多種屬性font,先前所介紹過關於文字的屬性, 包含：font-family 、font-size、font-weight 和 font-style 等 4 種, 其實可以用一種屬性font來替代。font 屬性的語法如下：,12-1-7 同時設定多種屬性font,換言之, 利用 font 屬性可以同時設定其它 4 種屬性, 這種設定方式稱為簡便（Shor
15、thand）設定。至於各種屬性值的限制, 請參考前文。其中的font-size 屬性值與font-family 屬性值是必要、不可缺少的, 而且兩者出現的順序也不可改變。至於font-style 屬性值與 font-weight 屬性值則為可有可無, 出現的順序也可以調換。每一種屬性值之間至少必須以一個半形空白隔開, 例如：,12-1-7 同時設定多種屬性font,代表文字放大為 2 倍, 優先使用華康仿宋體, 其次使用華康中黑體。 代表優先使用華康少女文字W4；文字放大為 1.5 倍；文字加粗。,12-1-7 同時設定多種屬性font,代表優先使用華康粗黑體；文字大小為 24 畫素, 而且加
16、粗傾斜。,12-1-7 同時設定多種屬性font,12-2 段落文字左右或置中對齊text-align,CSS 對於同一段落內文字, 是以 text_align 屬性來改變對齊方式, 其語法如下： 屬性值有以下 4 種選擇：,12-2 靠左對齊left,常見的作法是將同一段落（paragraph）內的文字, 統統靠左對齊, 例如：,12-2 靠左對齊left,12-2-2 靠右對齊right,在某些特殊的版面設計, 會刻意將同一段落文字靠右對齊, 空出左邊的空間作為其它用途, 此時會用到 text-align:right 宣告。,12-2-2 靠右對齊right,12-2-3 置中對齊cent
17、er,當文字字數很少, 或是要作為標題時, 我們就可以考慮利用 text-align:center 宣告, 讓文字向中間靠齊。,12-2-3 置中對齊center,12-2-4 左右對齊justify,text-align:justify 宣告會要求每一列文字左右兩邊都對齊, 當各列文字因字數或字型不同而無法直接對齊時, 會自動拉大或縮小字與字的間距, 以強迫左右兩邊都能對齊。,12-2-4 左右對齊justify,12-3 垂直對齊vertical-align,vertical-align 屬性是用來設定文字或圖片在垂直方向的對齊方式, 其語法如下： 常用的屬性值如下表：,12-3 垂直對齊
18、vertical-align,12-3 垂直對齊vertical-align,這裡出現了一個新名詞顯示區域, 我們必須先瞭解它所代表的意義, 才容易區分各個屬性值的差異。 當我們寫信的時候, 通常不會將整張信紙寫得滿滿的, 而是讓內容與信紙邊緣留一些空白, 以利於閱讀。同理, 瀏覽器顯示網頁時也並未用盡全部的範圍, 實際用來顯示文字或圖形的這塊區域便稱為顯示區域, 如下圖的斜線區域：,12-3 垂直對齊vertical-align,12-3-1 上緣對齊top 或 text-top,top 與 text-top 雖然都是靠上緣對齊, 但是兩者最大的差異在於對齊基準線的不同。top 是以顯示區域
19、上緣為對齊基準線；而 text-top 則是以上一層標籤所包含的文字之上緣為對齊基準線。坊間有些書籍或文件說它們的功能一樣, 實為謬誤。我們看以下的例子就會明白：,12-3-1 上緣對齊top 或 text-top,12-3-1 上緣對齊top 或 text-top,12-3-1 上緣對齊top 或 text-top,12-3-1 上緣對齊top 或 text-top,12-3-2 下緣對齊bottom 或 text-bottom,bottom 與 text-bottom 都是靠下緣對齊, 兩者最大的差異, 如同 top 和 text-top, 也是在於對齊基準線的不同。bottom 是以顯示
20、區域下緣為對齊基準線；而 bottom-top 則是以上一層標籤所包含的文字之下緣為對齊基準線, 兩者當然不會相同：,12-3-2 下緣對齊bottom 或 text-bottom,12-3-2 下緣對齊bottom 或 text-bottom,12-3-2 下緣對齊bottom 或 text-bottom,12-3-2 下緣對齊bottom 或 text-bottom,12-3-3 靠文字中線對齊middle,middle 的意義和 text-top 或 text-bottom 相似, 不過它是以上一層標籤所包含的文字之中線為對齊基準線：,12-3-3 靠文字中線對齊middle,12-3-4 設為上標字super,利用 super 可將文字設為上標字, 而上標字最常見到的用途, 是用來表示平方、三次方、四次方等等, 範例如下：,12-3-4 設為上標字super,12-3-5 設為下標字sub,利用 sub 可將文字設為下標字 , 而下標字通常出現在數學多項式、方程式等等場合, 範例如下：,12-3-5 設為下標字sub,