使用CSS樣式表設(shè)置豐富的文字效果.ppt

3、時(shí)間閱讀這樣的字體不容易疲勞左側(cè)字體常用于正文，右側(cè)字體常用于標(biāo)題案例演示文字大小CSS對(duì)于文字大小控制是通過該屬性的值可以是相對(duì)大小也可以是絕對(duì)大小，在這里提供了三種常用的數(shù)據(jù)單位：h1{font-size:12px;}單位描述示例px像素（pixel）width:12px;em相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸font-size:1.5em;Pt點(diǎn)/磅（point）font-size:9pt;案例演示文字顏色文字各種顏色的合理搭配，使得頁(yè)面五彩繽紛，在CSS中文字顏色的控制是通過color屬性的值有兩種常用的表達(dá)方式：

4、h1{color:#000000;}#RRGGBB十六進(jìn)制顏色單位color:#FF0000;ColorName瀏覽器所支持的顏色名稱color:red;注意：在設(shè)置某一個(gè)段落文字的顏色時(shí)，可以利用標(biāo)記，將需要的部分進(jìn)行單獨(dú)標(biāo)注。案例演示文字粗細(xì)在HTML語(yǔ)言中可以通過標(biāo)記或者標(biāo)記將文字設(shè)置成粗體。在CSS中，提供了更為細(xì)致的劃分font-weight:100;font-weight:200;font-weight:300;……….font-weight:900;font-weight

5、:bold;font-weight:normal;案例演示文字下劃線、頂劃線和刪除線提起文字下劃線，我們會(huì)聯(lián)想到超鏈接無下劃線特效。通過演示，我們來了解該屬性具體的值的效果。a:hover{text-decoration:underline;}案例演示英文字母大小寫英文字母大小寫轉(zhuǎn)換是CSS提供的很實(shí)用的功能之一p{text-transform:capitalize;/*單詞首字大寫*/text-transform:lowercase;/*全部小寫*/text-transform:uppercase;/*全部大寫*/}

6、通過演示，我們來了解該屬性具體的值的效果。案例演示文字實(shí)例一：模擬Google公司Logo要求做出如下圖片所示效果：提示：1、整體上控制字體大小、字體間距以及字體類型2、采用標(biāo)簽分割每一個(gè)字符，單獨(dú)添加樣式3、顏色的采集通過TakeColor軟件進(jìn)行截取案例演示Google網(wǎng)頁(yè)演示文字實(shí)例二：制作頁(yè)面的五彩標(biāo)題要求對(duì)“SuperTitleCSS”該標(biāo)題進(jìn)行樣式指派，依次實(shí)現(xiàn)下列圖片實(shí)現(xiàn)效果：練習(xí)頁(yè)面效果頁(yè)面效果一：效果二：效果三：效果四：CSS段落文字對(duì)齊方式水平對(duì)齊通過屬性text-align來控制垂直對(duì)

7、齊通過屬性vertical-align來控制案例演示案例演示1案例演示2行間距和字間距行間距通過屬性line-height來控制字間距通過屬性letter-spacing來控制案例演示案例演示首字放大在許多報(bào)刊或雜志的文章中，開篇第一個(gè)字很大，借此第一時(shí)間來吸引住顧客的眼球。問題：首字放大，有幾種實(shí)現(xiàn)方式？如果想給段落的第一行設(shè)置下劃線效果又該如何實(shí)現(xiàn)？案例演示段落實(shí)例：百度搜索要求實(shí)現(xiàn)如下圖所示效果：提示：1、在該頁(yè)面中，一共有幾種分類的文字？比如說：標(biāo)題、內(nèi)容……2、哪些部分雖處于同一行文字樣式卻有不同之處，該采用

8、什么標(biāo)簽？案例演示千里之行始于足下18