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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

下邊框

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

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

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

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

溫馨提示

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

評論

0/150

提交評論