Web前端開發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務(wù)9、10 復(fù)合選擇器和通配符選擇器、盒子模型及應(yīng)用_第1頁(yè)
Web前端開發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務(wù)9、10 復(fù)合選擇器和通配符選擇器、盒子模型及應(yīng)用_第2頁(yè)
Web前端開發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務(wù)9、10 復(fù)合選擇器和通配符選擇器、盒子模型及應(yīng)用_第3頁(yè)
Web前端開發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務(wù)9、10 復(fù)合選擇器和通配符選擇器、盒子模型及應(yīng)用_第4頁(yè)
Web前端開發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務(wù)9、10 復(fù)合選擇器和通配符選擇器、盒子模型及應(yīng)用_第5頁(yè)
已閱讀5頁(yè)，還剩49頁(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)介

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

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

下邊框

左邊框]；值復(fù)制原則：1個(gè)值：四邊2個(gè)值：上下/左右3個(gè)值：上/左右/下4個(gè)值：上/右/下/左知識(shí)準(zhǔn)備示例：邊框樣式的設(shè)置<styletype="text/css">#box1{border-style:double;/*4條邊框都為雙實(shí)線*/}#box2{border-style:soliddashed;/*上下邊框單實(shí)線，左右邊框?yàn)樘摼€*/}#box3{border-style:soliddasheddotted;/*上邊框單實(shí)線，左右邊框?yàn)樘摼€，下邊框?yàn)辄c(diǎn)線*/}</style><body><divid="box1">設(shè)置四邊的邊框樣式為雙實(shí)線</div><p></p><divid="box2">設(shè)置上下邊框樣式為單實(shí)線，左右邊框樣式為虛線</div><p></p><divid="box3">設(shè)置上邊框樣式為單實(shí)線，左右邊框樣式為虛線，下邊框樣式為點(diǎn)線</div></body>知識(shí)準(zhǔn)備小技巧：分別設(shè)置邊框樣式上邊框樣式：border-top-style右邊框樣式：border-right-style下邊框樣式：border-bottom-style左邊框樣式：border-left-style知識(shí)準(zhǔn)備2.邊框的設(shè)置：邊框?qū)挾冗吙驅(qū)挾龋╞order-width）：?jiǎn)挝粸橄袼豴x基本格式：border-width：上邊框[右邊框下邊框左邊框]；值復(fù)制原則：1個(gè)值：四邊2個(gè)值：上下/左右3個(gè)值：上/左右/下4個(gè)值：上/右/下/左知識(shí)準(zhǔn)備示例：邊框?qū)挾鹊脑O(shè)置<styletype="text/css">div{border-style:solid;/*設(shè)置邊框樣式為單實(shí)線*/}#box1{border-width:1px;/*4條邊框都為1像素*/}#box2{border-width:2px1px;/*上下邊框?yàn)?像素，左右邊框?yàn)?像素*/}#box3{border-width:2px3px4px;/*上邊框?yàn)?像素，左右邊框?yàn)?像素，下邊框?yàn)?像素*/}</style><body><divid="box1">設(shè)置四邊的邊框?yàn)?像素，單實(shí)線</div><p></p><divid="box2">設(shè)置上下邊框?yàn)?像素，左右邊框?yàn)?像素，單實(shí)線</div><p></p><divid="box3">設(shè)置上邊框?yàn)?像素，左右邊框?yàn)?像素，下邊框?yàn)?像素，單實(shí)線</div></body>知識(shí)準(zhǔn)備小技巧：分別設(shè)置邊框?qū)挾壬线吙驅(qū)挾龋篵order-top-width右邊框?qū)挾龋篵order-right-width下邊框?qū)挾龋篵order-bottom-width左邊框?qū)挾龋篵order-left-width知識(shí)準(zhǔn)備2.邊框的設(shè)置：邊框顏色邊框顏色（border-color）：預(yù)定義的顏色值、#RRGGBB或rgb（r,b,g）?；靖袷剑篵order-color：上邊框[右邊框下邊框左邊框]；值復(fù)制原則：1個(gè)值：四邊2個(gè)值：上下/左右3個(gè)值：上/左右/下4個(gè)值：上/右/下/左知識(shí)準(zhǔn)備示例：邊框顏色的設(shè)置<styletype="text/css">div{border-style:solid;/*設(shè)置邊框樣式為單實(shí)線*/}#box1{border-color:#f00;/*4條邊框都為紅色*/}#box2{border-color:#f00#00f;/*上下邊框?yàn)榧t色，左右邊框?yàn)樗{(lán)色*/}#box3{border-color:#f00#00f#0f0;/*上邊框?yàn)榧t色，左右邊框?yàn)樗{(lán)色，下邊框?yàn)榫G色*/}</style><body><divid="box1">設(shè)置四邊的邊框顏色為紅色</div><p></p><divid="box2">設(shè)置上下邊框?yàn)榧t色，左右邊框?yàn)樗{(lán)色</div><p></p><divid="box3">設(shè)置上邊框?yàn)榧t色，左右邊框?yàn)樗{(lán)色，下邊框?yàn)榫G色</div></body>知識(shí)準(zhǔn)備小技巧：分別設(shè)置邊框顏色上邊框顏色：border-top-color右邊框顏色：border-right-color下邊框顏色：border-bottom-color左邊框顏色：border-left-color知識(shí)準(zhǔn)備2.邊框的設(shè)置：綜合設(shè)置邊框的綜合設(shè)置：設(shè)置四側(cè)邊框的屬性?；靖袷剑篵order：寬度樣式顏色；單側(cè)邊框的綜合屬性：border-topborder-rightborder-bottomborder-left知識(shí)準(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è)置知識(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個(gè)圓角水平半徑為50px，垂直半徑為30px*/border-radius：50px；/*4個(gè)圓角水平半徑為50px，垂直半徑為50px*/知識(shí)準(zhǔn)備2.邊框的設(shè)置：圓角邊框遵循值復(fù)制的原則：參數(shù)1、參數(shù)2均可以設(shè)置1~4個(gè)參數(shù)值，用于表示四角的圓角半徑大小。參數(shù)1和參數(shù)2設(shè)置一個(gè)參數(shù)值：表示四角的圓角半徑如：border-radius：50px/30px；/*4個(gè)圓角水平半徑為50px，垂直半徑為30px*/知識(shí)準(zhǔn)備2.邊框的設(shè)置：圓角邊框參數(shù)1和參數(shù)2設(shè)置兩個(gè)參數(shù)值：第一個(gè)參數(shù)值表示“左上角”和“右下角”的圓角半徑第二個(gè)參數(shù)值表示“右上角”和“左下角”的圓角半徑如：border-radius：50px20px/30px10px；

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

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

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

溫馨提示

  • 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)論