網(wǎng)頁設(shè)計(jì)與制作教程第7章--使用CSS修飾網(wǎng)頁元素課件

1、網(wǎng)頁設(shè)計(jì)與制作教程（HTML+CSS+JavaScript）第2版機(jī)械工業(yè)出版社第7章 使用CSS修飾網(wǎng)頁元素7.1 文本控制 7.1.1 設(shè)置字體的類別CSS提供font-family屬性來控制文字的字體類型。語法：font-family : 字體名稱參數(shù)：字體名稱按優(yōu)先順序排列，以逗號(hào)隔開。如果字體名稱包含空格，則應(yīng)用引號(hào)括起?！狙菥?-1】字體設(shè)置，本例頁面7-1.html的顯示效果如圖7-1所示。7.1 文本控制 7.1.2 設(shè)置字體的尺寸在CSS樣式中使用font-size屬性設(shè)置字體的尺寸，其值可以是絕對(duì)值也可以是相對(duì)值。語法：font-size : 絕對(duì)尺寸 | 相對(duì)尺寸【演練7

2、-2】字體尺寸設(shè)置，本例頁面7-2.html的顯示效果如圖7-2所示。7.1 文本控制 7.1.3 設(shè)置字體的粗細(xì)CSS中使用font-weight屬性設(shè)置字體的粗細(xì)，包含normal、bold、bolder、lighter、100、200、300、400、500、600、700、800和900多個(gè)屬性值。語法：font-weight : bold | number | normal | lighter | 100-900【演練7-3】字體粗細(xì)設(shè)置，本例頁面7-3.html的顯示效果如圖7-3所示。7.1 文本控制 7.1.4 設(shè)置字體的傾斜CSS中的font-style屬性用來設(shè)置字體的傾斜

3、。語法：font-style : normal | italic | oblique【演練7-4】字體傾斜設(shè)置，本例頁面7-4.html的顯示效果如圖7-4所示。7.1 文本控制 7.1.5 設(shè)置文字的顏色在CSS樣式中，對(duì)文字增加顏色修飾十分簡單，只需添加color屬性即可。color屬性的語法格式：color:顏色值;【演練7-5】文字顏色設(shè)置，本例頁面7-5.html的顯示效果如圖7-5所示。7.1 文本控制 7.1.6 設(shè)置文字的背景顏色在HTML中，可以使用標(biāo)簽的bgcolor屬性設(shè)置網(wǎng)頁的背景顏色，而在CSS里，不僅可以用background-color屬性來設(shè)置網(wǎng)頁背景顏色，還可

4、以設(shè)置文字的背景顏色。語法：background-color : color | transparent【演練7-6】設(shè)置文字的背景顏色，顯示效果如圖7-6所示。7.1 文本控制 7.1.7 設(shè)置文本的修飾使用CSS樣式可以對(duì)文本進(jìn)行簡單的修飾，text屬性所提供的text-decoration屬性，主要實(shí)現(xiàn)文字加下劃線、頂線、刪除線及文字閃爍等效果。語法：text-decoration : underline | blink | overline | line-through | none【演練7-7】字體修飾設(shè)置，本例頁面7-7.html的顯示效果如圖7-7所示。7.2 段落控制 7.2.

5、1 設(shè)置文字的對(duì)齊方式使用text-align屬性可以設(shè)置元素中文本的水平對(duì)齊方式。語法：text-align : left | right | center | justify 【演練7-8】設(shè)置文字的對(duì)齊方式，本例頁面7-8.html的顯示效果如圖7-8所示。7.2 段落控制 7.2.2 設(shè)置段落的首行縮進(jìn)首行縮進(jìn)指的是段落的第一行從左向右縮進(jìn)一定的距離。語法：text-indent : length【演練7-9】設(shè)置段落的首行縮進(jìn)，本例頁面7-9.html的顯示效果如圖7-9所示。7.2 段落控制 7.2.3 設(shè)置首字下沉在CSS樣式中偽對(duì)象:first-letter可以實(shí)現(xiàn)對(duì)象內(nèi)第一個(gè)

6、字符的樣式控制?！狙菥?-10】設(shè)置首字下沉，本例頁面7-10.html的顯示效果如圖7-10所示。7.2 段落控制 7.2.4 設(shè)置行高段落中兩行文字之間垂直的距離稱為行高。在HTML中是無法控制行高的，在CSS樣式中，使用line-height屬性控制行與行之間的垂直間距。語法：line-height : length | normal【演練7-11】設(shè)置行高，本例頁面7-11.html的顯示效果如圖7-11所示。7.2 段落控制 7.2.5 設(shè)置字符間距l(xiāng)etter-spacing字符間距屬性，可以設(shè)置字符與字符間的距離。語法：letter-spacing ：length | norma

7、l【演練7-12】設(shè)置字符間距，7-12.html的顯示效果如圖7-12所示。7.2 段落控制 7.2.6 設(shè)置文字的截?cái)嘣贑SS樣式中“text-overflow”屬性可以實(shí)現(xiàn)文字的截?cái)嘈Ч?。語法：text-overflow ：clip | ellipsis【演練7-13】設(shè)置文字的截?cái)啵?-13.html的顯示效果如圖7-13所示。7.3 設(shè)置圖像樣式7.3.1 設(shè)置圖像邊框圖像的邊框就是利用border屬性作用于圖像元素而呈現(xiàn)的效果?！狙菥?-14】設(shè)置圖像邊框，7-14.html的顯示效果如圖7-15所示。7.3 設(shè)置圖像樣式7.3.2 設(shè)置圖像縮放使用CSS樣式控制圖像的大小，可以通

8、過width和height兩個(gè)屬性來實(shí)現(xiàn)?！狙菥?-15】設(shè)置圖像縮放，本例頁面7-15.html的顯示效果如圖7-16所示。7.3 設(shè)置圖像樣式7.3.3 設(shè)置背景圖像CSS除了可以設(shè)置背景顏色，還可以用background-image設(shè)置背景圖像。語法：background-image : url(url) | none【演練7-16】設(shè)置背景圖像，7-16.html的顯示效果如圖7-17所示。7.3 設(shè)置圖像樣式7.3.4 設(shè)置背景重復(fù)背景重復(fù)（background-repeat）屬性的主要作用是設(shè)置背景圖片以何種方式在網(wǎng)頁中顯示。語法：background-repeat : repea

9、t | no-repeat | repeat-x | repeat-y【演練7-17】設(shè)置背景重復(fù)，7-17.html的顯示效果如圖7-18所示。7.3 設(shè)置圖像樣式7.3.5 設(shè)置背景圖像定位可以通過background-position屬性來改變圖像的插入位置。語法：background-position : length | lengthbackground-position : position | position1使用關(guān)鍵字進(jìn)行背景定位關(guān)鍵字參數(shù)的取值及含義如下：top：將背景圖像同元素的頂部對(duì)齊。bottom：將背景圖像同元素的底部對(duì)齊。left：將背景圖像同元素的左邊對(duì)齊。ri

10、ght：將背景圖像同元素的右邊對(duì)齊。center：將背景圖像相對(duì)于元素水平居中或垂直居中。7.3 設(shè)置圖像樣式7.3.5 設(shè)置背景圖像定位2使用長度進(jìn)行背景定位長度參數(shù)可以對(duì)背景圖像的位置進(jìn)行更精確的控制，實(shí)際上定位的是圖像左上角相對(duì)于元素左上角的位置。3使用百分比進(jìn)行背景定位使用百分比進(jìn)行背景定位，其實(shí)是將背景圖像的百分比指定的位置和元素的百分比位置對(duì)齊。7.3 設(shè)置圖像樣式7.3.5 設(shè)置背景圖像定位【演練7-20】使用百分比進(jìn)行背景定位，本例頁面7-20.html的顯示效果如圖7-21所示。7.4 設(shè)置表格樣式7.4.1 常用的CSS表格屬性1border-collapse屬性設(shè)置表格的

11、邊框是合并成單邊框，還是分別有各自的邊框。語法：border-collapse : separate | collapse【演練7-21】使用合并邊框技術(shù)制作細(xì)線表格，本例頁面7-21.html的顯示效果如圖7-24所示。7.4 設(shè)置表格樣式7.4.1 常用的CSS表格屬性2border-spacing屬性border-spacing屬性用來設(shè)置相鄰單元格邊框間的距離。語法：border-spacing : length | length【演練7-22】使用border-spacing屬性設(shè)置相鄰單元格邊框間的距離，本例頁面7-22.html的顯示效果如圖7-25所示。7.4 設(shè)置表格樣式7.

12、4.1 常用的CSS表格屬性3caption-side屬性caption-side屬性用于設(shè)置表格標(biāo)題的位置。語法：caption-side : top| bottom | left |right4empty-cells屬性empty-cells屬性用于設(shè)置當(dāng)表格的單元格無內(nèi)容時(shí)，是否顯示該單元格的邊框。語法：empty-cells : hide | show7.4 設(shè)置表格樣式7.4.1 常用的CSS表格屬性【演練7-23】使用empty-cells屬性設(shè)置表格單元格無內(nèi)容時(shí)隱藏單元格的邊框，本例頁面7-23.html的顯示效果如圖7-26所示。7.4 設(shè)置表格樣式7.4.2 制作暢銷活動(dòng)排

13、行榜【演練7-24】使用隔行換色表格制作暢銷活動(dòng)排行榜，本例頁面7-24.html的顯示效果如圖7-27所示。7.5 設(shè)置表單樣式7.5.1 CSS美化常用的表單元素1美化文本域【演練7-25】使用CSS美化文本域，本例頁面7-25.html的顯示效果如圖7-28所示。7.5 設(shè)置表單樣式7.5.1 CSS美化常用的表單元素2美化按鈕【演練7-26】使用CSS美化按鈕，本例頁面7-26.html的顯示效果如圖7-29所示。7.5 設(shè)置表單樣式7.5.1 CSS美化常用的表單元素3制作登錄框【演練7-27】使用CSS制作登錄框，本例頁面7-27.html的顯示效果如圖7-30所示。7.5 設(shè)置表

14、單樣式7.5.2 光影世界聯(lián)系我們表單【演練7-28】制作光影世界聯(lián)系我們表單，本例頁面7-28.html在瀏覽器中的顯示效果如圖7-31所示。7.6 綜合案例制作光影世界網(wǎng)絡(luò)融資平臺(tái)頁面7.6.1 頁面布局規(guī)劃通過成熟的構(gòu)思與設(shè)計(jì)，光影世界網(wǎng)絡(luò)融資平臺(tái)頁面的效果如圖7-32所示，頁面布局示意圖如圖7-33所示。7.6 綜合案例制作光影世界網(wǎng)絡(luò)融資平臺(tái)頁面7.6.2 頁面的制作過程1前期準(zhǔn)備（1）欄目目錄結(jié)構(gòu)在欄目文件夾下創(chuàng)建文件夾images和style，分別用來存放圖像素材和外部樣式表文件。（2）頁面素材將本頁面需要使用的圖像素材存放在文件夾images下。（3）外部樣式表在文件夾styl

15、e下新建一個(gè)名為style.css的樣式表文件。2制作頁面7.6 綜合案例制作光影世界網(wǎng)絡(luò)融資平臺(tái)頁面7.6.2 頁面的制作過程1前期準(zhǔn)備（1）欄目目錄結(jié)構(gòu)在欄目文件夾下創(chuàng)建文件夾images和style，分別用來存放圖像素材和外部樣式表文件。（2）頁面素材將本頁面需要使用的圖像素材存放在文件夾images下。（3）外部樣式表在文件夾style下新建一個(gè)名為style.css的樣式表文件。2制作頁面7.7 實(shí)訓(xùn)制作家具商城會(huì)員注冊(cè)頁面制作家具商城會(huì)員注冊(cè)頁面制作家具商城會(huì)員注冊(cè)頁面，頁面效果如圖7-34所示，布局示意圖如圖7-35所示。7.7 實(shí)訓(xùn)制作家具商城會(huì)員注冊(cè)頁面制作家具商城會(huì)員注冊(cè)頁面制作步驟。1前期準(zhǔn)備（1）欄目目錄結(jié)構(gòu)在欄目