預(yù)習(xí)5-flash63divcss第五課網(wǎng)站應(yīng)用

官網(wǎng)：全國(guó)免費(fèi)咨詢熱線：4006-553-664企業(yè)QQ：4006-553-664第五課：網(wǎng)站css應(yīng)用主講：（朱毅）第五課：網(wǎng)站css應(yīng)用<一>CSS使用方式使用CSS控制頁(yè)面有4種方式，分別為行內(nèi)樣式、內(nèi)嵌式、鏈接式。

1.行內(nèi)樣式。直接寫在HTML標(biāo)簽里，例如<divstyle="width:100px;height:100px;"></div>2.內(nèi)嵌式。寫在<style></style>中，例如

<styletype="text/css">div{width：100px;height:100px;}</style>3.鏈接式。使用頻率最高，也最為實(shí)用，便于維護(hù)。例如

<linkhref="test.css"type="text/css"rel="stylesheet"/>rel即為relation的縮寫，規(guī)定當(dāng)前文檔與被鏈接文檔之間的關(guān)系，只有當(dāng)rel為“stylesheet”時(shí)才能得到所有瀏覽器的支持，而其他值只能到部分的支持。優(yōu)先級(jí)順序?yàn)椋盒袃?nèi)樣式>鏈接式>內(nèi)嵌式第五課：網(wǎng)站css應(yīng)用<二>CSS基本語(yǔ)法(1).CSS選擇器

HTML中的標(biāo)簽的樣式都是通過(guò)CSS選擇器進(jìn)行控制的，進(jìn)而實(shí)現(xiàn)各種效果，有3中類別的選擇器。

1.標(biāo)簽選擇器。例如

div{width:100px;height:100px;}2.類別選擇器。例如

.class1{color:red;}div.class2{color:blue;}3.ID選擇器（頁(yè)面唯一）。例如

#id1{color:black;}第五課：網(wǎng)站css應(yīng)用(2).選擇器的聲明

選擇器的聲明可以有集體聲明和嵌套聲明。集體聲明，例如

h1,h2,h3,h4{color:red;}

嵌套聲明，例如

h1.class1{color:red;}表示h1標(biāo)簽下的所有class為class1的標(biāo)簽的字體為紅色。

普通聲明，例如.class1{color:red;}第五課：網(wǎng)站css應(yīng)用(3).派生選擇器通過(guò)依據(jù)元素在其位置的上下文關(guān)系來(lái)定義樣式，你可以使標(biāo)記更加簡(jiǎn)潔。在CSS1中，通過(guò)這種方式來(lái)應(yīng)用規(guī)則的選擇器被稱為上下文選擇器(contextualselectors)，這是由于它們依賴于上下文關(guān)系來(lái)應(yīng)用或者避免某項(xiàng)規(guī)則。在CSS2中，它們稱為派生選擇器，但是無(wú)論你如何稱呼它們，它們的作用都是相同的。派生選擇器允許你根據(jù)文檔的上下文關(guān)系來(lái)確定某個(gè)標(biāo)簽的樣式。通過(guò)合理地使用派生選擇器，我們可以使HTML代碼變得更加整潔。listrong{font-style:italic;font-weight:normal;}第五課：網(wǎng)站css應(yīng)用(4).css繼承樣式子元素總是可以繼承父元素的一些樣式<pclass=“psty”><spanclass=“spansty”>這里顯示展示內(nèi)容</span></p><styletype=“text/css”>.pSty{font-size:14px;color:green;}.pSty.spansty{color:red;font-weight:bold;}</style>第五課：網(wǎng)站css應(yīng)用我們?cè)诓季只蛘叨x樣式className的時(shí)候，遇到一些習(xí)慣的內(nèi)容，總是害怕定義相同的className名稱，如果碰巧遇到，這將直接導(dǎo)致我們所寫的樣式可能總是達(dá)不到我們想要的效果。定義私有className可以有效避免一部分誤命名。<styletype=“text/css”>.news.hd{color:red;}.news.cont{color:red;}.cases.hd{color:green;}.cases.cont{color:green;}</style><divclass=“news”><divclass=“hd”></div><divclass=“cont”></div></div><divclass=“cases”><divclass=“hd”><