Web前端開發(fā)任務(wù)驅(qū)動式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務(wù)9、10 復(fù)合選擇器和通配符選擇器、盒子模型及應(yīng)用_第1頁
Web前端開發(fā)任務(wù)驅(qū)動式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務(wù)9、10 復(fù)合選擇器和通配符選擇器、盒子模型及應(yīng)用_第2頁
Web前端開發(fā)任務(wù)驅(qū)動式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務(wù)9、10 復(fù)合選擇器和通配符選擇器、盒子模型及應(yīng)用_第3頁
Web前端開發(fā)任務(wù)驅(qū)動式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務(wù)9、10 復(fù)合選擇器和通配符選擇器、盒子模型及應(yīng)用_第4頁
Web前端開發(fā)任務(wù)驅(qū)動式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務(wù)9、10 復(fù)合選擇器和通配符選擇器、盒子模型及應(yīng)用_第5頁
已閱讀5頁，還剩49頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

任務(wù)9復(fù)合選擇器、通配符選擇器第四單元CSS3基礎(chǔ)學(xué)習(xí)目標(biāo)通配符選擇器交集選擇器并集選擇器后代選擇器掌握如何同時應(yīng)用多個樣式了解:學(xué)習(xí)目標(biāo)知識回顧CSS樣式的優(yōu)先級優(yōu)先級關(guān)系：行內(nèi)樣式>內(nèi)嵌樣式>鏈接樣式100010010>行內(nèi)樣式id選擇器類選擇器偽類選擇器>10>標(biāo)記選擇器偽元素選擇器通配符子選擇器相鄰選擇器繼承樣式>復(fù)合選擇器權(quán)重為基礎(chǔ)選擇器權(quán)重的疊加任務(wù)目標(biāo)實戰(zhàn)演練——制作寓言故事網(wǎng)頁任務(wù)目標(biāo)強化訓(xùn)練——制作詩詞欣賞網(wǎng)站知識準(zhǔn)備1.復(fù)合選擇器交集選擇器：由兩個選擇器直接連接構(gòu)成，其結(jié)果是選中二者各自元素范圍的交集。第1個必須是標(biāo)記選擇器，第2個必須是類選擇器或ID選擇器。兩個選擇器之間不能有空格，必須連續(xù)書寫。<pid="red">這個段落是紅色。</p><pclass="green">這個段落是綠色。</p>p#redp.green知識準(zhǔn)備示例：交集選擇器的使用<styletype="text/css">p{color:#F00;/*紅色*/}.p1{color:#0F0;/*綠色*/}

h2.p1{color:#00F;/*藍色*/}</style><body><p>普通段落文本的樣式（紅色）</p><pclass="p1">指定了.p1類的段落文本樣式（綠色）</p><h2class="p1">指定了.p1類的h2標(biāo)題文本樣式（藍色）</h2></body>知識準(zhǔn)備1.復(fù)合選擇器并集選擇器：如果某些選擇器定義的樣式完全相同或者部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。在并集選擇器中，各個選擇器通過逗號連接而成。知識準(zhǔn)備示例：并集選擇器的使用<styletype="text/css">p,h1,h2,h2.special,.one,p#two{text-decoration:underline;font-size:15px;}</style><body><p>并集選擇器的使用</p><h1>并集選擇器的使用</h1><h2>并集選擇器的使用</h2><h2class="special">并集選擇器的使用</h2><spanclass="one">并集選擇器的使用</span><pid="two">并集選擇器的使用</p></body>知識準(zhǔn)備1.復(fù)合選擇器后代：某標(biāo)記內(nèi)嵌套的所有子元素，都稱為該標(biāo)記的后代。后代選擇器：把外層的標(biāo)記寫在前面，內(nèi)層的標(biāo)記寫在后面，之間用空格分隔。<h1>熱烈慶祝<span>第三十屆</span>牡丹文化節(jié)召開</h1>h1span知識準(zhǔn)備示例：后代選擇器的使用<body><h2>熱烈祝賀<span>第三十屆</span>牡丹文化節(jié)召開</h2><h3><span>牡丹花</span>分三類十二型</h3><olclass="uu"><li>單瓣類

<ul><li>黃花魁</li><li>潑墨紫</li><li>鳳丹</li><li>盤中取果</li></ul></li><li>重瓣類</li><li>重臺類</li></ol></body><styletype="text/css">span{text-decoration:underline;}h2span{color:#F00;}h3span{color:#00F;}.uuliulli{font-weight:bold;color:#00F;}</style>知識準(zhǔn)備2.通配符選擇器通配符選擇器：用“*”表示，能匹配網(wǎng)頁中所有的元素，它設(shè)置的樣式將對網(wǎng)頁中的所有標(biāo)記元素都生效。語法格式：*{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}*{margin:0;padding:0;background-color:#0F0;}知識準(zhǔn)備3.同時應(yīng)用多個樣式如果需要同時應(yīng)用多個CSS樣式，則可以在class屬性值中設(shè)置多個選擇器名稱，并用空格隔開。如：要對段落文本同時使用類p1，類p2的樣式<pclass="p1p2">同時使用.p1和.p2兩種樣式，中間用空格隔開。</p>實戰(zhàn)演練案例描述：設(shè)計并制作寓言故事網(wǎng)頁，網(wǎng)頁效果如圖1所示。制作寓言故事網(wǎng)頁圖1實戰(zhàn)演練網(wǎng)頁中，錨點鏈接分別設(shè)置成不同的超鏈接樣式，如圖2所示。網(wǎng)頁右上角背景圖片設(shè)置為固定位置，如圖3所示。制作寓言故事網(wǎng)頁圖2圖3強化訓(xùn)練案例描述：設(shè)計并制作詩詞欣賞網(wǎng)站，網(wǎng)頁效果如下圖1、圖2、圖3、圖4所示。四張網(wǎng)頁中均有相同的超鏈接樣式，使用鏈接式樣式表來設(shè)置。制作詩詞欣賞網(wǎng)站圖1圖2圖3圖4任務(wù)小結(jié)01交集選擇器02并集選擇器03后代選擇器04通配符選擇器05同時應(yīng)用多個樣式課后實訓(xùn)設(shè)計并制作“杭州西湖”景點網(wǎng)頁，效果如圖所示。任務(wù)10盒子模型及應(yīng)用第五單元盒子模型學(xué)習(xí)目標(biāo)外邊距的設(shè)置盒子模型的概念邊框的設(shè)置內(nèi)邊距的設(shè)置掌握利用盒子模型布局網(wǎng)頁的優(yōu)勢了解:學(xué)習(xí)目標(biāo)任務(wù)目標(biāo)實戰(zhàn)演練——制作古詩文欣賞網(wǎng)頁強化訓(xùn)練——制作散文賞析網(wǎng)頁知識準(zhǔn)備1.盒子模型的概念知識準(zhǔn)備CSS將HTML頁面中的每一個元素看成是一個矩形盒子，占據(jù)一定的頁面空間。一個HTML頁面由很多這樣的盒子組成，這些盒子之間會相互影響，因此網(wǎng)頁布局主要是掌握：一個獨立的盒子的內(nèi)部結(jié)構(gòu)；多個盒子之間的相互關(guān)系。盒子模型使用<div></div>標(biāo)記來表示。1.盒子模型的概念知識準(zhǔn)備1.盒子模型的概念一個獨立的盒子模型由content（內(nèi)容）、border（邊框）、padding（內(nèi)邊距）和margin（外邊距）這4部分組成。知識準(zhǔn)備1.盒子模型的概念盒子的實際寬度=width+padding（左右）+border（左右）+margin（左右）盒子的實際高度=height+padding（上下）+border（上下）+margin（上下）知識準(zhǔn)備1.盒子模型的概念盒子模型各元素的關(guān)系知識準(zhǔn)備2.邊框的設(shè)置：邊框樣式邊框樣式（border-style）：solid（單實線），dashed（虛線），dotted（點線），double（雙實線）?；靖袷剑篵order-style：上邊框[右邊框

下邊框

左邊框]；值復(fù)制原則：1個值：四邊2個值：上下/左右3個值：上/左右/下4個值：上/右/下/左知識準(zhǔn)備示例：邊框樣式的設(shè)置<styletype="text/css">#box1{border-style:double;/*4條邊框都為雙實線*/}#box2{border-style:soliddashed;/*上下邊框單實線，左右邊框為虛線*/}#box3{border-style:soliddasheddotted;/*上邊框單實線，左右邊框為虛線，下邊框為點線*/}</style><body><divid="box1">設(shè)置四邊的邊框樣式為雙實線</div><p></p><divid="box2">設(shè)置上下邊框樣式為單實線，左右邊框樣式為虛線</div><p></p><divid="box3">設(shè)置上邊框樣式為單實線，左右邊框樣式為虛線，下邊框樣式為點線</div></body>知識準(zhǔn)備小技巧：分別設(shè)置邊框樣式上邊框樣式：border-top-style右邊框樣式：border-right-style下邊框樣式：border-bottom-style左邊框樣式：border-left-style知識準(zhǔn)備2.邊框的設(shè)置：邊框?qū)挾冗吙驅(qū)挾龋╞order-width）：單位為像素px基本格式：border-width：上邊框[右邊框下邊框左邊框]；值復(fù)制原則：1個值：四邊2個值：上下/左右3個值：上/左右/下4個值：上/右/下/左知識準(zhǔn)備示例：邊框?qū)挾鹊脑O(shè)置<styletype="text/css">div{border-style:solid;/*設(shè)置邊框樣式為單實線*/}#box1{border-width:1px;/*4條邊框都為1像素*/}#box2{border-width:2px1px;/*上下邊框為2像素，左右邊框為1像素*/}#box3{border-width:2px3px4px;/*上邊框為2像素，左右邊框為3像素，下邊框為4像素*/}</style><body><divid="box1">設(shè)置四邊的邊框為1像素，單實線</div><p></p><divid="box2">設(shè)置上下邊框為2像素，左右邊框為1像素，單實線</div><p></p><divid="box3">設(shè)置上邊框為2像素，左右邊框為3像素，下邊框為4像素，單實線</div></body>知識準(zhǔn)備小技巧：分別設(shè)置邊框?qū)挾壬线吙驅(qū)挾龋篵order-top-width右邊框?qū)挾龋篵order-right-width下邊框?qū)挾龋篵order-bottom-width左邊框?qū)挾龋篵order-left-width知識準(zhǔn)備2.邊框的設(shè)置：邊框顏色邊框顏色（border-color）：預(yù)定義的顏色值、#RRGGBB或rgb（r,b,g）?；靖袷剑篵order-color：上邊框[右邊框下邊框左邊框]；值復(fù)制原則：1個值：四邊2個值：上下/左右3個值：上/左右/下4個值：上/右/下/左知識準(zhǔn)備示例：邊框顏色的設(shè)置<styletype="text/css">div{border-style:solid;/*設(shè)置邊框樣式為單實線*/}#box1{border-color:#f00;/*4條邊框都為紅色*/}#box2{border-color:#f00#00f;/*上下邊框為紅色，左右邊框為藍色*/}#box3{border-color:#f00#00f#0f0;/*上邊框為紅色，左右邊框為藍色，下邊框為綠色*/}</style><body><divid="box1">設(shè)置四邊的邊框顏色為紅色</div><p></p><divid="box2">設(shè)置上下邊框為紅色，左右邊框為藍色</div><p></p><divid="box3">設(shè)置上邊框為紅色，左右邊框為藍色，下邊框為綠色</div></body>知識準(zhǔn)備小技巧：分別設(shè)置邊框顏色上邊框顏色：border-top-color右邊框顏色：border-right-color下邊框顏色：border-bottom-color左邊框顏色：border-left-color知識準(zhǔn)備2.邊框的設(shè)置：綜合設(shè)置邊框的綜合設(shè)置：設(shè)置四側(cè)邊框的屬性?；靖袷剑篵order：寬度樣式顏色；單側(cè)邊框的綜合屬性：border-topborder-rightborder-bottomborder-left知識準(zhǔn)備<styletype="text/css">#box1{border-top:2pxsolid#f00;/*設(shè)置四邊的不同屬性*/border-right:3pxdouble#F90;border-bottom:2pxdotted#C0F;border-left:3pxdouble#F90;}#box2{border:3pxsolid#00f;/*設(shè)置四邊的相同屬性*/}</style><body><divid="box1">設(shè)置四邊的不同屬性</div><p></p><divid="box2">設(shè)置四邊的相同屬性</div></body>示例：邊框?qū)傩缘木C合設(shè)置知識準(zhǔn)備2.邊框的設(shè)置：圓角邊框圓角邊框：使用border-radius將矩形的方角設(shè)置為圓角?；靖袷剑篵order-radius：參數(shù)1/參數(shù)2；參數(shù)1：像素值/百分比，圓角的水平半徑參數(shù)2：像素值/百分比，圓角的垂直半徑如果參數(shù)2省略，則參數(shù)2=參數(shù)1border-radius：50px/30px；/*4個圓角水平半徑為50px，垂直半徑為30px*/border-radius：50px；/*4個圓角水平半徑為50px，垂直半徑為50px*/知識準(zhǔn)備2.邊框的設(shè)置：圓角邊框遵循值復(fù)制的原則：參數(shù)1、參數(shù)2均可以設(shè)置1~4個參數(shù)值，用于表示四角的圓角半徑大小。參數(shù)1和參數(shù)2設(shè)置一個參數(shù)值：表示四角的圓角半徑如：border-radius：50px/30px；/*4個圓角水平半徑為50px，垂直半徑為30px*/知識準(zhǔn)備2.邊框的設(shè)置：圓角邊框參數(shù)1和參數(shù)2設(shè)置兩個參數(shù)值：第一個參數(shù)值表示“左上角”和“右下角”的圓角半徑第二個參數(shù)值表示“右上角”和“左下角”的圓角半徑如：border-radius：50px20px/30px10px；

/*左上和右下圓角水平半徑為50px，垂直半徑為30px*//*右上和左下圓角水平半徑為20px，垂直半徑為10px*/知識準(zhǔn)備2.邊框的設(shè)置：圓角邊框參數(shù)1和參數(shù)2設(shè)置三個參數(shù)值：第一個參數(shù)值表示“左上角”的圓角半徑第二個參數(shù)值表示“右上角”和“左下角”的圓角半徑第三個參數(shù)值表示“右下角”的圓角半徑如：border-radius：50px20px40px/30px10px60px；

/*左上圓角水平半徑為50px，垂直半徑為30px*//*右上和左下圓角水平半徑為20px，垂直半徑為10px*//*右下圓角水平半徑為40px，垂直半徑為60px*/知識準(zhǔn)備2.邊框的設(shè)置：圓角邊框參數(shù)1和參數(shù)2設(shè)置四個參數(shù)值：第一個參數(shù)值表示“左上角”的圓角半徑第二個參數(shù)值表示“右上角”的圓角半徑第三個參數(shù)值表示“右下角”的圓角半徑第四個參數(shù)值表示“左下角”的圓角半徑如：border-radius：50px20px40px15px/30px10px60px25px；/*左上圓角水平半徑為50px，垂直半徑為30px*//*右上圓角水平半徑為20px，垂直半徑為10px*//*右下圓角水平半徑為40px，垂直半徑為60px*//*左下圓角水平半徑為15px，垂直半徑為25px*/知識準(zhǔn)備示例：圓角邊框的設(shè)置<styletype="text/css">#box1{width:300px;height:100px;border:3pxsolid#00f;border-radius:50px20px40px15px/30px10px60px25px;/*左上圓角水平半徑為50px，垂直半徑為30px*//*右上圓角水平半徑為20px，垂直半徑為10px*//*右下圓角水平半徑為40px，垂直半徑為60px*//*左下圓角水平半徑為15px，垂直半徑為25px*/}#box2{width:300px;height:100px;border:3pxsolid#00f;border-radius:50px;/*4個圓角水平半徑為50px，垂直半徑為50px*/}</style><body><divid="box1">設(shè)置圓角邊框</div><p></p><divid="box2">設(shè)置圓角邊框</div></body>知識準(zhǔn)備如何設(shè)置正圓？知識準(zhǔn)備3.內(nèi)邊距的設(shè)置內(nèi)邊距（padding）：用于控制內(nèi)容與邊框之間的距離遵循值復(fù)制的原則單獨設(shè)置padding-toppadding-rightpadding-bottompadding-left知識準(zhǔn)備示例：內(nèi)邊距的設(shè)置<styletype="text/css">#box{width:400px;border:5pxsolidred;padding:10px40px80px120px;}</style><body><divid="box">CSS將HTML頁面中的每一個元素看成是一個矩形盒子，占據(jù)一定的頁面空間。一個HTML頁面由很多這樣的盒子組成，這些盒子之間會相互影響，因此掌握盒子模型需要從兩方面來理解：一是一個獨立的盒子的內(nèi)部結(jié)構(gòu)；二是多個盒子之間的相互關(guān)系。

</div></body>知識準(zhǔn)備4.外邊距的設(shè)置外邊距（margin）：用于控制盒子邊框

溫馨提示

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

評論

0/150

提交評論