css打造HTML文字特效.ppt

《css打造HTML文字特效.ppt》由会员分享，可在线阅读，更多相关《css打造HTML文字特效.ppt（74页珍藏版）》请在三一办公上搜索。

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

2、1-3 設定文字粗細font-weight12-1-4 設定斜體字font-style12-1-5 轉換英文字母大小寫text-transform12-1-6 加上頂線、底線與刪除線text-decoration12-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 英吋,在不同電腦可能呈現不同的大小。,以數字加度量單位表示,至於 em 與 ex,由於在觀念上比較不同,因此要

4、特別說明。以下用 em 為例,至於 ex 只是參考的基準不同,其它方面都相同。假設將文字大小設為 1.5 em：倘若從上層元素所繼承的文字大小為 20px,則 1.5em 代表 1.5 20px 30px；同理,0.5em 代表 0.5 20px 10px。,以數字加度量單位表示,若在網頁用數字加度量單位指定了文字的絕對大小,便無法利用 IE6 的檢視/字型命令來縮小或放大文字；但是在 IE7 和 Firefox(所有版本),仍然都能按 Ctrl+鍵放大文字、+鍵縮小文字。,為何在 IE6 瀏覽器無法縮放文字大小？,CSS 預設有xx-small、x-small、small、medium、la

5、rge、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 放大一級,例如：,採用 smaller 或 larger,假設目前的參考文字大小為 x-small,larger 代表放大一級成為 small。或者：假設目前

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

8、定使用多種字型,每一種字型名稱必須以逗號（，）隔開。愈靠左邊的字型愈優先使用,例如：,12-1-2 選擇字型font-family,代表優先以華康瘦金體顯示；若無該字體,則以華康中黑體顯示；若無以上兩種字型,則以標楷體顯示；若這三種字型皆無,則以瀏覽器預設的字型顯示。,12-1-2 選擇字型font-family,12-1-2 選擇字型font-family,輸入字型名稱時,若該名稱包含空格,則必須以 或 包圍住,例如：Times New Roman 或 Times New Roman。,12-1-2 選擇字型font-family,而且務必要與作業系統所認定的字型名稱完全相同,多一個或少一個

9、空格都不行,例如：華康少女文字W8若誤植為“華康少女文字 W8”（多一個空格）,便是無效。但是即使在網頁內指定了字型,仍必須知道一個重要觀念：網頁文字能否以指定的字型顯示,不是網頁程式設計師能控制,而是由瀏覽者的電腦安裝了哪些字型所決定！,12-1-2 選擇字型font-family,舉例來說,我們在網頁指定用華康中黑體或華康少女文字W6兩種字體,可是瀏覽者的電腦並無這兩套字型,結果只好用瀏覽器預設的字型來顯示。所以,既然我們無法事先知道瀏覽者的電腦到底安裝了哪些字型,比較保險的方式,就是要確定在使用細明體時也能正確顯示網頁文字。,12-1-3 設定文字粗細font-weight,屬性值可以是

10、下兩類：100、200、300、400、500、600、700、800、900Lighter（較細）、Normal（正常）、Bold（加粗）、Bolder（更粗）,12-1-3 設定文字粗細font-weight,不過,實際上能否有這麼多種變化,還必須由字型本身來決定。以中文新細明體字型為例,只有 Normal（正常）與 Bold（加粗）兩種變化,設為 100500 都相當於正常；設為 600900 都相當於加粗。,12-1-3 設定文字粗細font-weight,12-1-3 設定文字粗細font-weight,12-1-4 設定斜體字font-style,對於英文字而言,italic（斜體

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

12、都是將正常的字型加以傾斜。,12-1-4 設定斜體字font-style,12-1-4 設定斜體字font-style,12-1-5 轉換英文字母大小寫text-transform,font-transform 屬性可設定英文字母大寫、小寫或首字大寫,屬性值有以下 4 種：uppercase：將網頁的所有英文字母轉為大寫。lowercase：將網頁的所有英文字母轉為小寫。capitalize：將網頁的所有英文單字,轉為首字大寫（亦即第 1 個字母大寫）。none：恢復為原本的大小寫狀態。,12-1-5 轉換英文字母大小寫text-transform,12-1-5 轉換英文字母大小寫text-t

13、ransform,12-1-6 加上頂線、底線與刪除線text-decoration,text-decoration 屬性用來將文字（中文或英文）加上頂線、底線或刪除線,屬性值可為以下 4 種：underline：將文字加上底線。overline：將文字加上頂線。line-through：將文字加上刪除線。none：恢復為原本的狀態。,12-1-6 加上頂線、底線與刪除線text-decoration,以上的屬性值可以多種同時使用,例如：加底線而且加刪除線。,12-1-6 加上頂線、底線與刪除線text-decoration,12-1-7 同時設定多種屬性font,先前所介紹過關於文字的屬性,

14、包含：font-family、font-size、font-weight 和 font-style 等 4 種,其實可以用一種屬性font來替代。font 屬性的語法如下：,12-1-7 同時設定多種屬性font,換言之,利用 font 屬性可以同時設定其它 4 種屬性,這種設定方式稱為簡便（Shorthand）設定。至於各種屬性值的限制,請參考前文。其中的font-size 屬性值與font-family 屬性值是必要、不可缺少的,而且兩者出現的順序也不可改變。至於font-style 屬性值與 font-weight 屬性值則為可有可無,出現的順序也可以調換。每一種屬性值之間至少必須以一個

15、半形空白隔開,例如：,12-1-7 同時設定多種屬性font,代表文字放大為 2 倍,優先使用華康仿宋體,其次使用華康中黑體。代表優先使用華康少女文字W4；文字放大為 1.5 倍；文字加粗。,12-1-7 同時設定多種屬性font,代表優先使用華康粗黑體；文字大小為 24 畫素,而且加粗傾斜。,12-1-7 同時設定多種屬性font,12-2 段落文字左右或置中對齊text-align,CSS 對於同一段落內文字,是以 text_align 屬性來改變對齊方式,其語法如下：屬性值有以下 4 種選擇：,12-2 靠左對齊left,常見的作法是將同一段落（paragraph）內的文字,統統靠左對齊

16、,例如：,12-2 靠左對齊left,12-2-2 靠右對齊right,在某些特殊的版面設計,會刻意將同一段落文字靠右對齊,空出左邊的空間作為其它用途,此時會用到 text-align:right 宣告。,12-2-2 靠右對齊right,12-2-3 置中對齊center,當文字字數很少,或是要作為標題時,我們就可以考慮利用 text-align:center 宣告,讓文字向中間靠齊。,12-2-3 置中對齊center,12-2-4 左右對齊justify,text-align:justify 宣告會要求每一列文字左右兩邊都對齊,當各列文字因字數或字型不同而無法直接對齊時,會自動拉大或縮小

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

18、域,如下圖的斜線區域：,12-3 垂直對齊vertical-align,12-3-1 上緣對齊top 或 text-top,top 與 text-top 雖然都是靠上緣對齊,但是兩者最大的差異在於對齊基準線的不同。top 是以顯示區域上緣為對齊基準線；而 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-to

19、p,12-3-2 下緣對齊bottom 或 text-bottom,bottom 與 text-bottom 都是靠下緣對齊,兩者最大的差異,如同 top 和 text-top,也是在於對齊基準線的不同。bottom 是以顯示區域下緣為對齊基準線；而 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,