基礎(chǔ)web前端-css主講教師傳智.神龍教主

1、CSS層疊樣 Cascadingstylesheet(層疊樣式表)，用來(lái)控制網(wǎng)頁(yè)樣式的，并允許將網(wǎng)頁(yè)2、CSS基本3、按選擇器不同來(lái)分類(lèi)類(lèi)選擇以點(diǎn)開(kāi)通過(guò)元素的class屬性來(lái)可以被調(diào)用多Id選擇以#開(kāi)通過(guò)元素的id屬性來(lái)只能被調(diào)用一直接對(duì)HTML也樣式，不需要調(diào)用，自動(dòng)應(yīng)用樣偽類(lèi)選 正常連接時(shí)候的狀 已經(jīng)過(guò)的狀 鼠標(biāo)移上去時(shí)候的狀 但鼠標(biāo)點(diǎn)擊時(shí)候的專(zhuān)關(guān)聯(lián)選擇器p .aa 4、按CSS的位置來(lái)分類(lèi)內(nèi)嵌樣式（內(nèi)部樣式）：只能供本頁(yè)面使外部樣式：寫(xiě)在頁(yè)面的外部，通過(guò)或?qū)氲姆椒▉?lái)外部樣連接的語(yǔ)法：<linkrel=’stylesheet’type=’text/css’href=’地址’導(dǎo)入的語(yǔ)法：@importurl(‘地址’); url是可以省略的，建議不要省連接和導(dǎo)入的連接只能在HTML頁(yè)面中引入CSS樣導(dǎo)入可以在HTMLCSS中引入CSS樣5、注HTML注 CSS注 子元素覆蓋和繼承父元素的1、id樣式 class樣式>樣2、行內(nèi)樣式>內(nèi)嵌樣式>外部idid樣式>class樣式 樣以程序執(zhí)行先后為優(yōu)先級(jí)，后執(zhí)行的將前面的給覆蓋權(quán)id選擇器<行內(nèi)選擇器 < < 1、從左往右排2、不指定高度默認(rèn)高度是3、不指定寬度默認(rèn)寬度是4、行顯示標(biāo)記不能指定寬度和5、轉(zhuǎn)換成1、從上往2、如果不指定寬度默認(rèn)寬度是3、如果不指定高度，高度是4、可以設(shè)置寬度和高1、塊顯示2、跨段塊標(biāo)記，div中可以標(biāo)題，段落，，文1、行顯示2、跨字符塊標(biāo)記，span中只能放DivCss執(zhí)行效率高什么是盒子只要是能存放內(nèi)容的都是盒子。最大的盒子是HTML標(biāo)邊界magin：盒子的外面叫邊界，邊界有四個(gè)，上下左右填充padding)邊框boder：盒子的本身有邊框，邊框有四個(gè)，上下左右練習(xí)CSS例題一(邊框和邊界<style<styletype="text/css">background-color:#6CF;/*設(shè)置背景色} border-bottom:#06Fdashed /*下邊框是實(shí)線solid實(shí)線dashed }cursor:pointer;/*當(dāng)光標(biāo)移動(dòng)到當(dāng)前標(biāo)記的時(shí)候變成手的形狀}請(qǐng)輸入您的信息：<inputtype="textname="nameid="username<inputtype="buttonvalue="確定id="btnCSS例題二（細(xì)線表格<style<styletype="text/css">border:#09Fsolidborder-collapse:collapse;/*collapse:塌陷,做細(xì)線表格} }}text-align:center;/*td里面的內(nèi)容居中} <style<styletype="text/css"> } /*左填充是110px*/}<div 1葉色秀雅，花色清淡。<br 2.樹(shù)體高大， 綿長(zhǎng)，樹(shù)粗可達(dá)4米， 可達(dá)3000年之多。固長(zhǎng)與古老寺廟相配伍，以名山大川、風(fēng)景名勝為伴。<br/> 3樹(shù)干光潔，愈傷力強(qiáng)，輕微的損傷很快便可愈合。<br 得到和曖的陽(yáng)光。<br 35.30c4.90c，優(yōu)于其它樹(shù)種。<br .等自然風(fēng)景。<br 7銀杏絕少病蟲(chóng)害，不污染環(huán)境，是著名的無(wú)公害樹(shù)種。<br 8抗旱力較強(qiáng)。<br float屬性（浮動(dòng)屬性改變塊元素(blockelement)對(duì)象的默認(rèn)顯示方式浮動(dòng)元素（float）會(huì)被移出標(biāo)準(zhǔn)流clear屬性（清除浮動(dòng)的影響<style<styletype="text/css">}} }<div<div<div多學(xué)一招：clear是清除浮動(dòng)，但是在清除浮動(dòng)的時(shí)候清除了當(dāng)前盒子邊界的屬性，使用了clear屬性的盒子無(wú)法使用margin屬性。在實(shí)際應(yīng)用中，我們專(zhuān)門(mén)寫(xiě)一個(gè)清除浮動(dòng)的類(lèi)樣式，在每個(gè)浮動(dòng)的后面都清除一下浮動(dòng)的影響在HTML中調(diào)用例題background-color:#5b8a00;/*背景樣式<stylebackground-color:#5b8a00;/*背景樣式 border:#000solid } 放在最右邊} }<imgsrc="images14/mainroad.jpg"/><spanid="first">春</span>季，地球的北半 對(duì)農(nóng)民來(lái)說(shuō)，春季