TP05CSS美化網(wǎng)頁元素

CSS美化網(wǎng)頁元素第五章回顧與作業(yè)點(diǎn)評(píng)描述CSS的基本語法結(jié)構(gòu)，并舉例說明其構(gòu)成。CSS選擇器有哪幾種，并舉例說明。CSS的復(fù)合選擇器有哪幾種，并說明各自的特點(diǎn)。提問2/39本章任務(wù)制作百度音樂標(biāo)簽頁面制作開心莊園頁面制作網(wǎng)站新聞信息展示頁面制作購物網(wǎng)站商品分類頁面制作暢銷書排行榜頁面3/39本章目標(biāo)會(huì)使用CSS設(shè)置字體樣式會(huì)使用CSS設(shè)置文本樣式會(huì)使用CSS設(shè)置圖片對齊方式會(huì)使用CSS設(shè)置超鏈接樣式會(huì)使用CSS設(shè)置鼠標(biāo)外觀會(huì)使用CSS設(shè)置背景樣式會(huì)使用CSS設(shè)置列表樣式4/39為什么使用CSS有效的傳遞頁面信息使用CSS美化過的頁面文本，使頁面漂亮、美觀，吸引用戶可以很好的突出頁面的主題內(nèi)容，使用戶第一眼可以看到頁面主要內(nèi)容具有良好的用戶體驗(yàn)5/39<span>標(biāo)簽<span>標(biāo)簽的作用<span>在行內(nèi)定義一個(gè)區(qū)域，也就是一行內(nèi)可以被<span>劃分成好幾個(gè)區(qū)域，從而實(shí)現(xiàn)某種特定效果<p>享受<spanclass=“show”>“北財(cái)”</span>教育服務(wù)</p><p>在北財(cái)，有一群人默默支持你成就

<spanid="dream">IT夢想</span></p><pclass=“bird”>選擇<span>北財(cái)</span>，成就你的夢想</p>演示示例1：span標(biāo)簽的應(yīng)用示例6/39字體樣式屬性名含義舉例font-family設(shè)置字體類型font-family:"隸書";font-size設(shè)置字體大小font-size:12px;font-style設(shè)置字體風(fēng)格font-style:italic;font-weight設(shè)置字體的粗細(xì)font-weight:bold;font在一個(gè)聲明中設(shè)置所有字體屬性font:italicbold36px"宋體";7/39字體類型font-family屬性p{font-family:Verdana,"楷體";}演示示例2：字體類型body{font-family:Times,"TimesNewRoman","楷體";}示例8/39font-size屬性單位：px（像素）in、cm、mm、pt、pc字體大小h1{font-size:24px;}h2{font-size:16px;}h3{font-size:5mm;}p{font-size:10in;}span{font-size:12pt;}strong{font-size:13pc;}示例9/39字體風(fēng)格font-style屬性normal、italic和oblique斜體正常字體演示示例3：字體風(fēng)格10/39inherit:繼承normal：正常oblique：傾斜的字體的粗細(xì)font-weight屬性值說明normal默認(rèn)值，定義標(biāo)準(zhǔn)的字體。bold粗體字體。lighter更細(xì)的字體。100、200、300、400、500、600、700、800、900定義由細(xì)到粗的字體。400等同于normal，700等同于bold。正常粗細(xì)演示示例4：字體的粗細(xì)11/39字體屬性font屬性字體屬性的順序：字體風(fēng)格→字體粗細(xì)→字體大小→字體類型pspan{font:obliquebold12px"楷體";}示例12/39文本樣式文本屬性屬性含義舉例color設(shè)置文本顏色color:#00C;text-align設(shè)置元素水平對齊方式text-align:right;text-indent設(shè)置首行文本的縮進(jìn)text-indent:20px;line-height設(shè)置文本的行高line-height:25px;text-decoration設(shè)置文本的裝飾text-decoration:underline;13/39文本顏色color屬性十六進(jìn)制方法表示顏色color:#FFFFFF;color:#000000;color:FF0000;color:#A983D8;color:#95F141;color:#339966;color:#EEFF66;color:#396;color:#EF6;6位顏色值相鄰數(shù)字兩兩相同時(shí)，可兩兩縮寫為1位演示示例5：文本顏色藍(lán)色字體14/39排版文本段落水平對齊方式text-align屬性值說明left把文本排列到左邊。默認(rèn)值：由瀏覽器決定right把文本排列到右邊center把文本排列到中間justify實(shí)現(xiàn)兩端對齊文本效果首行縮進(jìn)text-indent：em或px行高line-height：px居中顯示居右顯示首行縮進(jìn)設(shè)置行高演示示例6：排版文本段落15/39文本修飾和垂直對齊文本裝飾text-decoration屬性垂直對齊方式vertical-align屬性：middle、top、bottom值說明none默認(rèn)值，定義的標(biāo)準(zhǔn)文本。underline設(shè)置文本的下劃線。overline設(shè)置文本的上劃線。line-through設(shè)置文本的刪除線。blink設(shè)置文本閃爍。此值只在firefox瀏覽器中有效，在IE中無效。演示示例7：垂直對齊方式16/39學(xué)員操作—制作百度音樂標(biāo)簽頁面訓(xùn)練要點(diǎn)使用Dreamweaver制作網(wǎng)頁使用字體屬性設(shè)置字體風(fēng)格、大小使用文本屬性設(shè)置字體顏色、行距使用<span>標(biāo)簽需求說明講解需求說明指導(dǎo)18px、楷體、加粗顯示12px，行高20px英文字體：“TimesNewRoman”或“Times”中文字體：宋體完成時(shí)間：10分鐘實(shí)現(xiàn)思路使用color屬性設(shè)置字體顏色使用font設(shè)置字體類型和字體大小，但是順序?yàn)樽煮w大小→字體類型，字體類型要先設(shè)置英文字體，再設(shè)置中文字體；或者使用font-size設(shè)置字體大小，使用font-family設(shè)置字體類型。歌手分類字母序號(hào)放在標(biāo)簽<span>，使用font-weight設(shè)置字體加粗。CSS文件單獨(dú)放在CSS文件夾下，使用鏈接式引用CSS文件。17/39學(xué)員操作—制作開心莊園頁面需求說明標(biāo)題行距40px，加粗顯示；正文大小12px，行距20px；圖片與文本居中對齊；使用外部樣式表創(chuàng)建頁面樣式。完成時(shí)間：10分鐘練習(xí)18px、字體顏色#9c2f0618/39共性問題集中講解常見問題及解決辦法代碼規(guī)范問題調(diào)試技巧共性問題集中講解19/39超鏈接偽類訪問前，藍(lán)色訪問后，紫色圖片邊超鏈接后出現(xiàn)邊框無超鏈接偽類樣式語法標(biāo)簽名:偽類名{聲明;}a:hover{ color:#B46210; text-decoration:underline;}20/39使用CSS設(shè)置超鏈接偽類名稱含義示例a:link未單擊訪問時(shí)超鏈接樣式a:link{color:#9ef5f9;}a:visited單擊訪問后超鏈接樣式a:visited{color:#333;}a:hover鼠標(biāo)懸浮其上的超鏈接樣式a:hover{color:#ff7300; a:active鼠標(biāo)單擊未釋放的超鏈接樣式a:active{color:#999;}設(shè)置偽類的順序：a:link->a:visited->a:hover->a:active圖片超鏈接沒有邊框黑色，超鏈接無下劃線褐色、超接鏈有下劃線演示示例8：超鏈接樣式21/39設(shè)置鼠標(biāo)形狀值說明圖例default默認(rèn)光標(biāo)pointer超鏈接的指針wait指示程序正在忙help指示可用的幫助text指示文本crosshair鼠標(biāo)呈現(xiàn)十字狀CSS設(shè)置鼠標(biāo)形狀span{cursor:pointer;}示例22/39<div>標(biāo)簽DIV元素是用來為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這一塊區(qū)域，其中所包含元素的特性由DIV標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個(gè)塊來進(jìn)行控制。DIV標(biāo)簽稱為區(qū)隔標(biāo)記。作用：設(shè)定字、畫、表格等的擺放位置。用來布局網(wǎng)頁中的所有元素23/39<div>標(biāo)簽<div>標(biāo)簽的用法網(wǎng)頁布局排版網(wǎng)頁內(nèi)容語法<div>網(wǎng)頁內(nèi)容…</div>#header{ width:200px; height:280px;}……<divid="header">網(wǎng)頁內(nèi)容…</div>寬高24/39背景樣式25/39背景圖像背景顏色網(wǎng)頁背景背景顏色background-color背景圖像background-image背景顏色值：十六進(jìn)制方法表示transparent演示示例9：背景顏色26/39設(shè)置背景圖像背景圖像background-image屬性背景重復(fù)方式background-repeat屬性背景定位

background-position屬性background-image:url(圖片路徑);repeat：沿水平和垂直兩個(gè)方向平鋪no-repeat：不平鋪，即只顯示一次repeat-x：只沿水平方向平鋪repeat-y：只沿垂直方向平鋪值含義XposYpos單位：px，Xpos表示水平位置，Ypos表示垂直位置X%Y%使用百分比表示背景的位置X、Y方向關(guān)鍵詞

水平方向的關(guān)鍵詞：left、center、right垂直方向的關(guān)鍵詞：top、center、bottom背景圖像演示示例10：背景圖像27/39設(shè)置背景示例背景屬性background屬性.title{ font-size:18px; font-weight:bold; color:#FFF; text-indent:1em; line-height:35px;

background:#C00url(../image/arrow-down.gif)205px10pxno-repeat;}背景樣式簡寫背景顏色背景圖像背景定位背景不重復(fù)顯示28/39背景樣式29/39背景樣式簡寫效果列表樣式2-1list-style-typelist-style-imagelist-style-positionlist-style值說明語法示例none無標(biāo)記符號(hào)list-style-type:none;disc實(shí)心圓，默認(rèn)類型list-style-type:disc;circle空心圓list-style-type:circle;square實(shí)心正方形list-style-type:square;decimal數(shù)字list-style-type:decimal30/39列表樣式2-2list-style-imagelist-style-positioninsideoutsidelist-styleli{

list-style-image:url(image/arrow-right.gif); list-style-type:circle;}li{ list-style-image:url(image/arrow-right.gif); list-style-type:circle;

list-style-position:outside;}li{ list-style:circleoutsideurl(image/arrow-right.gif);}示例演示示例11：列表樣式列表圖標(biāo)效果31/39學(xué)員操作—家用電器商品分類頁面需求說明電器分類無下劃線，鼠標(biāo)懸浮超鏈接時(shí)顯示下劃線。分類內(nèi)容超鏈無下劃線，鼠標(biāo)懸浮至超鏈接時(shí)字體顏色為棕紅色（#F60），顯示下劃線。練習(xí)完成時(shí)間：10分鐘18px、加粗、行距35、背景色#0f7cbf，縮進(jìn)1字符14px、加粗、行距30px、背景色#e4f1fa、字體顏色#0f7cbf12px、行距20px，字體顏色#66666632/39學(xué)員操作—暢銷書排行榜頁面2-1訓(xùn)練要點(diǎn)設(shè)置頁面的背景屬性使用CSS設(shè)置超鏈