国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關(guān)于CSS你應(yīng)該知道的基礎(chǔ)知識 - 樣式應(yīng)用篇

fxp / 2242人閱讀

摘要：我是紅色這種引用代碼的方式在一定程度上解決了所有代碼都分散寫在各個(gè)元素上的問題，但是不利于代碼的整體重用。需要詳盡選定該元素來設(shè)置具體的樣式。子元素會繼承父元素的樣式，等除外。

上一篇簡單總結(jié)了一下選擇器，如果一個(gè)元素被多個(gè)選擇器選中，元素的樣式就會以級聯(lián)方式被應(yīng)用到。要搞清最終那個(gè)樣式被應(yīng)用到元素上了，首先要明白引用CSS代碼的幾種方式。

CSS代碼引用方式

如何應(yīng)用CSS代碼到Html元素上，常見的有下面幾種方式

通過Html元素的style屬性來指定樣式

在Html頁面中直接添加style標(biāo)簽

通過link標(biāo)簽來引用外部css文件

sytle屬性

想要修改一個(gè)元素，最簡單的方式就是修改它的style屬性，如下栗子：

我是紅色

這種方式給元素添加CSS代碼有一定的局限性，拋開瀏覽器解析渲染CSS樣式的性能不說，但從DRY原則來看就不太好。每次想修改同類型樣式的元素，要逐個(gè)修改元素的style屬性。

sytle標(biāo)簽

style標(biāo)簽是Html的標(biāo)準(zhǔn)標(biāo)簽，可以在里面直接寫CSS代碼。


  
  
  
  



  
我是紅色

這種引用CSS代碼的方式在一定程度上解決了所有CSS代碼都分散寫在各個(gè)元素上的問題，但是不利于CSS代碼的整體重用。如果某些class需要在多個(gè)Html文件中引用，需要將style標(biāo)簽里的內(nèi)容復(fù)制粘貼到各個(gè)Html中。

引用外部CSS文件

通過link標(biāo)簽來引用外部CSS文件。CSS文件可以位于和Html文件同一個(gè)服務(wù)器上，也可以是互聯(lián)網(wǎng)上任意的一個(gè)地址，例如CDN。


  
  
  
  



  
我是紅色


style.css
.red {
  color: red;
}

這種方式我們可以做到CSS代碼的重用，但由于引用了外部文件，瀏覽器會額外發(fā)送一個(gè)http請求去加載CSS文件，性能上可能稍微會有一點(diǎn)影響，但以目前瀏覽器的性能，少量額外的http請求都是可以接受的。

CSS級聯(lián)樣式的應(yīng)用

回到開頭的問題，如果我有兩個(gè)選擇器都選中了某個(gè)元素，分別賦予這個(gè)元素不同的樣式，到底哪個(gè)選擇器中的樣式會被應(yīng)用呢？看一下如下的栗子：


  
  
  
  



  
我是藍(lán)色

首先要知道，Html是從頭到未順序加載并解析的。無論是style標(biāo)簽還是CSS外部文件引用都是如此。從例子中可以看到，div中的文字會變成藍(lán)色，即在CSS代碼中，在選擇器相同的情況下，靠后的CSS代碼樣式會覆蓋掉之前的樣式。

再看一個(gè)栗子：


  
  
  
  



  

    

      我是藍(lán)色而且有下劃線

這個(gè)栗子中，盡管紅色字體選擇器更靠后但是由于前面的一個(gè)選擇器更詳盡的選中了div元素內(nèi)的p元素，所以p里面的文字顏色為藍(lán)色，即更詳盡的選擇器樣式覆蓋掉了之前的樣式。而p選擇器里面還添加了文字下劃線樣式，這個(gè)樣式被繼承了下來，所以最后p元素的文字是藍(lán)色，并且有下劃線。

下面來看看使用類選擇器是什么效果。


  
  
  
  



  

    

      我是藍(lán)色而且有下劃線

從代碼結(jié)果中可以清楚的看到，類選擇器較元素選擇器具有更高的優(yōu)先級。再來看看id選擇器。


  
  
  
  



  

    

      我是藍(lán)色而且有下劃線

因?yàn)閕d通常是唯一標(biāo)識一個(gè)元素的，所以它的優(yōu)先級又高于了此前兩種選擇器。


  
  
  
  



  

    

      我是綠色而且有下劃線

最后發(fā)現(xiàn)，style屬性的優(yōu)先級最高。所以我們可以通過JavaScript來動態(tài)的修改元素的style屬性值，如 display: none， 達(dá)到修改元素樣式的效果，而且不會受到之前任何選擇器樣式的影響。

CSS樣式繼承

什么是CSS樣式繼承，直接上栗子。


  
  
  
  



  

    

      我是藍(lán)色且18個(gè)像素

通過栗子發(fā)現(xiàn)，子元素child的文字顏色繼承自parent的樣式，通過Chrome的developer tools也可以清楚的看到。

關(guān)于繼承，還有一種情況是有些Html元素是不會繼承父元素樣式的，例如input。需要詳盡選定該元素來設(shè)置具體的樣式。這里就不一一舉例了，大家遇到樣式不是預(yù)期效果的情況，可以通過developer tools來查看到底哪個(gè)選擇器的樣式被應(yīng)用到了。

總結(jié)

CSS的代碼加載順序決定了后加載的樣式會覆蓋先加載的樣式。

最終元素的樣式會合并所有選中的樣式，高優(yōu)先級的覆蓋低優(yōu)先級的。

樣式覆蓋的優(yōu)先級是 id > 詳盡選擇 > class > 元素。

style屬性具有最高的樣式優(yōu)先級。

子元素會繼承父元素的樣式，input等除外。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115995.html

相關(guān)文章

  • 關(guān)于CSS你應(yīng)該知道的基礎(chǔ)知識 - 樣式應(yīng)用篇

    摘要：我是紅色這種引用代碼的方式在一定程度上解決了所有代碼都分散寫在各個(gè)元素上的問題，但是不利于代碼的整體重用。需要詳盡選定該元素來設(shè)置具體的樣式。子元素會繼承父元素的樣式，等除外。 上一篇簡單總結(jié)了一下選擇器，如果一個(gè)元素被多個(gè)選擇器選中，元素的樣式就會以級聯(lián)方式被應(yīng)用到。要搞清最終那個(gè)樣式被應(yīng)用到元素上了，首先要明白引用CSS代碼的幾種方式。 CSS代碼引用方式 如何應(yīng)用CSS代碼到Ht...

    Michael_Lin 評論0 收藏0

  • 關(guān)于CSS你應(yīng)該知道的基礎(chǔ)知識 - 盒模型篇

    摘要：瀏覽器渲染引擎通過盒模型的方式來布局元素。應(yīng)用后元素的外邊框增加了寬度。應(yīng)用后元素內(nèi)的內(nèi)容和邊框之間產(chǎn)生了相應(yīng)的空間。上面的代碼在中的計(jì)算結(jié)果如下上栗中，我們將盒子四個(gè)方向的都設(shè)置成了。關(guān)于盒模型的高度，可以通過屬性來設(shè)置。 瀏覽器渲染引擎通過盒模型的方式來布局html元素。我們可以將每一個(gè)html元素都看做是一個(gè)盒子，每一個(gè)盒子都有長和款，多個(gè)這樣的盒子組成了我們的網(wǎng)頁。 Margi...

    OnlyLing 評論0 收藏0

  • 關(guān)于CSS你應(yīng)該知道的基礎(chǔ)知識 - 盒模型篇

    摘要：瀏覽器渲染引擎通過盒模型的方式來布局元素。應(yīng)用后元素的外邊框增加了寬度。應(yīng)用后元素內(nèi)的內(nèi)容和邊框之間產(chǎn)生了相應(yīng)的空間。上面的代碼在中的計(jì)算結(jié)果如下上栗中，我們將盒子四個(gè)方向的都設(shè)置成了。關(guān)于盒模型的高度，可以通過屬性來設(shè)置。 瀏覽器渲染引擎通過盒模型的方式來布局html元素。我們可以將每一個(gè)html元素都看做是一個(gè)盒子，每一個(gè)盒子都有長和款，多個(gè)這樣的盒子組成了我們的網(wǎng)頁。 Margi...

    Jrain 評論0 收藏0

  • HTML+CSS復(fù)習(xí)之CSS基礎(chǔ)篇

    摘要：內(nèi)容簡述關(guān)于，確實(shí)太繁雜了，內(nèi)容多。寫好不易，基本上就這個(gè)調(diào)了。里面有許多屬性是可以繼承的，注意了，繼承一定是繼承父級元素的樣式在這里我就列出可以繼承的屬性，和不能繼承的屬性啦不可繼承的和。內(nèi)聯(lián)元素可繼承。每個(gè)瀏覽器可能表現(xiàn)不一樣。 內(nèi)容簡述 關(guān)于CSS，確實(shí)太繁雜了，內(nèi)容多。寫好不易，基本上就這個(gè)調(diào)了。大家肯定聽過CSS奇淫技巧吧，關(guān)于這個(gè)我還沒有去深入了解，只是說普通的效果啥的，我...

    Salamander 評論0 收藏0

  • [譯]148個(gè)資源讓你成為CSS專家

    摘要：層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關(guān)于基礎(chǔ)特性，一份關(guān)于布局。核心第一篇一份來自的基礎(chǔ)參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎(chǔ)指南，包含使用的好處介紹個(gè)方法快速寫成高質(zhì)量的寫出高效的一些提示。 迄今為止，我已經(jīng)收集了100多個(gè)精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設(shè)計(jì)脫穎而出。 CSS3 資源 20個(gè)學(xué)習(xí)CSS3的有用資源 C...

    impig33 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<