【正文】 iv的統(tǒng)一樣式：寬高各100px，1像素的紅色邊框，黃色背景色3) 第一個正方形旋轉(zhuǎn)90度，得到第二個正方形4) 代碼如下：Html代碼：body div文本/div br/br/ div class=trans文本/div/bodyCss代碼：div{ width:100px。 效果同上面整合后的代碼*/}adv:hover{/*結(jié)束樣式*/ top:0。 transitiontimingfunction:linear。/*transitionproperty:top,backgroundcolor。 backgroundcolor:pink。 position:absolute。1. 項目1及執(zhí)行步驟圖1圖2實現(xiàn)圖1到圖2的過渡1） 在頁面中插入一對div/div元素2） 在樣式表中定義div樣式：寬400px，高200px，背景色粉色，定位top 160px3） 勻速過渡到背景色為藍色，時間4S，延遲兩秒4） 位置勻速過渡到top為0，時間4s5） 當(dāng)鼠標(biāo)懸停時觸發(fā)6） 代碼如下：Html代碼：div id=adv/divCss代碼：adv{/*開始樣式*/ width:400px。 瀏覽器兼容性1） 解決兼容性問題：chrome和Safari需要前綴 webkit Firefox需要前綴 moz Opera需要前綴 o IE需要前綴 ms2） 定義關(guān)鍵幀 keyframes 兼容性語法：keyframes name{from/0%{開始樣式}n%{當(dāng)動畫進度播放到n%時的樣式}...to/100%{結(jié)束樣式}}3) 觸發(fā)動畫animation:動畫名 持續(xù)時間 速速類型 延遲時間。備選值：ease 默認(rèn)值，先加速后減速 Linear 勻速變化 easein 加速 easeout 減速 easeinout 先加速，后減速4專門用于設(shè)置過渡的延遲開始時間 一般不設(shè)置transitiondelay:n1s,n2s,...。2專門用于設(shè)置過渡的持續(xù)時間transitionduration:n1s,n2s,...。}d1:hover{background:red。 延x軸，y軸同時傾斜③x軸方向：正角度向左傾斜，負(fù)角度向右傾斜 Y軸方向：正角度左側(cè)向上傾斜，負(fù)角度左側(cè)向下傾斜4. 掌握過渡屬性1） 定義：從開始樣式，經(jīng)過指定時間，緩慢過渡到結(jié)束樣式2） transition:要變化的屬性 持續(xù)時間 速度變化類型 延遲時間。 了解4） 傾斜 skew①定義：延坐標(biāo)軸方向，傾斜指定角度②語法：transform:skew(n deg)。③x軸右為正，左為負(fù)；y軸下為正，上為負(fù)④位移不會影響其他元素的布局位置，可能會蓋住周圍元素3） 縮放 scale①定義：指定坐標(biāo)軸上的坐標(biāo)縮放指定倍數(shù)②語法：transform:scale(倍數(shù))。n：度數(shù) deg：單位如：transform:rotate(90 deg)。}第四單元 CSS3高級 轉(zhuǎn)換 轉(zhuǎn)換簡介 什么是轉(zhuǎn)換 轉(zhuǎn)換屬性 轉(zhuǎn)換的原點 2D轉(zhuǎn)換 2D位移 2D縮放 2D旋轉(zhuǎn) 2D傾斜 過渡 過渡概述 什么是過渡 過渡示例 觸發(fā)過渡 過渡子屬性 過渡屬性transitionproperty 過渡時間transitionduration 過渡函數(shù)transitiontimingfunction 過渡延遲transitiondelay 動畫 動畫概述 什么是動畫 動畫示例 關(guān)鍵幀 keyframes的作用 keyframes的語法 動畫屬性 動畫子屬性 animation屬性 動畫與過渡【考核要求】1. 掌握轉(zhuǎn)換(變形) transform1） 轉(zhuǎn)換是使元素改變形狀、尺寸和位置的一種效果2） 2D轉(zhuǎn)換使元素在X軸和Y軸平面上發(fā)生變化3） 參照原點 transformorigin:。 height:20px。}P:lastchild{ color:red。}p[id=p2]{ color:red。} hack1）為解決瀏覽器兼容性問題，為特定瀏覽器專門定義的css代碼2）重點解決舊版本瀏覽器兼容性問題3）css hack的原理①css類內(nèi)部hack 在css樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴如：* + _ 等②選擇器hack③html頭部引用hack1）標(biāo)準(zhǔn)模式：，只要符合標(biāo)準(zhǔn)的網(wǎng)頁，在不同瀏覽器顯示效果應(yīng)該是一致的2）混雜模式：按照瀏覽器自帶的規(guī)則解析網(wǎng)頁，沒有標(biāo)準(zhǔn)可循，同一網(wǎng)頁在不同瀏覽器顯示效果可能不一致解決辦法：聲明DOCTYPE運用屬性選擇器，實現(xiàn)以上效果1） 在頁面插入一個h1元素和兩個p元素2） 給h1元素添加title屬性和id屬性3） 給兩個p元素添加id屬性4） 在樣式表中給h1添加黃色背景5） 在樣式表中給兩個p元素添加邊框6） 在樣式表中修改段落2的文字為紅色7） 代碼如下：Html代碼： body h1 title=h1元素 id=h1h1 text/h1 p id=p1段落一/p p id=p2段落2/p /bodyCss代碼：[title]{ backgroundcolor:yellow。 columngap:45px。 border:1px solid black。4） 例如：Html代碼：div大量文本...(大量文本略)/divCss代碼：div{ width:400px。3） 列規(guī)則 columnrule:。2） 列間隔 columngap:。}第三單元：CSS3基礎(chǔ) 復(fù)雜選擇器 兄弟選擇器 相鄰兄弟選擇器 通用兄弟 屬性選擇器 偽類選擇器 目標(biāo)偽類 結(jié)構(gòu)偽類 否定偽類 偽元素選擇器 偽元素：firstletter 偽元素：firsline 偽元素：：selection 多列屬性 分隔列 列間隔 列規(guī)則 CSS Hack 標(biāo)準(zhǔn)模式和混雜模式 什么是css hack css hack的原理 css類內(nèi)部hack【考核要求】 1） 兄弟選擇器2） 屬性選擇器3） 偽類選擇器4） 偽元素選擇器2. 掌握兄弟選擇器 選擇當(dāng)前元素，平級元素的唯一方式1） 相鄰兄弟選擇器 + 選擇器1 + 選擇器2 選擇緊接在另一個元素后的一個元素(平級、一個、相鄰之后)2） 通用兄弟選擇器 ~ 選擇器1 ~ 選擇器2 選擇之后所有符合條件的平級元素(平級、之后所有)3. 掌握屬性選擇器 自定義選擇器條件1） [屬性名] 選擇包含指定屬性名的所有元素如：[title] 選擇網(wǎng)頁中所有包含title屬性的元素缺點：范圍比較泛2） 其他屬性值[屬性名] 選擇網(wǎng)頁中所有包含指定屬性名的指定屬性值如：img[title] 選擇網(wǎng)頁中所有包含title的img元素3） 自定義條件(4)語法：其他選擇器[條件]①精確條件：[屬性名=”屬性值”] 選擇包含指定屬性，且屬性值等于指定屬性值得元素如：p[id=”logo”] 選擇包含id屬性的p元素，其中id屬性的值為logo②模糊條件：[屬性名^=”關(guān)鍵字”] 選擇包含指定屬性，且屬性值必須以關(guān)鍵字開頭如：p[class^=”b”] 選擇class屬性值以b開頭的所有p元素③模糊條件：[屬性名$=”關(guān)鍵字”] 選擇包含指定屬性，且屬性值必須以關(guān)鍵字結(jié)尾如：p[class$=”b”] 選擇class屬性值以b結(jié)尾的所有p元素④模糊條件：[屬性名*=”關(guān)鍵字”] 選擇包含關(guān)鍵字的指定屬性值如：p[class*=”b”] 選擇class屬性值中包含字串b的所有p元素1） 目標(biāo)偽類 ：target ①選取當(dāng)前正在被跳轉(zhuǎn)到的錨點元素②一次只可能選中一個元素③唯一一個可以觸發(fā)其他元素樣式變化的偽類2） 結(jié)構(gòu)偽類 選擇處在特殊位置上的子元素①:firstchild 匹配其父元素的首個子元素 寫在子元素上②:lastchild 匹配其父元素的最后一個子元素 寫在子元素上③:onlychild 匹配其父元素唯一子元素 寫在子元素上④:empty 匹配沒有子元素的每個元素，必須為空，空格也不行 寫在父元素上3）否定偽類 ：not( ) 匹配非指定元素的每個元素1） :firstletter 用于選取指定選擇器的首字母2） :firstline 用于選取指定選擇器的首行3） ::selection 選擇器匹配被用戶選取的部分 了解 僅IE和opera支持 不考核1） 分隔列 columncount:。 border:5px FF0000 solid。}: 1) 向網(wǎng)頁中插入標(biāo)簽div/div2) 在頭部插入style/style標(biāo)簽3) 設(shè)置div的尺寸屬性：寬200像素，高100像素4) 利用border復(fù)合屬性設(shè)置div的四周的5px、紅色的實線邊框5) 將下邊框borderbottom改寫為：3px、綠色的虛線(dashed)邊框6) 代碼為：Html代碼：div/div Css代碼：div{ width:200px。} .yellow{ color:ffb800。 color:1269eb。4）使用left和right設(shè)置水平方向的偏移量；使用top和bottom設(shè)置垂直方向的偏移量1) 在網(wǎng)頁中輸入段落標(biāo)簽p/p，在其中輸入6對span/span標(biāo)簽2) 在span標(biāo)簽內(nèi)部分別輸入字母：G、o、o、l、e3) 設(shè)置p標(biāo)簽樣式：字號130px、字體Times New Roman、文字顏色屬性4) .yellow .green5) 給相應(yīng)的span標(biāo)簽應(yīng)用相應(yīng)的類選擇器6) 代碼為：Html代碼：pspanG/spanspan class=redo/spanspan class=yellowo/spanspang/spanspan class=greenl/spanspan class=rede/span/pcss代碼： p{fontsize:130px。4） 使用left和right設(shè)置水平方向的偏移量；使用top和bottom設(shè)置垂直方向的偏移量 zindex1）值為數(shù)值2）數(shù)值越大表示堆疊順序更高，即離用戶更近3）可以設(shè)置為負(fù)值，表示離用戶更遠4）如： zindex:999。left:20px。4） 使用left和right設(shè)置水平方向的偏移量；使用top和bottom設(shè)置垂直方向的偏移量5） 如：position:relative。 右?。?float:right。 上 右 下 左如：padding:10px 20px 30px 40px。 上下 左右③padding:value value value。4）內(nèi)邊距簡寫方式①padding:value。18. 掌握內(nèi)邊距 padding1） 內(nèi)容區(qū)域和邊框之間的空間就是內(nèi)邊距2） 內(nèi)邊距會擴大元素邊框所占用的區(qū)域3） 單邊設(shè)置paddingtop/paddingbottom/paddingleft/paddingright如：paddingtop:10px。 上 右 下 左如：margin:10px 20px 30px 40px。 上下 左右③margin:value value value。5) 外邊距簡寫方式①margin:value。}14. 掌握子代選擇器1） 子代選擇器要求選擇器之間只能存在父子關(guān)系2） 使用大于號()連接3）15. 掌握偽類選擇器1） 使用冒號(:)連接，冒號左邊是其他選擇器，右邊是偽類2） 選擇器:偽類選擇器 3）分類： ①動態(tài)偽類:hover 適用于鼠標(biāo)懸停時 總尺寸=外邊距+邊框+