css打造HTML文字特效

css打造HTML文字特效

ID:45055518

大小:8.57 MB

页数:74页

时间:2019-11-08

css打造HTML文字特效_第1页
css打造HTML文字特效_第2页
css打造HTML文字特效_第3页
css打造HTML文字特效_第4页
css打造HTML文字特效_第5页
资源描述:

《css打造HTML文字特效》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

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

2、nt-size12-1-2選擇字型-font-family12-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所謂『絕對大小』的設定方式,

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

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

5、視/字型』命令來縮小或放大文字;但是在IE7和Firefox(所有版本),仍然都能按Ctrl++鍵放大文字、+鍵縮小文字。為何在IE6瀏覽器無法縮放文字大小?CSS預設有xx-small、x-small、small、medium、large、x-large、xx-large等7級預設的大小可供使用,例如:採用7級預設大小這7級大小是以medium為基準,每一級放大或縮小1.2倍,而medium代表目前的文字大小(通常是繼承的大小或瀏覽器的預設文字大小)。由於不同瀏覽器的預設文字大小可能不同,所以即使設定相同等

6、級的文字,仍可能顯示出不同的文字大小。採用7級預設大小所謂『相對大小』的設定方式,是指以目前的文字大小為參考基準(通常是繼承的文字大小或瀏覽器的預設文字大小),然後設定為基準大小的若干倍。一旦參考基準變更,所指定的大小也隨之改變,因此謂之『相對』。相對大小的設定方式例如:假設目前的文字大小為20px,200%代表放大為兩倍、成為40px;同理,400%代表80px;50%則縮小為20px的0.5倍,成為10px。經過實測發現:在IE中其實1em=100%,所以2em=200%、3em=300%…,依此類推。以

7、%指定大小沿用先前提過的xx-small、x-small、small、medium、large、x-large、xx-large這7級預設的大小,以smaller縮小一級、larger放大一級,例如:採用smaller或larger假設目前的參考文字大小為x-small,larger代表放大一級成為small。或者:假設目前的的參考文字大小為large,smaller代表縮小一級成為medium採用smaller或larger瞭解了如何設定文字的絕對大小與相對大小之後,接著我們在以下的範例中,刻意用不同的設定

8、方式來改變文字的大小:設定文字大小的綜合範例設定文字大小的綜合範例設定文字大小的綜合範例對於大多數的網頁設計師來說,系統預設的『新細明體』或『細明體』未必能展現網頁整體的風格,因此會想選用其它的字型,例如:黑體、隸書、少女字型等等。CSS用font-family來指定使用何種字型,其語法如下:12-1-2選擇字型-font-family字型名稱1,字型名稱2,字型名稱3,…代表可以一次指定使用多種字

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。