電子商務(wù)網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計(jì)5

使用CSS樣式美化網(wǎng)頁CHAPTERFIVECSS（CascadingStyleSheet，層疊樣式表）是一種用于控制網(wǎng)頁元素樣式顯示的標(biāo)記性語言，也是目前流行的網(wǎng)頁設(shè)計(jì)技術(shù)。將網(wǎng)頁結(jié)構(gòu)和樣式分離，HTML負(fù)責(zé)網(wǎng)頁的結(jié)構(gòu)設(shè)計(jì)，CSS負(fù)責(zé)網(wǎng)頁的美化設(shè)計(jì)，這樣有利于網(wǎng)頁的加載和搜索。本項(xiàng)目將學(xué)習(xí)如何使用CSS樣式美化網(wǎng)頁。學(xué)會(huì)創(chuàng)建CSS樣式，以及設(shè)置和編輯CSS樣式?？梢允炀毜乩肅SS樣式來美化網(wǎng)頁。學(xué)習(xí)目標(biāo)Contents目錄認(rèn)識(shí)CSS樣式表1在Dreamweaver中創(chuàng)建CSS2應(yīng)用CSS選擇器3CSS繼承性、特殊性、層疊性和重要性4使用CSS格式化排版5一、認(rèn)識(shí)CSS樣式表了解CSS的基本語法在網(wǎng)頁中引用CSS的方式一、認(rèn)識(shí)CSS樣式表1了解CSS的基本語法CSS的樣式規(guī)則自定義的類ID和復(fù)合內(nèi)容123屬性1選擇器聲明2HTML標(biāo)簽值一、認(rèn)識(shí)CSS樣式表2在網(wǎng)頁中引用CSS的方式01直接添加在HTML標(biāo)記中02將樣式表內(nèi)嵌到HTML文件中03將外部樣式表鏈接到HTML文件上04聯(lián)合使用樣式表Contents目錄認(rèn)識(shí)CSS樣式表1在Dreamweaver中創(chuàng)建CSS2應(yīng)用CSS選擇器3CSS繼承性、特殊性、層疊性和重要性4使用CSS格式化排版5二、在Dreamweaver中創(chuàng)建CSS創(chuàng)建CSS規(guī)則創(chuàng)建CSS文件二、在Dreamweaver中創(chuàng)建CSS1創(chuàng)建CSS規(guī)則二、在Dreamweaver中創(chuàng)建CSS2創(chuàng)建CSS文件Contents目錄認(rèn)識(shí)CSS樣式表1在Dreamweaver中創(chuàng)建CSS2應(yīng)用CSS選擇器3CSS繼承性、特殊性、層疊性和重要性4使用CSS格式化排版5三、應(yīng)用CSS選擇器應(yīng)用元素選擇器應(yīng)用類選擇器應(yīng)用ID選擇器應(yīng)用后代選擇器應(yīng)用群組選擇器應(yīng)用通配符選擇器三、應(yīng)用CSS選擇器1應(yīng)用元素選擇器三、應(yīng)用CSS選擇器2應(yīng)用群組選擇器三、應(yīng)用CSS選擇器3應(yīng)用類選擇器三、應(yīng)用CSS選擇器4應(yīng)用ID選擇器三、應(yīng)用CSS選擇器5應(yīng)用后代選擇器三、應(yīng)用CSS選擇器6應(yīng)用通配符選擇器Contents目錄認(rèn)識(shí)CSS樣式表1在Dreamweaver中創(chuàng)建CSS2應(yīng)用CSS選擇器3CSS繼承性、特殊性、層疊性和重要性4使用CSS格式化排版5四、CSS繼承性、特殊性、層疊性和重要性繼承性層疊性重要性特殊性四、CSS繼承性、特殊性、層疊性和重要性1繼承性四、CSS繼承性、特殊性、層疊性和重要性2特殊性四、CSS繼承性、特殊性、層疊性和重要性3層疊性四、CSS繼承性、特殊性、層疊性和重要性4重要性Contents目錄認(rèn)識(shí)CSS樣式表1在Dreamweaver中創(chuàng)建CSS2應(yīng)用CSS選擇器3CSS繼承性、特殊性、層疊性和重要性4使用CSS格式化排版5五、使用CSS格式化排版文字排版CSS背景列表排版表格排版段落排版鏈接樣式五、使用CSS格式化排版1文字排版字

體屬

性值字體類型font-family宋體、微軟雅黑字號(hào)大小font-size像素，如12像素字體顏色color16進(jìn)制顏色表示法字體加粗font-weightbold字體傾斜font-styleitalic下劃線text-decorationunderline刪除線text-decorationline-through文字排版常用的CSS規(guī)則五、使用CSS格式化排版1文字排版五、使用CSS格式化排版2段落排版段落排版常用的CSS規(guī)則字

體屬

性值段落縮進(jìn)text-indent2em行間距l(xiāng)ine-height2em或像素值中文字間距或英文中字母與字母的間距l(xiāng)etter-spacing像素值英文單詞之間的間距word-spacing像素值對(duì)齊方式text-alignleft（左對(duì)齊）、right（右對(duì)齊）、centent（居中對(duì)齊）五、使用CSS格式化排版2段落排版五、使用CSS格式化排版3CSS背景CSS背景規(guī)則相關(guān)屬性列表屬

性描

述background簡寫屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中background-color設(shè)置元素的背景顏色background-image把圖像設(shè)置為背景background-position設(shè)置背景圖像的起始位置background-repeat設(shè)置背景圖像是否及如何重復(fù)background-attachment背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)五、使用CSS格式化排版3CSS背景background-position屬性值列表單一關(guān)鍵字描

述center背景圖片設(shè)置在中間top背景圖片設(shè)置頂部bottom背景圖片設(shè)置到底部right背景圖片設(shè)置到右邊left背景圖片設(shè)置到左邊五、使用CSS格式化排版3CSS背景五、使用CSS格式化排版4列表排版列表排版屬性值列表屬性描述list-style簡寫屬性，用于把所有用于列表的屬性設(shè)置于一個(gè)聲明中l(wèi)ist-style-image將圖像設(shè)置為列表項(xiàng)標(biāo)志list-style-position設(shè)置列表中列表項(xiàng)標(biāo)志的位置list-style-type設(shè)置列表項(xiàng)標(biāo)志的類型五、使用CSS格式化排版4列表排版五、使用CSS格式化排版5表格排版五、使用CSS格式化排版6鏈接樣式鏈接的四種狀態(tài)鏈接狀態(tài)描述a:link普通的、未被訪問的鏈接a:visited用戶已訪問的鏈接a:hover鼠標(biāo)指針位于鏈接的上方a:active鏈接被點(diǎn)擊的時(shí)刻五、使用CSS格式化排版6鏈接樣式項(xiàng)