1、YCF正版可修改PPT（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目七-2電子課件CSS 3圖文混排項(xiàng)目七授課教師：姓名WEB前端設(shè)計(jì)基礎(chǔ)Contents1.項(xiàng)目描述2.知識(shí)準(zhǔn)備3.項(xiàng)目實(shí)施4.項(xiàng)目拓展5.項(xiàng)目小結(jié)6.技能訓(xùn)練二 知識(shí)準(zhǔn)備CSS 3美化文本；CSS 3美化段落；CSS 3圖文混排。CSS 3美化圖片；CSS 3美化段落1.設(shè)置詞間距在網(wǎng)頁(yè)設(shè)計(jì)中，如果單詞之間的間隔設(shè)置合理，將給人賞心悅目的感覺(jué)。在CSS 3中使用word-spacing屬性定義增加或者減少詞與詞之間的間隔。格式如下：word-spacing: normal | length;word-spacing屬性值如表所示。屬性值說(shuō)

2、明normal默認(rèn)值，定義單詞之間的標(biāo)準(zhǔn)間隔length定義單詞之間的固定寬度，可取正負(fù)值，單位為像素CSS 3美化段落2.設(shè)置字間距在CSS 3中使用letter-spacing來(lái)定義文本之間的距離，格式如下：letter-spacing: normal | length;letter-spacing屬性值如表所示。屬性值說(shuō) 明normal默認(rèn)間隔，以標(biāo)準(zhǔn)間隔顯示length由浮點(diǎn)數(shù)和單位標(biāo)識(shí)符組成的長(zhǎng)度值，可取正負(fù)值，單位為像素CSS 3美化段落3.設(shè)置文本修飾效果在CSS 3中，使用text-decoration屬性可以為文本設(shè)置多種修飾效果，如下劃線、刪除線等，格式如下： text-d

3、ecoration:屬性值; text-decoration屬性值如表所示。屬性值說(shuō) 明none默認(rèn)值，對(duì)文本不進(jìn)行任何修飾，用這個(gè)屬性值也可以去掉已經(jīng)有下劃線或刪除線或頂劃線的樣式overline上劃線underline下劃線line-through刪除線blink閃爍CSS 3美化段落3.設(shè)置文本修飾效果【例7-4】CSS 3美化段落實(shí)例一，代碼如下所示（示例文件7-4.html）。CSS3美化段落例1pline-height: 10px;始信泥土有芬芳轉(zhuǎn)眼捏成這般模樣你是女?huà)z托生的精靈你是夸父追日的夢(mèng)想Let me gently walk past you.Bathed in your

4、childlike eyes.Let me walk through your eyes.Small feet running in the field of hope.Well, ChinaMy dream!The dream is fragrant.在chrome瀏覽器中預(yù)覽CSS 3美化段落4.設(shè)置文本的垂直對(duì)齊方式在CSS 3中，使用vertical-align屬性設(shè)置垂直對(duì)齊方式，此屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊，可設(shè)置為負(fù)長(zhǎng)度值和百分比值。在表單元格中，此屬性可設(shè)置單元格內(nèi)容的對(duì)齊方式。格式如下：vertical-align:屬性值;vertical-al

5、ign屬性值如表所示。屬性值說(shuō) 明baseline默認(rèn)，元素放在父元素的基線上sub垂直對(duì)齊文本的下標(biāo)super垂直對(duì)齊文本的上標(biāo)top元素的頂端與行中最高元素的頂端對(duì)齊text-top元素的頂端與父元素字體的頂端對(duì)齊middle此元素放在父元素的中部bottom元素的頂端與行中最低元素的頂端對(duì)齊text-bottom把元素的底端與父元素字體的底端對(duì)齊length設(shè)置元素的堆疊順序%使用 line-height 屬性的百分比值來(lái)排列此元素，允許使用負(fù)值inherit從父元素繼承 vertical-align 屬性的值CSS 3美化段落5.設(shè)置文本的水平對(duì)齊方式文本除了垂直對(duì)齊方式外，還有水平對(duì)

6、齊方式，包括水平方向上的居中、左對(duì)齊、右對(duì)齊等。在CSS 3中，使用text-align屬性可定義文本的水平對(duì)齊方式，格式如下：text-align:屬性值;text-align屬性值如表所示。屬性值說(shuō) 明start文本向行的開(kāi)始邊緣對(duì)齊end文本向行的結(jié)束邊緣對(duì)齊left文本向行的左邊緣對(duì)齊，默認(rèn)值right文本向行的右邊緣對(duì)齊center文本在行內(nèi)居中對(duì)齊justify文本根據(jù)text-justify的屬性值設(shè)置分散對(duì)齊inherit繼承父元素的對(duì)齊方式CSS 3美化段落6.設(shè)置文本大小寫(xiě)轉(zhuǎn)換在文本編輯中，根據(jù)需要將大寫(xiě)字母轉(zhuǎn)換為小寫(xiě)字母，或?qū)⑿?xiě)字母轉(zhuǎn)換為大寫(xiě)字母，都是非常常見(jiàn)的。在CS

7、S 3中，使用text-transform屬性可定義文本的大小寫(xiě)轉(zhuǎn)換，格式如下：text-transform:屬性值;text-transform屬性值如表所示。屬性值說(shuō) 明none無(wú)轉(zhuǎn)換capitalize將每個(gè)單詞的第一個(gè)字母轉(zhuǎn)換成大寫(xiě)，其余不轉(zhuǎn)換uppercase轉(zhuǎn)換成大寫(xiě)lowercase轉(zhuǎn)換成小寫(xiě)CSS 3美化段落7.設(shè)置文本的行高在CSS 3中，使用line-height屬性可定義文本的行高，即一行的高度，格式如下：line-height:屬性值;line-height屬性值如表所示。屬性值說(shuō) 明normal默認(rèn)行高，即網(wǎng)頁(yè)文本的標(biāo)準(zhǔn)行高length百分比數(shù)值或由浮點(diǎn)數(shù)和單位標(biāo)識(shí)符

8、組成的長(zhǎng)度值，可以為負(fù)值CSS 3美化段落8.設(shè)置文本的縮進(jìn)在段落文本中通常使用首行縮進(jìn)兩個(gè)字符的方式，來(lái)表示段落的開(kāi)始。在CSS 3中，使用text-indent屬性定義文本塊中的首行縮進(jìn)，格式如下：text-indent:length;其中，length屬性值表示由百分比數(shù)值或由浮點(diǎn)數(shù)和單位標(biāo)識(shí)符組成的長(zhǎng)度值，可以為負(fù)值。也就是說(shuō)使用text-indent屬性上課以定義兩種縮進(jìn)方式，一種是直接定義縮進(jìn)的長(zhǎng)度，另一種是定義縮進(jìn)的百分比。CSS 3美化段落9.設(shè)置文本的空白處理在CSS 3中，使用white-space屬性定義對(duì)字符串或文本間空白的處理方式，格式如下：white-space:屬

9、性值;white-space屬性值如表所示。屬性值說(shuō) 明normal默認(rèn)值，空白會(huì)被瀏覽器忽略pre空白會(huì)被瀏覽器保留nowrap文本不會(huì)換行，文本會(huì)在同一行上繼續(xù)，直到遇到標(biāo)簽為止pre-wrap保留空白，但是正常地進(jìn)行換行pre-line合并空白，但是保留換行符inherit從父元素繼承white-space屬性值CSS 3美化段落10.設(shè)置文本的反排在編輯網(wǎng)頁(yè)文本時(shí)，通常文檔的基本方向是從左到右，有時(shí)需要將文檔的方向顯示為從右到左，在CSS 3中，通過(guò)unicode-bidi和direction兩個(gè)屬性來(lái)解決文本反排的效果。unicode-bidi格式如下：unicode-bidi:屬性

10、值;unicode-bidi屬性值如表所示。屬性值說(shuō) 明normal默認(rèn)值。元素不會(huì)打開(kāi)附加的一層嵌套，對(duì)于行內(nèi)元素，順序的隱式重排會(huì)跨元素邊界進(jìn)行embed如果是一個(gè)行內(nèi)元素，將會(huì)打開(kāi)附加的一層嵌套，這個(gè)嵌套層的方向由 direction 屬性指定，會(huì)在元素內(nèi)部隱式地完成順序重排bidi-override這會(huì)為行內(nèi)元素創(chuàng)建一個(gè)覆蓋，對(duì)于塊級(jí)元素，將為不在另一塊中的行內(nèi)后代創(chuàng)建一個(gè)覆蓋。這說(shuō)明，順序重排在元素內(nèi)部嚴(yán)格按照 direction 屬性進(jìn)行；忽略了雙向算法的隱式部分。CSS 3美化段落10.設(shè)置文本的反排direction屬性用于設(shè)置文檔流的方向，其格式如下：direction:屬性

11、值;direction屬性值如表所示。屬性值說(shuō) 明ltr文本流從左到右rtl文本流從右到左inherit文本流的值不可繼承CSS 3美化段落10.設(shè)置文本的反排【例7-5】CSS 3美化段落實(shí)例二，代碼如下所示（示例文件7-5.html）。CSS3美化段落例2pline-height: 8px;中國(guó)夢(mèng)始信泥土有芬芳轉(zhuǎn)眼捏成這般模樣你是女?huà)z托生的精靈你是夸父追日的夢(mèng)想Let me gently walk past you.Bathed in your childlike eyes.Let me walk through your eyes.Small feet running in the fi

12、eld of hope.Well, China My dream! The dream is fragrant. 在chrome瀏覽器中預(yù)覽CSS 3美化圖片1.圖片大小在HTML 5網(wǎng)頁(yè)排版中，設(shè)置圖片的大小有三種方法，分別是：（1）通過(guò)描述標(biāo)記width和height縮放圖片。通過(guò)img標(biāo)簽的width和height屬性來(lái)設(shè)置圖片的大小。width和height分別表示圖片的寬度和高度，可以是數(shù)值或百分比，單位可以是px。（2）使用CSS3中的max-width和max-height縮放圖片。max-width和max-height分別來(lái)設(shè)置圖片的寬度最大值和高度最大值。在定義圖片大小時(shí)，

13、如果圖片的默認(rèn)尺寸超過(guò)了定義的大小，就以max-width所定義的寬度值顯示，圖片的高度將同比例變化，如果定義的是max-height的值，圖片的寬度將同比例變化。如果圖片的尺寸小于最大寬度或者高度，那么圖片就按原尺寸大小顯示。（3）使用CSS3中的width和height縮放圖片。在CSS3中可以使用width和height屬性來(lái)設(shè)置圖片的寬度和高度，從而實(shí)現(xiàn)對(duì)圖片的縮放效果。如果僅僅設(shè)置了圖片的一個(gè)屬性值（width或者h(yuǎn)eight），而沒(méi)有設(shè)置另一個(gè)屬性值時(shí)，圖片本身會(huì)自動(dòng)等比例縮放。CSS 3美化圖片1.圖片大小【例7-6】CSS美化網(wǎng)頁(yè)圖片實(shí)例，代碼如下所示（示例文件7-6.html

14、）。CSS美化網(wǎng)頁(yè)圖片#img02max-width: 150px;#img03width:75px;height:75px;在chrome瀏覽器中預(yù)覽CSS 3美化圖片2.設(shè)置圖片的對(duì)齊方式在一個(gè)圖文頁(yè)面中，圖片對(duì)齊方式和文字排版同樣影響頁(yè)面的整潔簡(jiǎn)約。下面學(xué)習(xí)使用CSS 3屬性定義圖文對(duì)齊方式。設(shè)置圖片水平對(duì)齊text-align圖片的水平對(duì)齊方式和文本的水平對(duì)齊方式類(lèi)似，都有左、中、右三種對(duì)齊方式。由于標(biāo)簽本身沒(méi)有對(duì)齊屬性，所以要定義圖片的對(duì)齊方式，不能對(duì)標(biāo)簽直接定義圖片樣式，需要在圖片的上一級(jí)標(biāo)簽（父標(biāo)簽）定義對(duì)齊方式，讓圖片繼承父標(biāo)簽的對(duì)齊方式，即使用CSS繼承父標(biāo)簽的text-al

15、ign屬性來(lái)定義對(duì)齊方式。CSS 3美化圖片2.設(shè)置圖片的對(duì)齊方式text-align屬性取值如表所示。text-align屬性值說(shuō)明left默認(rèn)值，左對(duì)齊center居中對(duì)齊right右對(duì)齊CSS 3美化圖片2.設(shè)置圖片的對(duì)齊方式【例7-7】圖片的水平對(duì)齊實(shí)例，代碼如下所示（示例文件7-7.html）。圖片的水平對(duì)齊方式imgwidth: 75px;height: 75px;圖片左對(duì)齊圖片居中對(duì)齊圖片右對(duì)齊在chrome瀏覽器中預(yù)覽CSS 3美化圖片2.設(shè)置圖片的對(duì)齊方式設(shè)置圖片垂直對(duì)齊vertical-align通過(guò)對(duì)圖片的垂直對(duì)齊方式的設(shè)置，可以設(shè)置圖片和文字的高度一致，在CSS 3中使

16、用vertical-align屬性來(lái)定義。vertical-align屬性設(shè)置元素的垂直對(duì)齊方式，就是定義行內(nèi)元素和基線相對(duì)于該元素所在行的基線的垂直對(duì)齊，允許指定負(fù)值和百分比值，就會(huì)使元素降低。vertical-align屬性常用取值如表所示。vertical-align屬性取值說(shuō)明top把元素的頂端與行中最高元素的頂端對(duì)齊middle把此元素放置在父元素的中部baseline默認(rèn)，元素放置在父元素的基線上bottom把元素的底端與行中最底的元素底端對(duì)齊CSS 3美化圖片2.設(shè)置圖片的對(duì)齊方式【例7-8】圖片的垂直對(duì)齊實(shí)例，代碼如下所示（示例文件7-8.html）。圖片的垂直對(duì)齊方式pbor

17、der:1px red solid;margin-top:5px;imgwidth: 75px;height: 75px;垂直對(duì)齊方式：vertical-align:top;垂直對(duì)齊方式：vertical-align:middle;垂直對(duì)齊方式：vertical-align:bottom;在chrome瀏覽器中預(yù)覽CSS 3圖文混排1. 設(shè)置圖文環(huán)繞效果在CSS 3中，使用浮動(dòng)屬性float可以設(shè)置文字環(huán)繞效果。float屬性主要是定義元素向哪個(gè)方向上浮動(dòng)，浮動(dòng)的元素不管它是哪種元素，都會(huì)生成一個(gè)塊。一般情況下，此屬性總應(yīng)用于圖像，使文字環(huán)繞在圖像周?chē)?，有時(shí)也可以應(yīng)用于其他元素浮動(dòng)，但需要指定

18、一個(gè)明確的寬度，否則此元素會(huì)盡可能變窄。float屬性的取值如表所示。float屬性值說(shuō)明none默認(rèn)值，元素不浮動(dòng)left元素向左浮動(dòng)right元素向右浮動(dòng)CSS 3圖文混排2. 設(shè)置圖片和文字的間距如果需要設(shè)置圖片和文字之間的距離，即文字之間存在一定間距，可以使用CSS3中的padding屬性來(lái)設(shè)置。padding屬性主要用來(lái)在一個(gè)聲明中設(shè)置所有內(nèi)邊距屬性，即可以設(shè)置元素所有內(nèi)邊距的寬度，或者設(shè)置個(gè)邊上內(nèi)邊距的寬度。padding屬性的語(yǔ)法格式如下：padding:padding-top | padding-right | padding-bottom | padding-left參數(shù)值p

19、adding-top用來(lái)設(shè)置距離頂部的內(nèi)邊距；padding-right用來(lái)設(shè)置距離右部的內(nèi)邊距；padding-bottom用來(lái)設(shè)置距離底部的內(nèi)邊距；padding-left用來(lái)設(shè)置距離左部的內(nèi)邊距。CSS 3圖文混排2. 設(shè)置圖片和文字的間距【例7-9】圖文混排實(shí)例，代碼如下所示（示例文件7-9.html）。圖文混排pfont-size: 14px;text-indent: 28px;imgwidth: 200px;float:right;border:1px red solid;padding-top:10px;padding-bottom: 30px;padding-left: 50px;這幾天心里頗不寧?kù)o。今晚在院子里坐著乘涼，忽然想起日日走過(guò)的荷塘，在這滿(mǎn)月的光