css打造HTML文字特效.ppt
《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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- css 打造 HTML 文字特效
链接地址:https://www.31doc.com/p-2142161.html