1、YCF正版可修改PPT（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目七-1電子課件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)練一 項(xiàng)目描述本項(xiàng)目學(xué)習(xí)要點(diǎn)CSS 3美化段落；CSS 3美化圖片；CSS 3圖文混排。CSS 3美化文本；二 知識(shí)準(zhǔn)備CSS 3美化文本；CSS 3美化段落；CSS 3圖文混排。CSS 3美化圖片；CSS 3美化文本1.設(shè)置文本字體在CSS 3樣式中，使用font-family屬性定義文本的字體類型，格式如下：font-family：字體1,字體2,字體3;font-family可定義

2、多種字體，多個(gè)字體將按優(yōu)先順序排列，以逗號(hào)隔開（逗號(hào)為英文逗號(hào)）。如果字體名稱包含空格，如Times New Roman，則應(yīng)該將名稱用引號(hào)括起來(lái)。CSS 3美化文本2.設(shè)置文本大小在CSS 3樣式中，使用font-size屬性定義文本的大小，格式如下：font-size：像素值/關(guān)鍵字;font-size的屬性值可以使用兩種方式，一種是使用像素為單位的數(shù)值；二是使用關(guān)鍵字，如表所示。關(guān)鍵字說(shuō) 明xx-small最小。絕對(duì)字體尺寸，根據(jù)對(duì)象字體進(jìn)行調(diào)整x-small較小。絕對(duì)字體尺寸，根據(jù)對(duì)象字體進(jìn)行調(diào)整small小。絕對(duì)字體尺寸，根據(jù)對(duì)象字體進(jìn)行調(diào)整medium默認(rèn)值，正常。絕對(duì)字體尺寸，根

3、據(jù)對(duì)象字體進(jìn)行調(diào)整large大。絕對(duì)字體尺寸，根據(jù)對(duì)象字體進(jìn)行調(diào)整x-large較大。絕對(duì)字體尺寸，根據(jù)對(duì)象字體進(jìn)行調(diào)整xx-large最大。絕對(duì)字體尺寸，根據(jù)對(duì)象字體進(jìn)行調(diào)整larger相對(duì)字體尺寸。相對(duì)于父對(duì)象中字體尺寸進(jìn)行相對(duì)增大，使用成比例的em單位計(jì)算smaller相對(duì)字體尺寸。相對(duì)于父對(duì)象中字體尺寸進(jìn)行相對(duì)減小，使用成比例的em單位計(jì)算length百分?jǐn)?shù)或由浮點(diǎn)數(shù)和單位標(biāo)識(shí)符組成的長(zhǎng)度值，不可為負(fù)值。百分比取值是基于父對(duì)象中的字體尺寸CSS 3美化文本3.設(shè)置文本粗細(xì)在CSS 3樣式中，使用font-weight屬性定義文本的粗細(xì)程度，格式如下：font-weight:粗細(xì)值/關(guān)鍵

4、字;粗細(xì)值可以使用兩種方式，一是使用100900 的數(shù)值（100、200、900），值越大就表示越粗，值越小就表示越細(xì)，400相當(dāng)于正常字體normal，是瀏覽器默認(rèn)的字體粗細(xì)， 700相當(dāng)于bold；二是使用關(guān)鍵字，關(guān)鍵字如表所示。如果沒(méi)有設(shè)置該屬性，則使用默認(rèn)值normal。關(guān)鍵字說(shuō) 明normal默認(rèn)值，標(biāo)準(zhǔn)字體lighter定義更細(xì)的字體，相對(duì)值bold定義粗體字體bolder定義更粗的字體，相對(duì)值CSS 3美化文本4.設(shè)置文本顏色在CSS 3樣式中，使用color屬性定義文本的顏色，格式如下： color:顏色值;顏色值可以使用顏色的英文名稱、一個(gè)十六進(jìn)制的RGB值等多種方式來(lái)表示，

5、如表所示。顏色值說(shuō) 明color_name顏色值為顏色名稱的英文（例red，表示紅色）hex_number顏色值為十六進(jìn)制值（例#ff0000或#f00，表示紅色）rgb_number顏色值為RGB代碼（例rgb(255,0,0)，表示紅色）rgba_number顏色值為RGBA代碼（例rgba(255,0,0,0.5)，表示紅色）inherit從父元素繼承顏色hsl_number顏色值為HSL代碼（例hsl(0,75%,50%)）hsla_number顏色值為HSLA代碼（例hsla(120,50%,50%,1)）CSS 3美化文本5.設(shè)置文本樣式在CSS 3樣式中，使用font-style

6、屬性定義文本的樣式，格式如下： font-style:屬性值;屬性值如表所示。屬性值說(shuō) 明normal默認(rèn)值，標(biāo)準(zhǔn)的字體樣式italic斜體的字體樣式oblique傾斜的字體樣式inherit從父元素繼承的字體樣式CSS 3美化文本6.設(shè)置文本陰影效果在CSS 3樣式中，文本陰影效果屬于文本的高級(jí)樣式，如果使用上面的CSS樣式進(jìn)行定義，不能得到正確顯示效果，這就需要使用特定的CSS標(biāo)簽來(lái)完成。使用CSS 3樣式中的text-shadow屬性定義文字的陰影效果，格式如下： text-shadow:陰影水平偏移值（可取正負(fù)值） 陰影垂直偏移值（可取正負(fù)值） 陰影模糊值 陰影顏色;text-shad

7、ow屬性有四個(gè)，后兩個(gè)為可選。CSS 3美化文本6.設(shè)置文本陰影效果【例7-1】CSS3設(shè)置文本陰影效果實(shí)例，代碼如下所示（示例文件7-1.html）。設(shè)置文本陰影*margin:0;padding:0;h1font-family: Arial Black;font-size: 60px;text-shadow: 2px 3px 6px #333;h2font-family: Arial Black;font-size: 60px;/*設(shè)置多重陰影效果使用逗號(hào)隔開*/text-shadow: 2px 2px 0px #333, 2px 5px 10px green, 2px -2px 5px

8、red;Text shadowText shadow在chrome瀏覽器中預(yù)覽CSS 3美化文本7.設(shè)置文本溢出效果text-overflow屬性定義當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記。要實(shí)現(xiàn)溢出文本時(shí)產(chǎn)生省略號(hào)的效果，還必須定義強(qiáng)制文本在一行顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden）。text-overflow屬性格式如下： text-overflow:clip | ellipsis | string;text-overflow屬性值如表所示。屬性值說(shuō) 明clip簡(jiǎn)單地修剪文本，不顯示省略標(biāo)記ellipsis當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記stri

9、ng使用給定的字符串來(lái)代表被修剪的文本CSS 3美化文本8.設(shè)置文本控制換行當(dāng)在一個(gè)指定區(qū)域顯示的一行文本過(guò)長(zhǎng)，一行內(nèi)顯示不完時(shí)，就需要進(jìn)行換行設(shè)置。在CSS 3中使用word-wrap屬性來(lái)控制文本換行。word-wrap屬性格式如下：word-wrap:normal | break-word;word-wrap屬性值如表所示。屬性值說(shuō) 明normal只在允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理）break-word內(nèi)容將在邊界內(nèi)換行CSS 3美化文本8.設(shè)置文本控制換行【例7-2】CSS3美化文本實(shí)例，代碼如下所示（示例文件7-2.html）。CSS3美化文本bodyfont-family:

10、微軟雅黑;font-size: 14px;pcolor:rgb(200,60,0);中國(guó)夢(mèng)始信泥土有芬芳(font-weight: : bold;)轉(zhuǎn)眼捏成這般模樣(font-weight: bolder;)你是女媧托生的精靈(font-weight: lighter;)你是夸父追日的夢(mèng)想(font-weight: normal;)讓我輕輕走過(guò)你的跟前(font-weight: 100;)沐浴著你童真的目光(font-weight: 400;)讓我牽手與你同行(font-weight: 900;)小腳丫奔跑在希望的田野上(font-size: 80%;)啊，中國(guó)(font-style: inh

11、erit;)我的夢(mèng)(font-style: italic;)夢(mèng)正香(font-style: oblique;)在chrome瀏覽器中預(yù)覽CSS 3美化文本9.設(shè)置在線字體在CSS 3之前，網(wǎng)頁(yè)設(shè)計(jì)師在使用字體時(shí)，必須保證使用的字體在用戶的計(jì)算機(jī)中也已安裝好，才能正確還原設(shè)計(jì)者的字體設(shè)計(jì)意圖?，F(xiàn)在通過(guò)CSS3，網(wǎng)頁(yè)設(shè)計(jì)師可以使用任意字體，可將該字體文件存放到 web 服務(wù)器上，字體會(huì)在需要時(shí)被自動(dòng)下載到用戶的計(jì)算機(jī)上。格式如下：font-face font-family: ; src: , *; font-weight: ; font-style: ; CSS 3美化文本9.設(shè)置在線字體Your

12、WebFontName:此值指的就是你自定義的字體名稱，最好是使用你下載的默認(rèn)字體，他將被引用到你的Web元素中的font-family。如“font-family:YourWebFontName;”source:此值指的是你自定義的字體的存放路徑，可以是相對(duì)路徑也可以是絕路徑；format：此值指的是你自定義的字體的格式，主要用來(lái)幫助瀏覽器識(shí)別，其值主要有以下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；weight和style:這兩個(gè)值大家一定很熟悉，weight定義字體是否為粗體，style主要定義字體樣式，如斜體。

13、CSS 3美化文本9.設(shè)置在線字體【例7-3】CSS3在線字體實(shí)例，代碼如下所示（示例文件7-3.html）。CSS 3在線字體 font-facefont-family: TestFont;src: url(fonts/Sansation_Light.ttf);divfont-family:TestFont;font-size: 60px;color:#f00;CSS 3 Web Font在chrome瀏覽器中預(yù)覽CSS 3美化文本10.設(shè)置旋轉(zhuǎn)特效transform屬性能夠設(shè)置元素的旋轉(zhuǎn),向元素應(yīng)用2D或3D轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。其屬性值有很多，包括rotate( ) / skew( ) / scale( ) / translate( , ) ，分別還有x、y之分，比如：rotatex( ) 和 rotatey( ) ，以此類推。在此簡(jiǎn)單介紹一下ratate值。格式如下：transform:rotate(angle單位為deg); 定義2D旋轉(zhuǎn)在參數(shù)中規(guī)定角度,angle表示角度。作業(yè)一、選擇題1.下列_是CSS設(shè)置字體顏色的屬性。A colo