Web前端開發(fā)基礎(chǔ) 課件 項(xiàng)目四 CSS3基礎(chǔ)知識(shí)_第1頁
Web前端開發(fā)基礎(chǔ) 課件 項(xiàng)目四 CSS3基礎(chǔ)知識(shí)_第2頁
Web前端開發(fā)基礎(chǔ) 課件 項(xiàng)目四 CSS3基礎(chǔ)知識(shí)_第3頁
Web前端開發(fā)基礎(chǔ) 課件 項(xiàng)目四 CSS3基礎(chǔ)知識(shí)_第4頁
Web前端開發(fā)基礎(chǔ) 課件 項(xiàng)目四 CSS3基礎(chǔ)知識(shí)_第5頁
已閱讀5頁，還剩84頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

項(xiàng)目四

CSS3基礎(chǔ)知識(shí)【知識(shí)點(diǎn)】1.掌握CSS3中新增加的屬性選擇器，能夠運(yùn)用屬性選擇器為頁面中的元素添加樣式。2.理解關(guān)系選擇器的用法，能夠準(zhǔn)確判斷元素與元素間的關(guān)系。3.掌握常用的結(jié)構(gòu)化偽類選擇器，能夠?yàn)橄嗤Q的元素定義不同樣式。4.掌握偽元素選擇器的使用，能夠在頁面中插入所需要的文字或圖片內(nèi)容。5.掌握CSS偽類，會(huì)使用CSS偽類實(shí)現(xiàn)超鏈接特效。6.理解過渡屬性，能夠控制過渡時(shí)間、動(dòng)畫快慢等常見過渡效果。7.掌握CSS3中的變形屬性，能夠制作2D轉(zhuǎn)換、3D轉(zhuǎn)換效果。8.掌握CSS3中的動(dòng)畫，能夠熟練制作網(wǎng)頁中常見的動(dòng)畫效果【技能點(diǎn)】1.能使用CSS3新增選擇器獲取網(wǎng)頁元素2.能使用CSS3邊框、顏色、字體、盒陰影、背景、漸變等新特性美化頁面樣式3.能使用CSS3動(dòng)畫、過渡等完成網(wǎng)頁動(dòng)態(tài)效果4.能使用CSS3多列布局等設(shè)計(jì)網(wǎng)頁布局5.能使用2D、3D轉(zhuǎn)換完成網(wǎng)頁元素的旋轉(zhuǎn)、平移、縮放和傾斜效果課程目標(biāo)【素質(zhì)目標(biāo)】1．培養(yǎng)自我管理、持續(xù)學(xué)習(xí)的能力2．培養(yǎng)環(huán)保意識(shí)，樹立正確的價(jià)值觀和道德素養(yǎng)3．培養(yǎng)對(duì)新知識(shí)、新技術(shù)的不斷挑戰(zhàn)、開拓創(chuàng)新的精神·1.目錄ContentsCSS屬性選擇器CSS關(guān)系選擇器結(jié)構(gòu)偽類選擇器CSS3新增常用屬性漸變CSS3變形CSS3過渡CSS3動(dòng)畫4.1CSS3屬性選擇器

E[att^=value]屬性選擇器是指選擇名稱為E的元素，且該元素定義了att屬性，att屬性值包含前綴為value的子字符串。4.1.1E[att^=value]屬性選擇器

E是可省略的。

如果省略則表示可以匹配滿足條件的任意元素。

div[id^="box"]表示匹配包含id屬性，且id屬性值是以"box"字符串開頭的div元素。【注意】技能訓(xùn)練4-1E[att^=value]屬性選擇器

4.1CSS3屬性選擇器【方法步驟】1、打開HBuilderX,新建項(xiàng)目chapter4，新建html文件，命名為ex4-1.html2、編寫HTML代碼1<!--屬性選擇器-->2<!DOCTYPEhtml>3<html>4 <head>5 <metacharset="UTF-8">6 <title>E[att^=value]屬性選擇器</title>7 <styletype="text/css">8 h3[id^="one"]{9 color:red;10 font-family:"微軟雅黑";11 font-size:24px;12 }13 h3[id^="two"]{14 color:green;15 font-family:"微軟雅黑";16 font-size:24px17 }18 </style>技能訓(xùn)練4-1E[att^=value]屬性選擇器

1.CSS屬性選擇器19 </head>20 <body>21 <h3id="onetwo">做好垃圾分類，人人有責(zé)</h3>22 <h3id="one">廚余垃圾</h3>23 <p>家庭中產(chǎn)生的菜幫菜葉、瓜果皮核、剩菜剩飯、食物殘?jiān)⑿笄輧?nèi)臟等易腐垃圾</p>24 <h3id="two">可回收垃圾</h3>25 <p>已失去原有使用價(jià)值，但回收后加工又可以再利用的物品。主要包括廢紙類、塑料類、玻璃類、金屬類、電子廢棄物類、織物類等</p>26 <h3id="one1">有害垃圾</h3>27 <p>有毒有害物質(zhì)，主要包括廢電池、廢熒光燈管、廢溫度計(jì)、廢血壓計(jì)、廢藥品、廢油漆溶劑及其包裝物、廢殺蟲劑、廢膠片等

28 </p>29 <h3id="two1">其他垃圾</h3>30 <p>除廚余垃圾、可回收物、有害垃圾之外的生活垃圾，以及難以辨識(shí)類別的生活垃圾</p>

31 </body>32</html>技能訓(xùn)練4-1E[att^=value]屬性選擇器

4.1CSS3屬性選擇器3、運(yùn)行結(jié)果：4.1CSS3屬性選擇器

E[att$=value]屬性選擇器是指選擇名稱為E的標(biāo)記，且該標(biāo)記定義了att屬性，att屬性值包含后綴為value的子字符串。4.1.2E[att$=value]屬性選擇器E是可省略的。如果省略則表示可以匹配滿足條件的任意元素。

如：div[id$=box]表示匹配包含id屬性，且id屬性值是以“box”字符串結(jié)尾的div元素。【注意】技能訓(xùn)練4-2E[att$=value]屬性選擇器

4.1CSS3屬性選擇器【方法步驟】1、打開HBuilderX,新建項(xiàng)目chapter4，新建html文件，命名為ex4-2.html2、編寫HTML代碼部分與ex4-1-1相同，僅修改css部分1<styletype="text/css">2 h3[id$="one"]{3 color:red;4 font-family:"微軟雅黑";5 font-size:24px;6 }7 h3[id$="two"]{8 color:green;9 font-family:"微軟雅黑";10 font-size:24px;11 }12</style>

技能訓(xùn)練4-2E[att$=value]屬性選擇器

4.1CSS3屬性選擇器3、運(yùn)行結(jié)果：4.1CSS3屬性選擇器

E[att*=value]屬性選擇器是指選擇名稱為E的標(biāo)記，且該標(biāo)記定義了att屬性，att屬性值包含后綴為value的子字符串。4.1.3E[att*=value]屬性選擇器E是可省略的。如果省略則表示可以匹配滿足條件的任意元素。

如：div[id*=box]表示匹配包含id屬性，且id屬性值是以“box”字符串結(jié)尾的div元素。【注意】技能訓(xùn)練4-3E[att*=value]屬性選擇器

4.1CSS3屬性選擇器【方法步驟】1、打開HBuilderX,新建項(xiàng)目chapter4，新建html文件，命名為ex4-3.html2、編寫HTML代碼部分與ex4-1-1相同，僅修改css部分1 h3[id*="one"]{2 color:red;3 font-family:"微軟雅黑";4 font-size:24px;5 }6 h3[id*="two"]{7 color:green;8 font-family:"微軟雅黑";9 font-size:24px;19 }技能訓(xùn)練4-3E[att*=value]屬性選擇器

4.1CSS屬性選擇器3.運(yùn)行效果：4.2CSS3關(guān)系選擇器

子代選擇器主要用來選擇某個(gè)元素的第一級(jí)子元素。例如希望選擇只作為h1元素子元素的strong元素，可以這樣寫：h1>strong。4.2.1子代選擇器(>)技能訓(xùn)練4-4子代選擇器(>)

4.2CSS3關(guān)系選擇器【方法步驟】1、打開HBuilderX,新建項(xiàng)目chapter4，新建html文件，命名為ex4-4.html2、編寫代碼1<!--關(guān)系選擇器-->2<!DOCTYPEhtml>3<html>4 <head>5 <metacharset="UTF-8">6 <title>子代選擇器(>)</title>7 <styletype="text/css">8 h1>strong{9 color:red;10 font-family:"華文行楷";11 font-size:36px;12 }13 </style>14 </head>15 <body>16 <h1><strong>可親可愛</strong>的<strong>好榜樣</strong></h1>17 <h1>偉大出自<em><strong>平凡</strong></em>，平凡造就<em><strong>偉大18</strong></em></h1>19 </body>20</html>技能訓(xùn)練4-4子代選擇器(>)4.2CSS3關(guān)系選擇器3、運(yùn)行效果：4.2CSS3關(guān)系選擇器

兄弟選擇器用來選擇與某元素位于同一個(gè)父元素之中，且位于該元素之后的兄弟元素。兄弟選擇器分為臨近兄弟選擇器和普通兄弟選擇器兩種。

1.普通兄弟選擇器普通兄弟選擇器使用“～”來鏈接前后兩個(gè)選擇器。查找某一個(gè)指定元素的后面的所有兄弟結(jié)點(diǎn)。4.2.2兄弟選擇器(+、～)技能訓(xùn)練4-5兄弟選擇器(+、～)

4.2CSS3關(guān)系選擇器【方法步驟】1、打開HBuilderX,新建項(xiàng)目chapter4，新建html文件，命名為ex4-5.html2、編寫代碼<!--兄弟選擇器--><!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>普通兄弟選擇器</title> <styletype="text/css"> h2~p{ color:green; font-family:"微軟雅黑"; font-size:20px; } </style> </head> <body> <h2>《山坡羊.梅》</h2>技能訓(xùn)練4-2-2普通兄弟選擇器

2.CSS關(guān)系選擇器 <p>東風(fēng)裊裊，陰霾漸杳。</p> <p>霞光千里枝頭傲。</p> <p>碧云霄，志氣豪。</p> <p>紅梅萬點(diǎn)初知曉，香霧驅(qū)寒春盡報(bào)。</p> <p>來，皆含笑;歸，皆含笑。</p> </body></html>3、運(yùn)行效果：技能訓(xùn)練4-6臨近兄弟選擇器

4.2CSS3關(guān)系選擇器【方法步驟】1、打開HBuilderX,新建項(xiàng)目chapter4，新建html文件，命名為ex4-6.html2、編寫代碼與ex4-5.html相同，僅修改css部分3、運(yùn)行效果：1<styletype="text/css">2 h2+p{3 color:green;4 font-family:"微軟雅黑";5 font-size:20px;6 }7</style>4.3結(jié)構(gòu)偽類選擇器

CSS3中的結(jié)構(gòu)偽類選擇器是根據(jù)HTML頁面中元素之間的關(guān)系來定位HTML元素，從而減少對(duì)HTML元素的id屬性和class屬性的依賴。偽類的名稱不區(qū)分大小寫，但需要以冒號(hào):開頭。偽類需要與CSS中的選擇器結(jié)合使用。

結(jié)構(gòu)偽類選擇器基本語法格式：selector:pseudo-class{property:value;}技能訓(xùn)練4-7偽類選擇器(：root)

4.3結(jié)構(gòu)偽類選擇器

【方法步驟】1、打開HBuilderX,新建項(xiàng)目chapter4，新建html文件，命名為ex4-7.html2、編寫代碼HTML代碼部分同ex4-6.html，CSS代碼部分：在CSS代碼中設(shè)置文檔內(nèi)所有文字顏色為棕色，h2標(biāo)簽內(nèi)的文字顏色為黃花色。3、運(yùn)行效果1 :root{2 color:brown;3 }4 h2{5 color:goldenrod;6 }4.3.1:root選擇器

匹配元素的根元素，在HTML中，根元素永遠(yuǎn)是<html>技能訓(xùn)練4-8偽類選擇器(：not)

4.3結(jié)構(gòu)偽類選擇器

【方法步驟】1、打開HBuilderX,新建項(xiàng)目chapter4，新建html文件，命名為ex4-8.html2、編寫代碼HTML代碼部分同ex4-7.htmlCSS代碼部分：在上述代碼中，用以匹配body中除h2標(biāo)簽外的元素（也就是所有的p元素），設(shè)置字體顏色為橙色，20號(hào)字。3、運(yùn)行效果1 body*:not(h2){2 color:orange;3 font-size:20px;4 }4.3.2:not(selector)

去除所有與給定選擇器匹配的元素4.3結(jié)構(gòu)偽類選擇器

4.3.3子元素選擇器偽類名示例含義:first-childp:first-child匹配父元素中的第一個(gè)子元素<p>，<p>必須是父元素中的第一個(gè)子元素:last-childp:last-child匹配父元素中的最后一個(gè)子元素<p>，<p>必須是父元素中的最后一個(gè)子元素:nth-child(n)p:nth-child(2)匹配父元素中的第二個(gè)子元素<p>，<p>必須是父元素中的第二個(gè)子元素:nth-last-child(n)p:nth-last-child(2)匹配父元素的倒數(shù)第二個(gè)子元素<p>，<p>必須是父元素的倒數(shù)第二個(gè)元素:only-childp:only-child匹配父元素下唯一的子元素<p>，<p>必須是父元素唯一的子元素:emptyp:empty匹配任何沒有子元素的<p>元素:linka:link匹配所有未被訪問的鏈接:activea:active匹配被點(diǎn)擊的鏈接:hovera:hover匹配鼠標(biāo)懸停其上的鏈接:visiteda:visited匹配所有已經(jīng)訪問過的鏈接技能訓(xùn)練4-9偽類選擇器

4.3結(jié)構(gòu)偽類選擇器【方法步驟】1、打開HBuilderX,新建項(xiàng)目chapter4，新建html文件，命名為ex4-9.html2、編寫代碼1<!--結(jié)構(gòu)偽類選擇器-->2<!DOCTYPEhtml>3<html>4 <head>5 <metacharset="UTF-8">6 <title>結(jié)構(gòu)偽類選擇器</title>7 <styletype="text/css">8 h1{9 text-align:center;10 }11 ul{12 list-style:none;

13 }14 li{15 display:inline-block;16 width:350px;17 height:492px;18 float:left;技能訓(xùn)練4-9偽類選擇器

4.3結(jié)構(gòu)偽類選擇器19 background:#ccc;20 margin:20px;21 }2223 ulli:first-child{24 background:rgb(234,244,255)url(image/khsw.png)no-repeat;25 }26 ulli:nth-child(2){27 background:rgb(234,244,255)url(image/yhlj.png)no-repeat;28 }29 ulli:nth-last-child(2){30 background:rgb(234,244,255)url(image/cylj.png)no-repeat;31 32 }33 ulli:last-child{34 background:rgb(234,244,255)url(image/qtlj.png)no-repeat;35 background-repeat:no-repeat;36 }3738 li>span{39 margin-top:170px;40 }41

技能訓(xùn)練4-9偽類選擇器

4.3結(jié)構(gòu)偽類選擇器42 </style>43 </head>44 <body>45 <h1>46 垃圾分類47 </h1>48 <ul>49 <li></li>50 <li></li>51 <li></li>52 <li></li>53 </ul>54 </body>55</html>3、運(yùn)行效果：4.3結(jié)構(gòu)偽類選擇器

4.3.4其他偽類選擇器偽類名示例含義:first-of-typep:first-of-type匹配父元素中的第一個(gè)<p>元素:last-of-typep:last-of-type匹配父元素中的最后一個(gè)<p>元素:nth-of-type(n)p:nth-of-type(2)匹配父元素下的第二個(gè)<p>元素:nth-last-of-type(n)p:nth-last-of-type(2)匹配父元素下的倒數(shù)第二個(gè)<p>元素:only-of-typep:only-of-type匹配父元素下唯一的<p>元素4.3結(jié)構(gòu)偽類選擇器

4.3.4其他偽類選擇器偽類名示例含義:first-of-typep:first-of-type匹配父元素中的第一個(gè)<p>元素:last-of-typep:last-of-type匹配父元素中的最后一個(gè)<p>元素:nth-of-type(n)p:nth-of-type(2)匹配父元素下的第二個(gè)<p>元素:nth-last-of-type(n)p:nth-last-of-type(2)匹配父元素下的倒數(shù)第二個(gè)<p>元素:only-of-typep:only-of-type匹配父元素下唯一的<p>元素技能訓(xùn)練4-10其他偽類選擇器

4.3結(jié)構(gòu)偽類選擇器【方法步驟】1、打開HBuilderX,新建項(xiàng)目chapter4，新建html文件，命名為ex4-10.html2、編寫代碼<!--結(jié)構(gòu)偽類選擇器--><!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>結(jié)構(gòu)偽類選擇器</title> <styletype="text/css"> #tupian{ position:relative; } #tupianimg:first-of-type{ position:absolute; top:0; } #tupianimg:nth-of-type(2){ position:absolute; top:130px; }技能訓(xùn)練4-10其他偽類選擇器

4.3結(jié)構(gòu)偽類選擇器 #tupianimg:nth-of-type(3){ position:absolute; top:260px; } #tupianimg:nth-last-of-type(2){ position:absolute; top:390px; } #tupianimg:last-of-type{ position:absolute; top:500px; } </style> </head> <body> <h2>可回收物</h2> <p>主要包括：<br/> 1、紙類：未嚴(yán)重玷污的文字用紙、包裝用紙和其他紙制品等。如報(bào)紙、各種包裝紙、辦公用紙、廣告紙片、紙盒、復(fù)印紙等；<br/> 2、塑料：廢容器塑料、包裝塑料等塑料制品。比如各種塑料袋、塑料瓶、泡沫塑料、一次性塑料餐盒餐具、硬塑料等；<br/> 3、金屬：各種類別的廢金屬物品。如易拉罐、鐵皮罐頭盒、鉛制牙膏皮等；<br/> 4、玻璃：有色和無色廢玻璃制品；<br/>

技能訓(xùn)練4-10其他偽類選擇器

4.3結(jié)構(gòu)偽類選擇器5、織物：舊紡織衣物和紡織制品。有害垃圾是指油漆、顏料、各類清洗液、電子垃圾和電池。</p> <divid="tupian"> <imgsrc="image/khs1.png"/> <imgsrc="image/khs2.png"/> <imgsrc="image/khs3.png"/> <imgsrc="image/khs4.png"/> <imgsrc="image/khs5.png"/> </div> </body></html>3、運(yùn)行效果：4.3結(jié)構(gòu)偽類選擇器

::before表示在元素內(nèi)部的前面插入內(nèi)容，::after表示在元素內(nèi)部的后面插入內(nèi)容。4.3.5::before和::after冒號(hào)前不能加空格。選擇器必須寫上屬性content:"";（因?yàn)樾聞?chuàng)建的元素里必須有點(diǎn)內(nèi)容才能創(chuàng)建成功，否則看不到，content引號(hào)中可以為空）before和after創(chuàng)建一個(gè)元素，但是屬于行內(nèi)元素。【注意】技能訓(xùn)練4-11偽元素選擇器

4.3結(jié)構(gòu)偽類選擇器【方法步驟】1、在項(xiàng)目chapter4，新建html文件，命名為ex4-11.html2、編寫代碼1<!--偽元素選擇器before和after-->2<!DOCTYPEhtml>3<html>4 <head>5 <metacharset="UTF-8">6 <title>偽元素選擇器before和after</title>7 <styletype="text/css">8 h2{9 font-size:30px;10 }11 ul{12 list-style:none; 13 }14 li{15 font-size:14px;16 line-height:20px;17 }18 li::before{19 content:url("image/icon.png");技能訓(xùn)練4-11偽元素選擇器

4.3結(jié)構(gòu)偽類選擇器20 margin-right:5px;21 }22 23 h2::after{24 content:'有害垃圾包括廢電池、廢日光燈管、廢水銀溫度計(jì)、過期藥品等，這些垃圾需要特殊安全處理。';25 color:#333;26 font-size:16px;27 font-weight:bold;28 line-height:28px;29 display:block;30 text-indent:2em;31 margin-top:5px;32 }33 </style>34 </head>35 <body>36 <h2>有害垃圾</h2>37 <p>主要類型：</p>38 <ul>39 <li>廢鎳鎘電池和廢氧化汞電池：充電電池、鋰電池、鎘鎳電池、鉛酸電池、蓄電池、紐扣電池等電池</li>40 <li>廢熒光燈管：熒光（日光）燈管、鹵素?zé)舻?lt;/li>技能訓(xùn)練4-11偽元素選擇器

4.3結(jié)構(gòu)偽類選擇器

在上述代碼中，可以看出，在“l(fā)i”部分的使用::before添加了自定義的項(xiàng)目符號(hào)，標(biāo)題后使用::after添加了文字字樣，并通過外邊距屬性調(diào)整顯示位置。41 <li>廢藥品及其包裝物：過期藥物、藥物膠囊、藥片、藥品內(nèi)包裝、酒精、使用過的醫(yī)用紗布棉簽等</li>42 <li>廢油漆和溶劑及其包裝物：廢油漆桶、染發(fā)劑殼、過期的指甲油、洗甲水等</li>43 <li>廢礦物油及其包裝物</li>44 <li>廢含汞溫度計(jì)、廢含汞血壓計(jì)：水銀血壓計(jì)、水銀體溫計(jì)、水銀溫度計(jì)</li>45 <li>廢殺蟲劑及其包裝：老鼠藥（毒鼠強(qiáng)等）、殺蟲噴霧罐、其他殺蟲藥物</li>46 <li>廢膠片及廢相紙：x光片等感光膠片、相片底片</li>47 </ul>48 </body>49</html>技能訓(xùn)練4-11偽元素選擇器

4.3結(jié)構(gòu)偽類選擇器3、運(yùn)行效果:4.3結(jié)構(gòu)偽類選擇器

:link——設(shè)置未被訪問的鏈接的樣式；:visited——設(shè)置已經(jīng)被訪問的鏈接的樣式；（一般與:link屬性相同）:hover——設(shè)置將鼠標(biāo)懸浮在鏈接上的樣式；:active——設(shè)置將鼠標(biāo)點(diǎn)擊在鏈接上的樣式；（一般不做設(shè)置）4.3.6超鏈接偽類技能訓(xùn)練4-12偽類選擇器

4.3結(jié)構(gòu)偽類選擇器【方法步驟】1、在項(xiàng)目chapter4，新建html文件，命名為ex4-12.html2、編寫代碼1<!--偽元素選擇器before和after-->2<!DOCTYPEhtml>3<html>4 <head>5 <metacharset="UTF-8">6 <title>超鏈接偽類</title>7 <styletype="text/css">8 ul{9 list-style:none;10 display:flex;11 justify-content:space-around;12 margin:auto;13 height:40px;14 line-height:40px;15 background-color:#8cc63e;16 color:#fff;17 text-align:center;18 }19 li{技能訓(xùn)練4-3-6偽類選擇器

3.結(jié)構(gòu)偽類選擇器20 width:20%;21 }22 a:link,a:visited{23 text-decoration:none;24 color:#fff;25 font-weight:bold;26 font-size:16px;27 }28 a:hover{29 background-color:#5dbc80;30 display:block;31 height:40px;32 }33 a:active{34 background-color:#375c06;35 display:block;36 height:40px;37 }38 </style>39 </head>40 <body>41 <ul>42 <li><ahref="#">首頁</a></li>技能訓(xùn)練4-11偽類選擇器

4.3結(jié)構(gòu)偽類選擇器從上述代碼中可以看到，初始狀態(tài)和默認(rèn)狀態(tài)下字體的顏色和背景色都是一致的，通過修改背景色感受鼠標(biāo)經(jīng)過和鼠標(biāo)按下時(shí)的超鏈接的兩種不同狀態(tài)。3、運(yùn)行效果43 <li><ahref="#">可回收物</a></li>44 <li><ahref="#">有害垃圾</a></li>45 <li><ahref="#">廚余垃圾</a></li>46 <li><ahref="#">其他垃圾</a></li>47 </ul>48 </body>49</html>默認(rèn)狀態(tài)、訪問后狀態(tài)鼠標(biāo)經(jīng)過時(shí)狀態(tài)鼠標(biāo)按下時(shí)狀態(tài)4.4CSS3新增常用屬性

在瀏覽網(wǎng)頁時(shí)，由于客戶端沒有安裝某些特殊字體，導(dǎo)致網(wǎng)頁文字無法按設(shè)計(jì)正常顯示，這時(shí)我們可以使用服務(wù)器字體來避免這種現(xiàn)象的發(fā)生。4.4.1服務(wù)器字體@font-face{font-family:name;src:url(url)format(font-format);}基本語法格式技能訓(xùn)練4-13服務(wù)器字體4.4CSS3新增常用屬性【方法步驟】1、在項(xiàng)目chapter4，新建html文件，命名為ex4-13.html2、在chapter4中新建目錄fonts，將下載好的字體文件存放其中3、編寫代碼1<!--服務(wù)器字體-->2<!DOCTYPEhtml>3<html>4 <head>5 <metacharset="UTF-8">6 <title>服務(wù)器字體</title>7 <styletype="text/css">8 @font-face{9font-family:JianZhi;10src:url("fonts/FZJZJW.ttf");11 }12 h2{13 font-family:JianZhi;14 font-size:30px;15 }16 </style>17 </head>技能訓(xùn)練4-13服務(wù)器字體4.4CSS3新增常用屬性在上述代碼中設(shè)置了服務(wù)器字體，并命名為JianZhi，對(duì)h2中的元素應(yīng)用該字體。4、運(yùn)行效果：18 <body>19 <h2>其他垃圾</h2>20 <p>其他垃圾包括磚瓦陶瓷、渣土、衛(wèi)生間廢紙、瓷器碎片、動(dòng)物排泄物、一次性用品等難以回收的廢棄物，21 采取衛(wèi)生填埋可有效減少對(duì)地下水、地表水、土壤及空氣的污染。</p>22 <imgsrc="image/qtlj01.jpg"/>23 </body>24</html>4.4CSS3新增常用屬性1、text-shadow（文字陰影），語法格式如下：text-shadow:h-shadowv-shadowblurcolor;

4.4.2新增文本屬性1、text-shadow（文字陰影）

值描述h-shadow必填參數(shù)。表示水平陰影的位置，允許負(fù)值。v-shadow必填參數(shù)。表示垂直陰影的位置，允許負(fù)值。blur可選參數(shù)。表示模糊的距離。color可選參數(shù)。表示陰影的顏色。基本語法格式text-shadow:h-shadowv-shadowblurcolor;

4.4CSS3新增常用屬性1、text-shadow（文字陰影），語法格式如下：text-shadow:h-shadowv-shadowblurcolor;

4.4.2新增文本屬性基本語法格式text-overflow:clip|ellipsis|string;2、text-overflow（文本溢出）clip:修剪文本；ellipsis：顯示省略號(hào)來代表被修剪的文本；string：使用給定的字符串來代表被修剪的文本。

注：該屬性只對(duì)在塊級(jí)元素溢出的內(nèi)容有效。技能訓(xùn)練4-14新增文本屬性4.4CSS3新增常用屬性【方法步驟】1、在項(xiàng)目chapter4，新建html文件，命名為ex4-14.html2、編寫代碼1<!--新增文本屬性-->2<!DOCTYPEhtml>3<html>4 <head>5 <metacharset="UTF-8">6 <title>新增文本屬性</title>7 <styletype="text/css">8 .content{9 height:20px;10 text-overflow:ellipsis;11 white-space:nowrap;12 overflow:hidden;13 border:1pxsolid#43a468;14 text-indent:2em;15 width:50%;16 padding:5px;17 }18 .title{19 font-size:26px;技能訓(xùn)練4-4-2新增文本屬性4.CSS3新增常用屬性20 display:inline-block;21 margin:030px;22 text-shadow:6px6px10px#8cc63e;23 }24 .line{25 display:inline-block;26 width:90px;27 height:20px;28 background-image:url("image/arrow.png");29 }30 </style>31 </head>32 <body>33 <h2>廚余垃圾</h2>34 <pclass="content">廚余垃圾含有極高的水分與有機(jī)物，很容易腐壞，產(chǎn)生惡臭。經(jīng)過妥善處理和加工，可轉(zhuǎn)化為新的資源，35 高有機(jī)物含量的特點(diǎn)使其經(jīng)過嚴(yán)格處理后可作為肥料、飼料，也可產(chǎn)生沼氣用作燃料或發(fā)電，油脂部分則可36 用于制備生物燃料。</p>37 <p>38 <spanclass="title">收集</span>39 <spanclass="line"></span>40 <spanclass="title">運(yùn)輸</span>技能訓(xùn)練4-4-2新增文本屬性4.CSS3新增常用屬性在上述代碼中，設(shè)置文字陰影水平方向移動(dòng)6px、垂直方向移動(dòng)6px，模糊距離10px、顏色橙色；設(shè)置文字溢出以省略號(hào)顯示，需配合white-space以及overflow屬性的設(shè)置，才能產(chǎn)生截?cái)嘈Ч?、運(yùn)行效果41 <spanclass="line"></span>42 <spanclass="title">處理</span>43 <spanclass="line"></span>44 <spanclass="title">綠色循環(huán)</span>45 </p>46 <imgsrc="image/cylj01.jpg"/>47 </body>48</html> 4.4CSS3新增常用屬性1、text-shadow（文字陰影），語法格式如下：text-shadow:h-shadowv-shadowblurcolor;

4.4.3新增邊框?qū)傩?、border-radiusclip:

用來設(shè)置邊框圓角的屬性。

border-radius:none|<length>{1,4}[/<length>{1,4}]?

none：是默認(rèn)值，表示沒有圓角<length>：為長度值，不能為負(fù)值,分為兩組，每組可以有1到4個(gè)值，第一組為水平半徑，第二組為垂直半徑2、box-shadow

用于向方框添加陰影。

box-shadow:h-shadow|v-shadow|blur|spread|color|inset;

h-shadow：（必需）水平陰影的位置。允許負(fù)值

v-shadow：（必需）垂直陰影的位置。允許負(fù)值

blur：模糊距離

spread：陰影的大小

color：陰影的顏色。在CSS顏色值尋找顏色值的完整列表

inset：從外層的陰影（開始時(shí)）改變陰影內(nèi)側(cè)陰影語法格式：語法格式：技能訓(xùn)練4-15新增邊框?qū)傩?.4CSS3新增常用屬性【方法步驟】1、在項(xiàng)目chapter4，新建html文件，命名為ex4-15.html2、編寫代碼1<!--新增邊框?qū)傩?->2<!DOCTYPEhtml>3<html>4 <head>5 <metacharset="UTF-8">6 <title>新增邊框?qū)傩?lt;/title>7 <styletype="text/css">8 div{9 width:100px;10 height:100px;11 border:1pxsolid#43a468;12 float:left;13 margin:10px30px;14 text-align:center;15 font-size:16px;16 line-height:30px;17 padding:15px;18 border-radius:5px10px20px15px;19 box-shadow:8px8px20px2px#8cc63e;技能訓(xùn)練4-15新增邊框?qū)傩?.4CSS3新增常用屬性從上述代碼中，為div部分標(biāo)簽設(shè)置四個(gè)方向的角度圓角，水平方向8px、垂直方向8px、模糊距離20px、陰影大小2px、綠色的陰影效果。3、運(yùn)行效果：20 }21 </style>22 </head>23 <body>24 <h2>垃圾分類的意義</h2>25 <div>防止對(duì)空氣污染</div>26 <div>提高垃圾資源化利用</div>27 <div>減少垃圾對(duì)土地的侵占</div>28 <div>可促進(jìn)資源循環(huán)和可持續(xù)發(fā)展</div>29 </body>30</html>4.5漸變1、text-shadow（文字陰影），語法格式如下：text-shadow:h-shadowv-shadowblurcolor;

CSS3漸變有3種：（1）線性漸變：

指的就是指在一條直線上進(jìn)行漸變，在網(wǎng)頁中大多數(shù)漸變效果都是線性漸變。

語法：

background:linear-gradient(方向，開始顏色，結(jié)束顏色);（2）徑向漸變：

是一種從起點(diǎn)到終點(diǎn)顏色從內(nèi)到外進(jìn)行圓形漸變（從中間向外拉，像圓一樣）。CSS3徑向漸變是圓形或橢圓形漸變，顏色不再沿著一條直線漸變，而是從一個(gè)起點(diǎn)向所有方向漸變

語法：

background:radial-gradient(position,shapesize,start-color,stop-color)·

position：定義圓心位置，可選·

shapesize：shape定義形狀（圓形或橢圓）,size定義大小，可選·

start-color：開始顏色·

stop-color：結(jié)束顏色（3）重復(fù)漸變：

是在線性漸變和徑向漸變基礎(chǔ)上的延伸，參數(shù)與線性漸變、徑向漸變相同。·repeating-linear-gradient

重復(fù)線性漸變·

repeating-radial-gradient

重復(fù)徑向漸變技能訓(xùn)練4-16漸變屬性4.5漸變【方法步驟】1、在項(xiàng)目chapter4，新建html文件，命名為ex4-16.html2、編寫代碼1<!--新增漸變屬性-->2<!DOCTYPEhtml>3<html>4 <head>5 <metacharset="UTF-8">6 <title>漸變</title>7 <styletype="text/css">8 h1{9 text-align:center;10 }11 .content{12 display:flex;13 }14 .box{15 width:300px;16 height:500px;17 margin:080px;18 text-align:center;19 line-height:500px;技能訓(xùn)練4-16漸變屬性4.5漸變20 font-size:30px;21 color:#fff;22 border-radius:20px;23 }24 .yhlj{25 background:linear-gradient(tobottom,#f78c9a,#ec3c53);26 }27 .khsw{28 background:radial-gradient(circle,#105abe,#93bcf3);29 }30 .cylj{31 background:repeating-linear-gradient(45deg,#0c9b4b,#ffffff10px);32 }33 .qtlj{34 background:repeating-radial-gradient(circle,#282f3a80px,#93989e);3536 }37 </style>38 </head>39 <body>40 <h1>垃圾分類</h1>41 <divclass="content">42 <divclass="boxyhlj">有害垃圾</div>技能訓(xùn)練4-16漸變屬性4.5漸變3、運(yùn)行效果43 <divclass="boxkhsw">可回收物</div>44 <divclass="boxcylj">廚余垃圾</div>45 <divclass="boxqtlj">其他垃圾</div>46 </div>47 </body>48</html>3、運(yùn)行效果4.6CSS3變形1、text-shadow（文字陰影），語法格式如下：text-shadow:h-shadowv-shadowblurcolor;

CSS3變形指的是利用transform屬性對(duì)元素進(jìn)行旋轉(zhuǎn)、扭曲、縮放、位移、矩陣、原點(diǎn)等類型的變形處理；

元素的變形操作需要配合使用rotate()、skew()、scale()、translate()、matrix()等函數(shù)來實(shí)現(xiàn)。在CSS3中，可以利用transform功能來實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)、扭曲、縮放、位移、矩陣這五種類型的變形處理。·語法：

transform：none|<transform-function>[<transform-function>]*

也就是：

transform:rotate|scale|skew|translate|matrix;4.6.1旋轉(zhuǎn)

·

語法：

transform:rotate(<angle>)

angle值為正數(shù)表示順時(shí)針旋轉(zhuǎn)，如果設(shè)置的值為負(fù)數(shù)，則表示逆時(shí)針旋轉(zhuǎn)。4.6.2

平移

·translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)（也就是X軸和Y軸同時(shí)移動(dòng)）；

·translateX(x)僅水平方向移動(dòng)（X軸移動(dòng)）；

·translateY(Y)僅垂直方向移動(dòng)（Y軸移動(dòng)）技能訓(xùn)練4-17旋轉(zhuǎn)屬性4.6CSS3變形【方法步驟】1、在項(xiàng)目chapter4，新建html文件，命名為ex4-17.html2、編寫代碼1<!--css3變形-->2<!DOCTYPEhtml>3<html>4 <head>5 <metacharset="UTF-8">6 <title>變形--旋轉(zhuǎn)</title>7 <styletype="text/css">8 h1{9 text-align:center;10 }11 .content{12 display:flex;13 }14 .box{15 width:300px;16 height:500px;17 margin:080px;18 text-align:center;19 font-size:30px;技能訓(xùn)練4-17旋轉(zhuǎn)屬性4.6CSS3變形20 color:#fff;21 border-radius:20px;22 line-height:200px;23 }24 .yhlj{background-color:#ec3c53;}25 .khsw{background-color:#2a77c5;}26 .cylj{background-color:#0e6046;}27 .qtlj{background-color:#161a2d;}28 .box1:hover{29 transform:rotate(30deg);/*順時(shí)針旋轉(zhuǎn)30度*/30 }31 .box2:hover{32 transform:rotate(270deg);/*順時(shí)針旋轉(zhuǎn)270度*/ 33 }34 .box3:hover{35 transform:rotate(-30deg);/*逆時(shí)針旋轉(zhuǎn)30度*/36 }37 .box4:hover{38 transform:rotate(-180deg);/*逆時(shí)針旋轉(zhuǎn)30度*/39 }40 41 </style>42 </head>43 <body>技能訓(xùn)練4-17旋轉(zhuǎn)屬性4.6CSS3變形44 <h1>垃圾分類</h1>45 <divclass="content">46 <divclass="boxyhlj">47 有害垃圾48 <divclass="box1">49 <imgsrc="image/icon1.png"/>50 </div>51 </div>52 <divclass="boxkhsw">53 可回收物54 <divclass="box2">55 <imgsrc="image/icon2.png"/>56 </div>57 </div>58 <divclass="boxcylj">59 廚余垃圾60 <divclass="box3">61 <imgsrc="image/icon3.png"/>62 </div>63 </div>64 <divclass="boxqtlj">65 其他垃圾66 <divclass="box4">67 <imgsrc="image/icon4.png"/>技能訓(xùn)練4-6-1旋轉(zhuǎn)屬性6.CSS3變形68 </div>69 </div>70 </div>71 </body>72</html>3、運(yùn)行效果：鼠標(biāo)經(jīng)過后的旋轉(zhuǎn)效果技能訓(xùn)練4-18平移屬性4.6CSS3變形【方法步驟】1、在項(xiàng)目chapter4，新建html文件，命名為ex4-18.html2、編寫代碼1<!--css3變形-->2<!DOCTYPEhtml>3<html>4 <head>5 <metacharset="UTF-8">6 <title>變形--平移</title>7 <styletype="text/css">8 h1{9 text-align:center;10 }11 .icon{12 margin:10pxauto;13 width:700px;14 height:170px;15 padding:20px;16 border:1pxsolid#2a77c5;17 }18 .box1,.box2,.box3,.box4{19 display:inline-block;技能訓(xùn)練4-6-2平移屬性6.CSS3變形20 margin:010px;21 }22 .content{23 display:flex;24 margin-top:20px;25 }26 .box{27 width:300px;28 height:500px;29 margin:080px;30 text-align:center;31 font-size:30px;32 color:#fff;33 border-radius:20px;34 line-height:200px;35 }36 .yhlj{background-color:#ec3c53;}37 .khsw{background-color:#2a77c5;}38 .cylj{background-color:#0e6046;}39 .qtlj{background-color:#161a2d;}4041 .box1:hover{42 transform:translateY(380px);

技能訓(xùn)練4-18平移屬性4.6CSS3變形43 }44 45 .box2:hover{46 transform:translate(280px,380px);47 48 }49 50 .box3:hover{51 transform:translate(-810px,380px);52 53 }54 55 .box4:hover{56 transform:translate(400px,380px);57 58 }59 </style>60 61 </head>62 <body>63 <h1>垃圾分類</h1>64 <divclass="icon">65 <divclass="box1">技能訓(xùn)練4-18平移屬性4.6CSS3變形66 <imgsrc="image/icon1.png"/>67 </div>68 <divclass="box2">69 <imgsrc="image/icon2.png"/>70 </div>71 <divclass="box3">72 <imgsrc="image/icon3.png"/>73 </div>74 <divclass="box4">75 <imgsrc="image/icon4.png"/>76 </div>77 </div>78 <divclass="content">79 <divclass="boxyhlj">有害垃圾</div>80 <divclass="boxkhsw">可回收物</div>81 <divclass="boxcylj">廚余垃圾</div>82 <divclass="boxqtlj">其他垃圾</div>83 </div>84 </body>85</html>技能訓(xùn)練4-18平移屬性4.6CSS3變形3、運(yùn)行結(jié)果：4.6CSS3變形1、text-shadow（文字陰影），語法格式如下：text-shadow:h-shadowv-shadowblurcolor;

縮放scale和移動(dòng)translate是極其相似，scale(x,y)使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放）；scaleX(x)元素僅水平方向縮放（X軸縮放）；scaleY(y)元素僅垂直方向縮放（Y軸縮放），但它們具有相同的縮放中心點(diǎn)和基數(shù)，其中心點(diǎn)就是元素的中心位置，縮放基數(shù)為1，如果其值大于1元素就放大，反之其值小于1，元素縮小。4.6.3縮放技能訓(xùn)練4-19縮放屬性4.6CSS3變形【方法步驟】1、在項(xiàng)目chapter4，新建html文件，命名為ex4-19.html2、編寫代碼1<!--css3變形-->2<!DOCTYPEhtml>3<html>4 <head>5 <metacharset="UTF-8">6 <title>變形--縮放</title>7 <styletype="text/css">8 h1{9 text-align:center;10 }11 .content{12 display:flex;13 }14 .box{15 width:300px;16 height:500px;17 margin:080px;18 text-align:center;19 font-size:30px;技能訓(xùn)練4-6-3縮放屬性6.CSS3變形20 color:#fff;21 border-radius:20px;22 line-height:200px;23 }24 .yhlj{background-color:#ec3c53;}25 .khsw{background-color:#2a77c5;}26 .cylj{background-color:#0e6046;}27 .qtlj{background-color:#161a2d;}28 .box1:hover{29 transform:scale(2,2);30 }31 .box2:hover{32 transform:scale(0.5,0.5); 33 }34 .box3:hover{35 transform:scaleX(2);36 /*transform:scale(2,0);*/ 37 }38 .box4:hover{39 transform:scaleY(2);40 /*transform:scale(0,2);*/ 41 }42 技能訓(xùn)練4-6-3縮放屬性6.CSS3變形43 </style>44 </head>45 <body>46 <h1>垃圾分類</h1>47 <divclass="content">48 <divclass="boxyhlj">49 有害垃圾50 <divclass="box1">51 <imgsrc="image/icon1.png"/>52 </div>53 </div>54 <divclass="boxkhsw">55 可回收物56 <divclass="box2">57 <imgsrc="image/icon2.png"/>58 </div>59 </div>60 <divclass="boxcylj">61 廚余垃圾62 <divclass="box3">63 <imgsrc="image/icon3.png"/>64 </div>65 </div>66 <divclass="boxqtlj">技能訓(xùn)練4-19縮放屬性4.6CSS3變形67 其他垃圾68 <divclass="box4">69 <imgsrc="image/icon4.png"/>70 </div>71 </div>72 </div>73 </body>74 </html>3、運(yùn)行效果：4.6

CSS3變形1、text-shadow（文字陰影），語法格式如下：text-shadow:h-shadowv-shadowblurcolor;

傾斜skew和translate、scale一樣同樣具有三種情況：skew(x,y)使元素在水平和垂直方向同時(shí)扭曲（X軸和Y軸同時(shí)按一定的角度值進(jìn)行扭曲變形）；skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）。4.6.4傾斜技能訓(xùn)練4-20傾斜屬性4.6CSS3變形【方法步驟】1、在項(xiàng)目chapter4，新建html文件，命名為ex4-20.html2、編寫代碼1<!--css3變形-->2<!DOCTYPEhtml>3<html>4 <head>5 <metacharset="UTF-8">6 <title>變形--傾斜</title>7 <styletype="text/css">8 h1{9 text-align:center;10 }1112 .content{13 display:flex;14 }1516 .box{17 width:300px;18 height:500px;19 margin:080px; 技能訓(xùn)練4-20傾斜屬性4.6CSS3變形20 text-align:center;21 font-size:30px;22 color:#fff;23 border-radius:20px;24 line-height:200px;25 }2627 .yhlj{28 background-color:#ec3c53;29 }3031 .khsw{32 background-color:#2a77c5;33 }3435 .cylj{36 background-color:#0e6046;37 }3839 .qtlj{40 background-color:#161a2d;41 }42技能訓(xùn)練4-20傾斜屬性4.6CSS3變形43 .box1:hover{44 transform:skew(20deg,40deg);45 }4647 .box2:hover{48 transform:skew(60deg);49 /*skew只設(shè)置一個(gè)值表示x軸向左傾斜60度只對(duì)x軸有效*/50 }5152 .box3:hover{53 transform:skewX(20deg);54 }5556 .box4:hover{57 transform:skewY(40deg);58 }59 </style>60 </head>61 <body>62 <h1>垃圾分類</h1>63 <divclass="content">64 <divclass="boxyhlj">技能訓(xùn)練4-20傾斜屬性4.6CSS3變形65 有害垃圾66 <divclass="box1">67 <imgsrc="image/icon1.png"/>68 </div>69 </div>70 <divclass="boxkhsw">71 可回收物72 <divclass="box2">73 <imgsrc="image/icon2.png"/>74 </div>75 </div>76 <divclass="boxcylj">77 廚余垃圾78 <divclass="box3">79 <imgsrc="image/icon3.png"/>80 </div>81 </div>82 <divclass="boxqtlj">83 其他垃圾84 <divclass="box4">85 <imgsrc="image/icon4.png"/>86 </div>87 </div>88 </div>89 </body>90</html>技能訓(xùn)練4-20傾斜屬性4.6CSS3變形3、運(yùn)行結(jié)果：4.7CSS3過渡1、text-shadow（文字陰影），語法格式如下：text-shadow:h-shadowv-shadowblurcolor;

transition的過渡就是平滑地改變一個(gè)元素的css值，使元素從一個(gè)樣式逐漸過渡到另一個(gè)樣式，是一種動(dòng)畫轉(zhuǎn)換的過程，如漸現(xiàn)、漸弱、動(dòng)畫快慢等。（1）transition-property指定元素中一個(gè)屬性改變時(shí)執(zhí)行transition效果語法：transition:[transition-propertytransition-durationtransition-timing-functiontransition-delay]屬性值含義al所有none沒有屬性property定文應(yīng)用過渡效果的CSS屬性名稱列表，列表以過號(hào)分隔。7.CSS3過渡1、text-shadow（文字陰影），語法格式如下：text-shadow:h-sh

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論