資訊專欄INFORMATION COLUMN
摘要：我是紅色這種引用代碼的方式在一定程度上解決了所有代碼都分散寫在各個元素上的問題，但是不利于代碼的整體重用。需要詳盡選定該元素來設置具體的樣式。子元素會繼承父元素的樣式，等除外。
上一篇簡單總結了一下選擇器，如果一個元素被多個選擇器選中，元素的樣式就會以級聯方式被應用到。要搞清最終那個樣式被應用到元素上了，首先要明白引用CSS代碼的幾種方式。
CSS代碼引用方式如何應用CSS代碼到Html元素上，常見的有下面幾種方式
通過Html元素的style屬性來指定樣式
在Html頁面中直接添加style標簽
通過link標簽來引用外部css文件
sytle屬性想要修改一個元素，最簡單的方式就是修改它的style屬性，如下栗子：
我是紅色
這種方式給元素添加CSS代碼有一定的局限性，拋開瀏覽器解析渲染CSS樣式的性能不說，但從DRY原則來看就不太好。每次想修改同類型樣式的元素，要逐個修改元素的style屬性。
sytle標簽style標簽是Html的標準標簽，可以在里面直接寫CSS代碼。
我是紅色
這種引用CSS代碼的方式在一定程度上解決了所有CSS代碼都分散寫在各個元素上的問題，但是不利于CSS代碼的整體重用。如果某些class需要在多個Html文件中引用，需要將style標簽里的內容復制粘貼到各個Html中。
引用外部CSS文件通過link標簽來引用外部CSS文件。CSS文件可以位于和Html文件同一個服務器上，也可以是互聯網上任意的一個地址，例如CDN。
我是紅色
style.css
.red {
color: red;
}
這種方式我們可以做到CSS代碼的重用，但由于引用了外部文件，瀏覽器會額外發送一個http請求去加載CSS文件，性能上可能稍微會有一點影響，但以目前瀏覽器的性能，少量額外的http請求都是可以接受的。
CSS級聯樣式的應用回到開頭的問題，如果我有兩個選擇器都選中了某個元素，分別賦予這個元素不同的樣式，到底哪個選擇器中的樣式會被應用呢？看一下如下的栗子：
我是藍色
首先要知道，Html是從頭到未順序加載并解析的。無論是style標簽還是CSS外部文件引用都是如此。從例子中可以看到，div中的文字會變成藍色，即在CSS代碼中，在選擇器相同的情況下，靠后的CSS代碼樣式會覆蓋掉之前的樣式。
再看一個栗子：
我是藍色而且有下劃線
這個栗子中，盡管紅色字體選擇器更靠后但是由于前面的一個選擇器更詳盡的選中了div元素內的p元素，所以p里面的文字顏色為藍色，即更詳盡的選擇器樣式覆蓋掉了之前的樣式。而p選擇器里面還添加了文字下劃線樣式，這個樣式被繼承了下來，所以最后p元素的文字是藍色，并且有下劃線。
下面來看看使用類選擇器是什么效果。
我是藍色而且有下劃線
從代碼結果中可以清楚的看到，類選擇器較元素選擇器具有更高的優先級。再來看看id選擇器。
我是藍色而且有下劃線
因為id通常是唯一標識一個元素的，所以它的優先級又高于了此前兩種選擇器。
我是綠色而且有下劃線
最后發現，style屬性的優先級最高。所以我們可以通過JavaScript來動態的修改元素的style屬性值，如 display: none， 達到修改元素樣式的效果，而且不會受到之前任何選擇器樣式的影響。
CSS樣式繼承什么是CSS樣式繼承，直接上栗子。
我是藍色且18個像素
通過栗子發現，子元素child的文字顏色繼承自parent的樣式，通過Chrome的developer tools也可以清楚的看到。
關于繼承，還有一種情況是有些Html元素是不會繼承父元素樣式的，例如input。需要詳盡選定該元素來設置具體的樣式。這里就不一一舉例了，大家遇到樣式不是預期效果的情況，可以通過developer tools來查看到底哪個選擇器的樣式被應用到了。
總結CSS的代碼加載順序決定了后加載的樣式會覆蓋先加載的樣式。
最終元素的樣式會合并所有選中的樣式，高優先級的覆蓋低優先級的。
樣式覆蓋的優先級是 id > 詳盡選擇 > class > 元素。
style屬性具有最高的樣式優先級。
子元素會繼承父元素的樣式，input等除外。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52167.html
摘要：我是紅色這種引用代碼的方式在一定程度上解決了所有代碼都分散寫在各個元素上的問題，但是不利于代碼的整體重用。需要詳盡選定該元素來設置具體的樣式。子元素會繼承父元素的樣式，等除外。 上一篇簡單總結了一下選擇器，如果一個元素被多個選擇器選中，元素的樣式就會以級聯方式被應用到。要搞清最終那個樣式被應用到元素上了，首先要明白引用CSS代碼的幾種方式。 CSS代碼引用方式 如何應用CSS代碼到Ht...
摘要：瀏覽器渲染引擎通過盒模型的方式來布局元素。應用后元素的外邊框增加了寬度。應用后元素內的內容和邊框之間產生了相應的空間。上面的代碼在中的計算結果如下上栗中，我們將盒子四個方向的都設置成了。關于盒模型的高度，可以通過屬性來設置。 瀏覽器渲染引擎通過盒模型的方式來布局html元素。我們可以將每一個html元素都看做是一個盒子，每一個盒子都有長和款，多個這樣的盒子組成了我們的網頁。 Margi...
摘要：瀏覽器渲染引擎通過盒模型的方式來布局元素。應用后元素的外邊框增加了寬度。應用后元素內的內容和邊框之間產生了相應的空間。上面的代碼在中的計算結果如下上栗中，我們將盒子四個方向的都設置成了。關于盒模型的高度，可以通過屬性來設置。 瀏覽器渲染引擎通過盒模型的方式來布局html元素。我們可以將每一個html元素都看做是一個盒子，每一個盒子都有長和款，多個這樣的盒子組成了我們的網頁。 Margi...
摘要：內容簡述關于，確實太繁雜了，內容多。寫好不易，基本上就這個調了。里面有許多屬性是可以繼承的，注意了，繼承一定是繼承父級元素的樣式在這里我就列出可以繼承的屬性，和不能繼承的屬性啦不可繼承的和。內聯元素可繼承。每個瀏覽器可能表現不一樣。 內容簡述 關于CSS，確實太繁雜了，內容多。寫好不易，基本上就這個調了。大家肯定聽過CSS奇淫技巧吧，關于這個我還沒有去深入了解，只是說普通的效果啥的，我...
摘要：層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關于基礎特性，一份關于布局。核心第一篇一份來自的基礎參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎指南，包含使用的好處介紹個方法快速寫成高質量的寫出高效的一些提示。 迄今為止，我已經收集了100多個精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設計脫穎而出。 CSS3 資源 20個學習CSS3的有用資源 C...
閱讀 1200·2021-11-24 11:16
閱讀 3428·2021-11-15 11:38
閱讀 1920·2021-10-20 13:47
閱讀 546·2021-09-29 09:35
閱讀 2192·2021-09-22 15:17
閱讀 1013·2021-09-07 09:59
閱讀 3374·2019-08-30 13:21
閱讀 2904·2019-08-30 12:47
