css打造三html文字特效.ppt

第 12 章 CSS 塑造文字特效 本章提要 12-1 字型與字體的變化 12-2 段落文字左右或置中對齊－text-align 12-3 垂直對齊－vertical-align 前言 文字是網頁的基本元素, 再怎麼陽春或花俏的網頁, 總還是要有文字相伴。所以我們首先來學習如何利用 CSS 塑造文字的變化效果。由於 W3C 建議採用 CSS 來設定文字的變化, 同時建議停用HTML 的 font 標籤。因此, 建議您學會本章的技巧之後, 盡量不要使用 font 標籤, 而改採符合趨勢的 CSS 來設定文字變化。 12-1 字型與字體的變化 12-1-1 改變文字大小－font-size 12-1-2 選擇字型－font-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 12-1-1 改變文字大小－font-size 文字變化的最基本功夫, 便是改變大小。 CSS 用 font-size 來設定文字的大小, 可採用『絕對大小』和『相對大小』 2 種方式來設定。 絕對大小的設定方式 所謂『絕對大小』的設定方式, 通常是指用明確的數字或特定的文字（CSS 規定的保留字）, 來設定文字的大小。 以『數字』加『度量單位』表示 屬性值以『數字』加『度量單位』表示如下： 以『數字』加『度量單位』表示 以上的 px 為度量單位, 各種度量單位的意義如下： 以『數字』加『度量單位』表示 上表中以 px 較為常用, 當我們以 Dreamweaver 或 FrontPage 設定文字大小時, 預設便是用 px 為單位。至於到英吋、厘米和毫米的單位, 則會因為螢幕解析度的不同而影響大小。舉例而言, 假設螢幕解析度是 72 DPI (Dot Per Inch), 代表 72 畫素等於 1 英吋；若螢幕解析度是 85 DPI, 則 85 畫素等於 1 英吋, 兩者就相差了 13 畫素, 因此即使指定文字大小為 1 英吋, 在不同電腦可能呈現不同的大小。 以『數字』加『度量單位』表示 至於 em 與 ex, 由於在觀念上比較不同, 因此要特別說明。以下用 em 為例, 至於 ex 只是參考的基準不同, 其它方面都相同。假設將文字大小設為 1.5 em： 倘若從上層元素所繼承的文字大小為 20px, 則 1.5em 代表 1.5 × 20px ＝ 30px；同理, 0.5em 代表 0.5 × 20px ＝ 10px。 為何在 IE6 瀏覽器無法縮放文字大小？ 若在網頁用數字加度量單位指定了文字的絕對大小, 便無法利用 IE6 的『檢視/字型』命令來縮小或放大文字；但是在 IE7 和 Firefox (所有版本), 仍然都能按 Ctrl + +鍵放大文字、 + 鍵縮小文字。 採用 7 級預設大小 CSS 預設有xx-small、x-small、small、medium、large、x-large、xx-large 等 7 級預設的大小可供使用, 例如： 採用 7 級預設大小 這 7 級大小是以 medium 為基準, 每一級放大或縮小 1.2 倍, 而 medium 代表目前的文字大小（通常是繼承的大小或瀏覽器的預設文字大小）。由於不同瀏覽器的預設文字大小可能不同, 所以即使設定相同等級的文字, 仍可能顯示出不同的文字大小。 相對大小的設定方式 所謂『相對大小』的設定方式, 是指以目前的文字大小為參考基準（通常是繼承的文字大小或瀏覽器的預設文字大小）, 然後設定為基準大小的若干倍。一旦參考基準變更, 所指定的大小也隨之改變, 因此謂之『相對』。 以 % 指定大小 例如： 假設目前的文字大小為 20px, 200% 代表放大為兩倍、成為 40px；同理, 400% 代表80px；50% 則縮小為 20px 的 0.5 倍, 成為 10px。經過實測發現：在 IE 中其實 1em ＝100%, 所以 2em ＝ 200%、3em ＝ 300%…, 依此類推。 採用 smaller 或 larger 沿用先前提過的xx-small、x-small、small、medium、large、x-large、xx-large這 7 級預設的大小, 以smaller縮小一級、larger 放大一級, 例如： 採用 smaller 或 larger 假設目前的參考文字大小為 x-small, larger 代表放大一級成為 small。或者： 假設目前的的參考文字大小為 large, smaller 代表縮小一級成為 medi