CSS選擇器與盒模型

《CSS選擇器與盒模型》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、CSS選擇器與盒模型演示人：張鋒CSS與標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)CSS全稱是：CascadingStyleSheet，是用于控制（增強(qiáng)）網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的標(biāo)記性語言。什么叫標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)？每個(gè)頁面都是由“內(nèi)容”（html）與“表現(xiàn)”（CSS）組織起來的，html只負(fù)責(zé)顯示內(nèi)容，具體顯示形式是CSS排版的任務(wù)。題目：CSS常用選擇器一、ID選擇器。唯一性，與js調(diào)用動(dòng)態(tài)對(duì)象不能沖突。二、Class選擇器。可重復(fù)利用。三、標(biāo)簽選擇器。如，p標(biāo)簽。四、通用選擇器。如：*{margin:0;padding:0;}五、其他非常用選擇器。如：屬性選擇器，img[alt]

2、{border:solid1px#00f;}；子選擇器，#div>h1；相鄰選擇器，#div+p。題目：CSS優(yōu)先級(jí)一、內(nèi)聯(lián)樣式。值：0+1000二、ID選擇器。值：0+100三、Class選擇器。值：0+10四、標(biāo)簽選擇器。值：0+1以上四種屬性可以疊加，計(jì)算結(jié)果大的優(yōu)先級(jí)靠前。N個(gè)class疊加時(shí)，CSS代碼中靠下的最終生效。題目：塊元素與內(nèi)聯(lián)元素一、塊元素(block)的特點(diǎn)：1、總是在新行上顯示。2、高度行高及邊距補(bǔ)白可控。3、寬度默認(rèn)是它低級(jí)元素的100%。4、可容納內(nèi)聯(lián)元素和其他塊元素。二、內(nèi)聯(lián)元素(inline)的特點(diǎn)：1、和其他元素在同一行顯示。2、

3、高度行高及邊距補(bǔ)白不可變。3、寬度就是它里面文字或圖片的寬度。4、只能容納文本或其他內(nèi)聯(lián)元素。題目：盒模型圖示一題目：盒模型圖示二題目：盒模型的三個(gè)屬性一、margin屬性。共五個(gè)，margin，margin-top，margin-right，margin-bottom，margin-left，屬性值可以是長度，百分比或auto，且可以取負(fù)。簡(jiǎn)寫方法：margin:10px；margin:10pxauto；margin:10px10pxauto；題目：盒模型的三個(gè)屬性二、padding屬性。與margin用法一樣，區(qū)別是一內(nèi)一外，不能取負(fù)。題目：盒模型的三個(gè)屬性三、

4、border屬性。Box默認(rèn)是有邊框的，只是不顯示出來。有三個(gè)屬性，border-width；border-color；border-style；例如：border-width:5px；border-color:red；border-style:solid；可簡(jiǎn)寫為：border:solid5pxred；這是四條邊的效果，單邊為：border-top:solid5pxred；演示完畢謝謝大家下次再見