第6章用CSS設(shè)置文本和圖像

網(wǎng)頁設(shè)計(jì)與制作教程（HTML+CSS+JavaScript）顧忠偉zwgu@G6.1設(shè)置文字的樣式6.2設(shè)置段落的樣式6.3設(shè)置圖片樣式6.4設(shè)置背景6.5圖文混排6.6用CSS設(shè)置文本和圖像綜合案例第6章用CSS設(shè)置文本和圖像6.1.1設(shè)置文字的字體在HTML中，設(shè)置文字的字體需要通過<font>標(biāo)記的face屬性。而在CSS中，則使用font-family屬性。語法：font-family:字體名稱【演練6-1】字體設(shè)置，本例頁面6-1.html的顯示效果如圖6-1所示。

6.1設(shè)置文字的樣式6.1.2設(shè)置字體的大小在設(shè)計(jì)頁面時(shí)，通常使用不同大小的字體來突出要表現(xiàn)的主題，在CSS樣式中使用font-size屬性設(shè)置字體的大小。語法：font-size:絕對(duì)尺寸|相對(duì)尺寸|百分?jǐn)?shù)【演練6-2】字體大小設(shè)置，本例頁面6-2.html的顯示效果如圖6-2所示。6.1設(shè)置文字的樣式6.1.3設(shè)置字體的粗細(xì)

CSS樣式中使用font-weight屬性設(shè)置字體的粗細(xì)。語法：font-weight:bold|number|normal【演練6-3】字體粗細(xì)設(shè)置，本例頁面6-3.html的顯示效果如圖6-3所示。

6.1設(shè)置文字的樣式6.1.4設(shè)置字體的傾斜

CSS中的font-style屬性用來設(shè)置字體的傾斜。語法：font-style:normal||italic||oblique【演練6-4】字體傾斜設(shè)置，本例頁面6-4.html的顯示效果如圖6-4所示。

6.1設(shè)置文字的樣式6.1.5設(shè)置字體的修飾

使用CSS樣式可以對(duì)文本進(jìn)行簡單的修飾，例如給文字添加下劃線、頂劃線和刪除線，它是通過text-decoration屬性來實(shí)現(xiàn)這些效果的。語法：text-decoration:underline||blink||overline||line-through|none【演練6-5】字體修飾設(shè)置，本例頁面6-5.html的顯示效果如圖6-5所示。6.1設(shè)置文字的樣式6.1.6設(shè)置字體的陰影在CSS3中新增了設(shè)置字體陰影的功能，它是通過text-shadow屬性來實(shí)現(xiàn)這個(gè)效果的。語法：text-shadow:color||length||length||opacity6.1設(shè)置文字的樣式6.2.1設(shè)置文字的對(duì)齊方式使用CSS樣式可以設(shè)置文字的對(duì)齊方式，它是通過text-align屬性來實(shí)現(xiàn)這些效果的。語法：text-align:left|right|center|justify

6.2設(shè)置段落的樣式6.2.2設(shè)置首行縮進(jìn)在CSS樣式中text-indent屬性可以方便地實(shí)現(xiàn)文本縮進(jìn)。語法：text-indent:length【演練6-6】設(shè)置首行縮進(jìn)，本例頁面6-6.html的顯示效果如圖6-8所示。

6.2設(shè)置段落的樣式6.2.3設(shè)置首字下沉在CSS樣式中偽對(duì)象:first-letter可以實(shí)現(xiàn)對(duì)象內(nèi)第一個(gè)字符的樣式控制?！狙菥?-7】設(shè)置首字下沉，本例頁面6-7.html的顯示效果如圖6-9所示。6.2設(shè)置段落的樣式6.2.4設(shè)置行高在CSS樣式中，使用line-height屬性控制行與行之間的垂直間距。語法：line-height:length|normal【演練6-8】設(shè)置行高，本例頁面6-8.html的顯示效果如圖6-10所示。6.2設(shè)置段落的樣式6.2.5設(shè)置文本換行在CSS3中新增了設(shè)置文本換行的功能，它是通過word-wrap屬性來實(shí)現(xiàn)這個(gè)效果的。語法：word-wrap：normal|break-word6.2設(shè)置段落的樣式6.3.1圖片的邊框如果希望更換邊框的顏色，或者換成虛線邊框，僅僅依靠HTML都是無法實(shí)現(xiàn)的。下面的實(shí)例講解了如何用CSS樣式美化圖片的邊框?！狙菥?-9】設(shè)置圖片邊框，本例頁面6-9.html的顯示效果如圖6-12所示。6.3設(shè)置圖片樣式6.3.2圖片的縮放使用CSS樣式控制圖片的大小，可以通過width和height兩個(gè)屬性來實(shí)現(xiàn)?！狙菥?-10】設(shè)置圖片縮放，本例頁面6-10.html的顯示效果如圖6-13所示。6.3設(shè)置圖片樣式6.4.1設(shè)置背景顏色在CSS中，網(wǎng)頁元素的背景顏色使用background-color屬性來設(shè)置，屬性值為某種顏色。語法：background-color:color|transparent【演練6-11】設(shè)置背景顏色，本例頁面6-11.html的顯示效果如圖6-16所示。

6.4設(shè)置背景6.4.2設(shè)置背景圖像在CSS樣式中，使用background-image屬性設(shè)置背景圖像來美化網(wǎng)頁。語法：background-image:url(url)|none【演練6-12】設(shè)置背景圖像，本例頁面6-12.html的顯示效果如圖6-17所示。6.4設(shè)置背景6.4.3設(shè)置背景重復(fù)在默認(rèn)情況下，圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪。可以使用background-repeat屬性來控制。語法：background-repeat:repeat|no-repeat|repeat-x|repeat-y【演練6-13】設(shè)置背景重復(fù)，本例頁面6-13.html的效果如圖6-18所示。6.4設(shè)置背景

6.4.4設(shè)置背景定位在CSS樣式中，可以使用background-position屬性改變背景圖片在元素中的位置。語法：background-position:length||lengthbackground-position:position||position【演練6-14】使用關(guān)鍵字進(jìn)行背景定位，顯示效果如圖6-19所示。

6.4設(shè)置背景6.4.5設(shè)置背景大小

background-size是CSS3提供的一個(gè)新特性，它可以讓用戶隨心所欲的控制背景圖的尺寸大小。語法：background-size：[length|percentage|auto]{1,2}|cover|contain6.4設(shè)置背景圖文混排一般出現(xiàn)在介紹性的內(nèi)容或新聞內(nèi)頁中，其關(guān)鍵在于處理圖片與文字之間的關(guān)系。請看下面的示例講解?！狙菥?-17】圖文混排，本例頁面6-17.html的顯示效果如圖6-23所示。6.5圖文混排6.6.1頁面布局規(guī)劃通過成熟的構(gòu)思與設(shè)計(jì)，電腦學(xué)堂作品展示頁面的效果如圖6-24所示，頁面布局示意圖如圖6-25所示。6.6用CSS設(shè)置文本和圖像綜合案例

6.6.2頁面的制作過程1．前期準(zhǔn)備（1）欄目目錄結(jié)構(gòu)在欄目文件夾下創(chuàng)建文件夾images和style，分別用來存放圖像素材和外部樣式表文件。（2）頁面素材將本頁面需要使用的圖像素材存放在文件夾images下。（3）外部樣式表在文件夾style下新建一個(gè)名為style.css的樣式表文件。

6.6用CSS設(shè)置文本和圖像綜合案例6.6.2頁面的制作過程2．制作頁面（1）頁面整體的制作（2）頁面頂部的制作（3）頁面導(dǎo)航的制作（4）頁面中部的制作（5）頁面底部的制作（6）頁面結(jié)構(gòu)代碼6.6用CSS設(shè)置文本和圖像綜合案例

制作電腦商城安全中心頁面，頁面效果如圖6-30所示，布局示意圖如圖