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

第七講使用CSS設(shè)置1回顧

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

a、字體

b、文字大小

c、文字顏色d、文字粗細(xì)e、斜體f、文字的下劃線、g、英文字母大小寫4字體在HTML語(yǔ)言中，對(duì)文字字體的控制，是通過

在CSS中，則是通過font-family屬性來(lái)控制的

<fontface=“黑體”>p{font-family:"黑體","宋體",Arial,sans-serif;}5serif與sans-serif區(qū)分<pstyle="font-family:serif;">K</p><pstyle="font-family:sans-serif;">K</p>serif字體sans-serif字體我們發(fā)現(xiàn)：左側(cè)的K較之右側(cè)的K，在字筆畫開始及結(jié)束的地方有額外的修飾，易讀性更強(qiáng)，長(zhǎng)時(shí)間閱讀這樣的字體不容易疲勞

左側(cè)字體常用于正文，右側(cè)字體常用于標(biāo)題案例演示6文字大小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;案例演示7文字顏色文字各種顏色的合理搭配，使得頁(yè)面五彩繽紛，在CSS中文字顏色的控制是通過color屬性的值有兩種常用的表達(dá)方式：h1{color:#000000;}#RRGGBB十六進(jìn)制顏色單位color:#FF0000;ColorName瀏覽器所支持的顏色名稱color:red;注意：在設(shè)置某一個(gè)段落文字的顏色時(shí)，可以利用<span>標(biāo)記，將需要的部分進(jìn)行單獨(dú)標(biāo)注。案例演示8文字粗細(xì)在HTML語(yǔ)言中可以通過<b>標(biāo)記或者<strong>標(biāo)記將文字設(shè)置成粗體。在CSS中，提供了更為細(xì)致的劃分font-weight:100;font-weight:200;font-weight:300;……….font-weight:900;font-weight:bold;font-weight:normal;案例演示9文字下劃線、頂劃線和刪除線提起文字下劃線，我們會(huì)聯(lián)想到超鏈接無(wú)下劃線特效。

通過演示，我們來(lái)了解該屬性具體的值的效果。a:hover{text-decoration:underline;}案例演示10英文字母大小寫英文字母大小寫轉(zhuǎn)換是CSS提供的很實(shí)用的功能之一p{ text-transform:capitalize;/*單詞首字大寫*/ text-transform:lowercase;/*全部小寫*/ text-transform:uppercase;/*全部大寫*/}通過演示，我們來(lái)了解該屬性具體的值的效果。案例演示11文字實(shí)例一：模擬Google公司Logo要求做出如下圖片所示效果：提示：1、整體上控制字體大小、字體間距以及字體類型

2、采用<span>標(biāo)簽分割每一個(gè)字符，單獨(dú)添加樣式

3、顏色的采集通過TakeColor軟件進(jìn)行截取案例演示Google網(wǎng)頁(yè)演示12文字實(shí)例二：制作頁(yè)面的五彩標(biāo)題要求對(duì)“SuperTitleCSS”該標(biāo)題進(jìn)行樣式指派，依次實(shí)現(xiàn)下列圖片實(shí)現(xiàn)效果：

練習(xí)頁(yè)面效果頁(yè)面效果一：效果二：效果三：效果四：13CSS段落文字對(duì)齊方式水平對(duì)齊通過屬性text-align

來(lái)控制垂直對(duì)齊通過屬性vertical-align來(lái)控制案例演示案例演示1案例演示214行間距和字間距行間距通過屬性line-height

來(lái)控制字間距通過屬性letter-spacing來(lái)控制案例演示案例演示15首字放大在許多報(bào)刊或雜志的文章中，開篇第一個(gè)字很大，借此第一時(shí)間來(lái)吸引住顧客的眼球。問題：首字放大，有幾種實(shí)現(xiàn)方式？如果想給段落的第一行設(shè)置下劃線效果又該如何實(shí)現(xiàn)？案例演示16段落實(shí)例：百度搜