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

3、時(shí)間閱讀這樣的字體不容易疲勞左側(cè)字體常用于正文，右側(cè)字體常用于標(biāo)題案例演示文字大小CSS對于文字大小控制是通過該屬性的值可以是相對大小也可以是絕對大小，在這里提供了三種常用的數(shù)據(jù)單位：h1{font-size:12px;}單位描述示例px像素（pixel）width:12px;em相對于當(dāng)前對象內(nèi)文本的字體尺寸font-size:1.5em;Pt點(diǎn)/磅（point）font-size:9pt;案例演示文字顏色文字各種顏色的合理搭配，使得頁面五彩繽紛，在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語言中可以通過標(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)頁演示文字實(shí)例二：制作頁面的五彩標(biāo)題要求對“SuperTitleCSS”該標(biāo)題進(jìn)行樣式指派，依次實(shí)現(xiàn)下列圖片實(shí)現(xiàn)效果：練習(xí)頁面效果頁面效果一：效果二：效果三：效果四：CSS段落文字對齊方式水平對齊通過屬性text-align來控制垂直對

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、在該頁面中，一共有幾種分類的文字？比如說：標(biāo)題、內(nèi)容……2、哪些部分雖處于同一行文字樣式卻有不同之處，該采用

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