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

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

2、面進行學(xué)習(xí)：我們將從以下幾個方面進行學(xué)習(xí)： a a、字體、字體 b、文字大小、文字大小 c c、文字顏色、文字顏色 d d、文字粗細、文字粗細 e e、斜體、斜體 f f、文字的下劃線、文字的下劃線、 g g、英文字母大小寫、英文字母大小寫字體字體 在在HTML語言中，對文字字體的控制，是通過語言中，對文字字體的控制，是通過 在在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é)束的地方有額外的修飾，易讀性更強，長時間閱讀這樣的字體不容易疲勞有額外的修飾，易讀性更強，長時間閱讀這樣的字體不容易疲勞 左側(cè)字體常用于正文，右側(cè)字體常用于標題左側(cè)字體常用于正文，右側(cè)字體常用于標題文字大小文字大小lCSS對于文字大小控制是通過對于文字大小控制是通過l該屬性的值可以是相對大小也可以是絕對大小，在該屬性的值可以是相對大小也可以是絕對大小，在這里提供了三種常用的數(shù)據(jù)單位：這里提供了三種常用的數(shù)據(jù)單位：h1 font-size:12px;單位單位描述描述示例示例px像素（像素（pixel）wi

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

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

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

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

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