Web前端技術(shù)課件-4.CSS3層疊樣式表進(jìn)階_第1頁(yè)
Web前端技術(shù)課件-4.CSS3層疊樣式表進(jìn)階_第2頁(yè)
Web前端技術(shù)課件-4.CSS3層疊樣式表進(jìn)階_第3頁(yè)
Web前端技術(shù)課件-4.CSS3層疊樣式表進(jìn)階_第4頁(yè)
Web前端技術(shù)課件-4.CSS3層疊樣式表進(jìn)階_第5頁(yè)
已閱讀5頁(yè)，還剩67頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

CSS3層疊樣式表進(jìn)階學(xué)習(xí)導(dǎo)圖4.1CSS3新增選擇器4.1CSS3新增選擇器新增偽類(lèi)選擇器4.1CSS3新增選擇器E:not()用于匹配除not()中選擇的元素外的所有元素。4.1CSS3新增選擇器E:target用來(lái)匹配錨點(diǎn)#指向的文檔中的具體元素，即URL后面跟錨點(diǎn)#，指向文檔內(nèi)某個(gè)具體的元素，那么該元素就會(huì)觸發(fā)target。4.1CSS3新增選擇器E:first-child表示選擇父元素下的第一個(gè)子元素，E:last-child表示選擇父元素下最后一個(gè)子元素。4.1CSS3新增選擇器E:nth-child(n)表示選擇父元素下面的第n個(gè)子元素，注意在CSS中n從1開(kāi)始，且n可以是表達(dá)式。E:nth-last-child(n)表示從父元素最后一個(gè)元素開(kāi)始計(jì)數(shù)，反向選擇。4.1CSS3新增選擇器E:only-child表示如果父元素下僅有一個(gè)元素，那么該元素被選中。4.1CSS3新增選擇器E:first-of-type,E:last-of-type,E:only-of-type,E:nth-of-type(n),E:nth-of-last-type(n)，只考慮樣式中定義的子元素類(lèi)型，不會(huì)受到其他元素的影響。4.1CSS3新增選擇器E:empty表示選擇沒(méi)有任何子元素的父元素。4.1CSS3新增選擇器E:checked匹配用戶界面上處于選中狀態(tài)的元素E，該選擇器主要用于檢測(cè)表單中單選框或復(fù)選框是否為選中狀態(tài)。4.2CSS3新增盒子屬性4.2.1圓角邊框?qū)傩詧A角邊框?qū)傩詁order-radius<style>#rcorner{border-radius:25px;border:2pxsolid#333333;padding:20px;width:200px;height:150px;}</style><body><pid="rcorner">圓角</p></body>僅設(shè)置一個(gè)屬性值當(dāng)僅設(shè)置一個(gè)屬性值時(shí)，邊框的四個(gè)角具有相同的大小，如果希望單獨(dú)設(shè)置四個(gè)角的圓角效果，可以使用border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius屬性設(shè)置圓角值。設(shè)置不同個(gè)數(shù)的屬性值4.2.1圓角邊框?qū)傩栽O(shè)置橢圓邊框效果第一個(gè)數(shù)值表示水平半徑，第二個(gè)數(shù)值表示垂直半徑4.2.1圓角邊框?qū)傩詧D片的圓角效果4.2.1圓角邊框?qū)傩?.2.2邊框圖片屬性CSS3中提供了border-image屬性，該屬性使用圖像填充盒子的邊框。第一個(gè)參數(shù)是border-image-source，表示背景圖像的url地址；第二個(gè)參數(shù)是border-image-slice，表示圖片剪裁位置；圖片裁剪九宮格表示距離圖片上部30%、距離右邊35%、距離底部40%、左邊30%的地方各剪裁一下，形成了九個(gè)分離的區(qū)域。border-image:url(border.png)30%35%40%30%repeatborder-image:url(border.png)27repeat第三個(gè)參數(shù)是border-image-repeat，即邊框圖片的重復(fù)性，可取值repeat（重復(fù)）、round（平鋪）、Stretch（拉伸），其中Stretch是默認(rèn)值。border-image:url(border.png)27border-image:url(border.png)27repeatborder-image:url(border.png)27roundrepeat4.2.2邊框圖片屬性原始圖像81*81border-image:url(border.png)27stretchborder-image:url(border.png)27round4.2.2邊框圖片屬性4.2.3盒子陰影屬性box-shadow屬性用來(lái)定義盒子陰影效果box-shadow:

offset-xoffset-yblurspreadcolor

inset4.2.3盒子陰影屬性紙質(zhì)樣式卡片效果4.2.3盒子陰影屬性圖片卡片陰影效果4.2.3盒子陰影屬性4.2.4盒子背景屬性background-image屬性，將多張圖片同時(shí)設(shè)置為背景，不同背景圖片用逗號(hào)隔開(kāi)background-size指定背景圖像的大小。CSS3以前，背景圖像大小是由圖像的實(shí)際大小決定。background-size:auto|<長(zhǎng)度值>|<百分比>|cover|containauto，默認(rèn)值，不改變背景圖片的原始高度和寬度<長(zhǎng)度值>，成對(duì)出現(xiàn)，例如80px60px<百分比>，例如100%100%Cover，覆蓋，背景圖片等比縮放以填滿整個(gè)容器Contain，容納，背景圖片等比縮放至某一邊緊貼容器邊緣4.2.4盒子背景屬性background-origin屬性指定了背景圖像的起始區(qū)域。background-origin:border-box|padding-box|content-box當(dāng)background-attachment屬性設(shè)置為fixed時(shí)，background-origin屬性會(huì)失效。4.2.4盒子背景屬性4.2.4盒子背景屬性4.3CSS3漸變屬性4.3CSS3漸變屬性漸變（Gradients）效果提供了在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過(guò)渡。CSS3定義了三種類(lèi)型的漸變：一種是線性漸變（LinearGradients），根據(jù)漸變方向的不同，又分為向下、向上、向左、向右、對(duì)角等不同方向的線性漸變；第二種漸變是徑向漸變（RadialGradients），由具有不同半徑的圓的中心進(jìn)行定義；第三種類(lèi)型為重復(fù)漸變，是由單個(gè)漸變重復(fù)而成。由于不同瀏覽器廠商在實(shí)現(xiàn)漸變標(biāo)準(zhǔn)時(shí)，對(duì)于漸變方向的定義、角度的定義以及順時(shí)針還是逆時(shí)針有所不同，所以在使用漸變時(shí)需要添加瀏覽器前綴。例如，對(duì)于Chrome、Safari瀏覽器，前綴為-webkit-，而火狐瀏覽器Firefox的前綴為-moz-，Opera瀏覽器的前綴為-o-。4.3.1線性漸變線性漸變background:linear-gradient(direction,color-stop1,color-stop2,...);指定線性漸變的方向（左右，對(duì)角線）4.3.1線性漸變指定線性漸變的方向（指定角度）4.3.1線性漸變多個(gè)顏色過(guò)渡節(jié)點(diǎn)的線性漸變4.3.1線性漸變精確控制顏色過(guò)渡的位置4.3.1線性漸變帶透明度顏色過(guò)渡的線性漸變4.3.1線性漸變重復(fù)線性漸變（repeating-linear-gradient）background:repeating-linear-gradient(black,gray10%,white15%);黑色漸變到灰色從高度的0%至10%，灰色漸變到白色從高度的10%至15%，然后重復(fù)這一漸變4.3.2重復(fù)線性漸變徑向漸變background:radial-gradient(shape[size]atpostion,start-color,...,last-color);shape漸變形狀，取值circle（圓形）或ellipse（橢圓形），形狀可以搭配attop，atcenter或atbottom等位置使用，例如radial-gradient(circleatcenter,#f00,#ff0,#080);，也可以使用%或px指定中心點(diǎn)位置，例如radial-gradient(circleat50%,#f00,#ff0,#080);。4.3.3徑向漸變徑向漸變background:radial-gradient(shape[size]atpostion,start-color,...,last-color);size是可選值，表示邊緣輪廓的位置，可取值分別為closest-side，表示漸變的半徑長(zhǎng)度為從圓心到離圓心最近的邊；closest-corner，表示漸變的半徑長(zhǎng)度為從圓心到離圓心最近的角；farthest-side，表示漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的邊；farthest-corner，表示漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的角。例如radial-gradient(circlefarthest-corner,#f00,#ff0,#080);也可以配合at使用，例如radial-gradient(circlefarthest-cornerat30px30px,#f00,#ff0);。4.3.3徑向漸變顏色結(jié)點(diǎn)均勻分布的徑向漸變顏色結(jié)點(diǎn)不均勻分布的徑向漸變4.3.3徑向漸變重復(fù)徑向漸變用于創(chuàng)建重復(fù)的徑向漸變圖像background:repeating-radial-gradient(shape[size]atposition,start-color,...,last-color);background:repeating-radial-gradient(black,white10%,gray15%);4.3.4重復(fù)徑向漸變4.4字體與文本屬性4.4.1使用字體使用@font-face加載特定的字體，@font-face語(yǔ)句是CSS中的一個(gè)功能模塊，是為了解決由于瀏覽者系統(tǒng)中沒(méi)有安裝字體導(dǎo)致不能顯示的問(wèn)題，用于實(shí)現(xiàn)網(wǎng)頁(yè)字體多樣性。font-family的作用是聲明字體變量;src屬性定義字體的下載地址，local表示本機(jī)地址，url表示網(wǎng)址，當(dāng)網(wǎng)頁(yè)加載時(shí)會(huì)自動(dòng)從服務(wù)器上下載字體文件再顯示出來(lái)。4.4.2本文陰影文本陰影text-shadow:h-shadowv-shadowblurcolorh-shadow和v-shadow是必填項(xiàng)，分別表示垂直和水平陰影，允許為負(fù)值；blur為選填項(xiàng)，表示模糊的距離；color為選填項(xiàng)，表示陰影顏色。4.4.3文本溢出處理文本溢出處理text-overflow指定應(yīng)向用戶如何顯示溢出內(nèi)容text-overflow:clip|ellipsis|string4.5CSS32D/3D變換4.5.1平移變換translate(x,y)方法，從當(dāng)前元素位置沿X軸和Y軸移動(dòng)相應(yīng)的位移量transform:translateX(x)transform:translateY(y)translate3d(x,y,z)，實(shí)現(xiàn)元素在三維空間的平移變換。translateZ(z)4.5.1平移變換rotate(angle)用來(lái)在二維空間中將元素對(duì)象相對(duì)中心原點(diǎn)進(jìn)行旋轉(zhuǎn)，給定度數(shù)為正值為順時(shí)針旋轉(zhuǎn)，負(fù)值為逆時(shí)針旋轉(zhuǎn)4.5.2旋轉(zhuǎn)變換默認(rèn)是圍繞元素的中心點(diǎn)旋轉(zhuǎn)，也可以使用transform-origin屬性設(shè)置旋轉(zhuǎn)中心點(diǎn)，例如transform-origin:00，使元素的旋轉(zhuǎn)中心點(diǎn)為左上角。4.5.2旋轉(zhuǎn)變換scale(x,y),scaleX(x),scaleY(y)方法，將元素根據(jù)中心原點(diǎn)進(jìn)行縮放，參數(shù)可以是正數(shù)、負(fù)數(shù)或小數(shù)，默認(rèn)值為1，取正數(shù)表示放大相應(yīng)的倍數(shù)，取小于1的小數(shù)值表示縮小相應(yīng)的倍數(shù)，取負(fù)數(shù)值不會(huì)縮小元素，而是翻轉(zhuǎn)元素。4.5.3縮放變換skew(angle[,angle])方法用來(lái)實(shí)現(xiàn)元素對(duì)象的傾斜顯示。兩個(gè)參數(shù)值分別表示元素在X軸和Y軸方向上傾斜的角度，如果第二個(gè)參數(shù)為空，則默認(rèn)為0；參數(shù)取正值，表示元素沿水平或垂直方向，按順時(shí)針傾斜，否則如果取負(fù)值，表示元素按逆時(shí)針?lè)较騼A斜。4.5.4傾斜變換CSS32D/3D變換

skewX效果perspective屬性：定義元素距離視圖（人眼）的距離，以像素為單位。當(dāng)元素定義perspective屬性時(shí)，其子元素會(huì)獲得透視效果，而不是元素本身。Z=0，所以此時(shí)投影在屏幕上的圖像尺寸和原始圖片大小一樣過(guò)translateZ增大Z的值，即圖片向視點(diǎn)靠近，此時(shí)視距減小，投影到屏幕上的圖像變大了。4.5.5perspective屬性帶perspective屬性的旋轉(zhuǎn)效果4.5.5perspective屬性圖片旋轉(zhuǎn)應(yīng)用案例4.5.6變換應(yīng)用案例4.6CSS3過(guò)渡與動(dòng)畫(huà)效果4.6.1過(guò)渡效果過(guò)渡transition是元素從一種樣式逐漸改變?yōu)榱硪环N的效果transition:pro

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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)論