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

1、l基本的選擇符有哪三種？?jī)?yōu)先級(jí)如何？l更多類型的選擇符有哪些？l常用的CSS數(shù)據(jù)單位有哪些？l樣式表有幾種導(dǎo)入方式？它們的區(qū)別及優(yōu)先級(jí)如何？l會(huì)使用會(huì)使用CSS文字樣式文字樣式l文字實(shí)例：模擬文字實(shí)例：模擬Google公司的公司的logol會(huì)使用會(huì)使用CSS段落文字段落文字l段落實(shí)例：百度搜索段落實(shí)例：百度搜索本講目標(biāo)本講目標(biāo)導(dǎo)入導(dǎo)入l文字是網(wǎng)頁(yè)設(shè)計(jì)中必不可缺的元素，使用過文字是網(wǎng)頁(yè)設(shè)計(jì)中必不可缺的元素，使用過word的用的用戶會(huì)發(fā)現(xiàn)，戶會(huì)發(fā)現(xiàn)，word可以對(duì)文字的可以對(duì)文字的字體、大小、顏色字體、大小、顏色等屬等屬性進(jìn)行設(shè)置，性進(jìn)行設(shè)置，CSS同樣可以做到。同樣可以做到。l我們將從以下幾個(gè)方

2、面進(jìn)行學(xué)習(xí)：我們將從以下幾個(gè)方面進(jìn)行學(xué)習(xí)： a a、字體、字體 b、文字大小、文字大小 c c、文字顏色、文字顏色 d d、文字粗細(xì)、文字粗細(xì) e e、斜體、斜體 f f、文字的下劃線、文字的下劃線、 g g、英文字母大小寫、英文字母大小寫字體字體 在在HTML語言中，對(duì)文字字體的控制，是通過語言中，對(duì)文字字體的控制，是通過 在在CSS中，則是通過中，則是通過font-family屬性來控制屬性來控制的的 p font-family:黑體黑體, 宋體宋體, Arial, sans-serif;serif與與sans-serif區(qū)分區(qū)分KKserif字體字體sans-serif字體字體 我們發(fā)現(xiàn)

3、：左側(cè)的我們發(fā)現(xiàn)：左側(cè)的K較之右側(cè)的較之右側(cè)的K，在字筆畫開始及結(jié)束的地方，在字筆畫開始及結(jié)束的地方有額外的修飾，易讀性更強(qiáng)，長(zhǎng)時(shí)間閱讀這樣的字體不容易疲勞有額外的修飾，易讀性更強(qiáng)，長(zhǎng)時(shí)間閱讀這樣的字體不容易疲勞 左側(cè)字體常用于正文，右側(cè)字體常用于標(biāo)題左側(cè)字體常用于正文，右側(cè)字體常用于標(biāo)題文字大小文字大小lCSS對(duì)于文字大小控制是通過對(duì)于文字大小控制是通過l該屬性的值可以是相對(duì)大小也可以是絕對(duì)大小，在該屬性的值可以是相對(duì)大小也可以是絕對(duì)大小，在這里提供了三種常用的數(shù)據(jù)單位：這里提供了三種常用的數(shù)據(jù)單位：h1 font-size:12px;單位單位描述描述示例示例px像素（像素（pixel）wi

4、dth:12px;em相對(duì)于當(dāng)前對(duì)象內(nèi)文本相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸的字體尺寸font-size:1.5em;Pt點(diǎn)點(diǎn)/磅（磅（point）font-size:9pt;文字顏色文字顏色l文字各種顏色的合理搭配，使得頁(yè)面五彩繽紛，在文字各種顏色的合理搭配，使得頁(yè)面五彩繽紛，在CSS中文字顏色的控制是通過中文字顏色的控制是通過lcolor屬性的值有兩種常用的表達(dá)方式：h1 color:#000000;#RRGGBB十六進(jìn)制顏色單位十六進(jìn)制顏色單位color:#FF0000;Color Name瀏覽器所支持的顏色名瀏覽器所支持的顏色名稱稱color: red;注意：在設(shè)置某一個(gè)段落文字的顏色時(shí)，

5、可以利用注意：在設(shè)置某一個(gè)段落文字的顏色時(shí)，可以利用標(biāo)記，將標(biāo)記，將需要的部分進(jìn)行單獨(dú)標(biāo)注。需要的部分進(jìn)行單獨(dú)標(biāo)注。文字粗細(xì)文字粗細(xì)l在在HTML語言中可以通過語言中可以通過標(biāo)記或者標(biāo)記或者標(biāo)記標(biāo)記將文字設(shè)置成粗體。將文字設(shè)置成粗體。l在在CSS中，提供了更為細(xì)致的劃分中，提供了更為細(xì)致的劃分font-weight:100;font-weight:200;font-weight:300;.font-weight:900;font-weight:bold;font-weight:normal;文字下劃線、頂劃線和刪除線文字下劃線、頂劃線和刪除線l提起文字下劃線，我們會(huì)聯(lián)想到提起文字下劃線，我們會(huì)

6、聯(lián)想到超鏈接無下劃超鏈接無下劃線特效。線特效。 通過演示，我們來了解該屬性具體的值的效果通過演示，我們來了解該屬性具體的值的效果a:hover text-decoration:underline;英文字母大小寫英文字母大小寫l英文字母大小寫轉(zhuǎn)換是英文字母大小寫轉(zhuǎn)換是CSS提供的很實(shí)用的功提供的很實(shí)用的功能之一能之一ptext-transform:capitalize; /*單詞首字大寫單詞首字大寫*/text-transform:lowercase; /*全部小寫全部小寫*/text-transform:uppercase; /*全部大寫全部大寫*/通過演示，我們來了解該屬性具體的值的效果通過

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

8、效果二：效果三：效果三：效果四：效果四：CSS段落文字對(duì)齊方式段落文字對(duì)齊方式l水平對(duì)齊通過屬性 text-align 來控制l垂直對(duì)齊通過屬性 vertical-align 來控制行間距和字間距行間距和字間距l(xiāng)行間距通過屬性 line-height 來控制 l字間距通過屬性 letter-spacing 來控制首字放大首字放大l在許多報(bào)刊或雜志的文章中，開篇第一個(gè)字很大，借此第一時(shí)間來吸引住顧客的眼球。問題：首字放大，有幾種實(shí)現(xiàn)方式？如果想給段落的第一行設(shè)置下問題：首字放大，有幾種實(shí)現(xiàn)方式？如果想給段落的第一行設(shè)置下 劃線效果又該如何實(shí)現(xiàn)？劃線效果又該如何實(shí)現(xiàn)？段落實(shí)例：百度搜索段落實(shí)例：百度搜索要求實(shí)現(xiàn)如下圖所示