資訊專欄INFORMATION COLUMN
摘要：中的繼承實(shí)際上是父級(jí)元素對(duì)子元素的影響。如果使用的屬性為繼承屬性，則將其視為，否則則視為。張載名言警句人若志趣不遠(yuǎn)，心不在焉，雖學(xué)不成。張載效果如下代碼在我中，大家可以隨時(shí)查看。
繼承作者：陳大魚頭
github： KRISACHAN
繼承（英語：inheritance） 是面向?qū)ο筌浖夹g(shù)當(dāng)中的一個(gè)概念。在 CSS 中與 層疊（英語：Cascade） 一起描述了如何設(shè)置樣式規(guī)則，并為所有元素的所有屬性賦值。這兩個(gè)屬性同屬規(guī)范 “ CSS Cascading and Inheritance Level ”。CSS中的 繼承 實(shí)際上是父級(jí)元素對(duì)子元素的影響。
在之前的文章中，我們介紹過 層疊（優(yōu)先級(jí)） 的規(guī)則，這里我們先復(fù)習(xí)一下：
| 選擇器 | 千位 | 百位 | 十位 | 個(gè)位 | 合計(jì)值 |
|---|---|---|---|---|---|
| h1 | 0 | 0 | 0 | 1 | 0001 |
| #indentifier | 0 | 1 | 0 | 0 | 0100 |
| h1 + p::first-letter | 0 | 0 | 0 | 3 | 0003 |
| li > a[href*="zh-CN"] > .inline-warning | 0 | 0 | 2 | 2 | 0022 |
沒有選擇器, 規(guī)則在一個(gè)元素的
雞湯大全名言警句人若志趣不遠(yuǎn)，心不在焉，雖學(xué)不成。 — 張載 名言警句（all: unset）人若志趣不遠(yuǎn)，心不在焉，雖學(xué)不成。 — 張載 名言警句（all: initial）人若志趣不遠(yuǎn)，心不在焉，雖學(xué)不成。 — 張載 名言警句（all: inherit）人若志趣不遠(yuǎn)，心不在焉，雖學(xué)不成。 — 張載 效果如下： 代碼在我codepen (https://codepen.io/krischan77... 中，大家可以隨時(shí)查看。 魚頭注：至于CSS中可繼承的屬性有點(diǎn)多，我就不列出來了，各位有興趣的可以看看這個(gè)問題：https://stackoverflow.com/questions/5612302/which-css-properties-are-inherited 。 計(jì)算值（Computed Value）計(jì)算值（Computed Value） 是解析指定屬性值的結(jié)果，通過將其絕對(duì)化用以繼承。 計(jì)算值（Computed Value） 用以繼承時(shí)是由父節(jié)點(diǎn)傳達(dá)到子節(jié)點(diǎn)的值，由于歷史原因，它不一定是由 getComputedStyle() 返回的結(jié)果。 常見的計(jì)算值（Computed Value） 有：em、ex、vh、vw、smaller、bolder等不固定具體px尺寸的值。 下面是一個(gè)不同計(jì)算值單位下盒子的寬度變化的DEMO 代碼有點(diǎn)長，就不貼出來了，有興趣可以點(diǎn)開鏈接嘗試一下：https://krissarea.gitee.io/bl...。 功能表示法（Functional Notations）功能表示法是一種組件值，可以表示更復(fù)雜的類型或調(diào)用特殊處理。主要分有以下三個(gè)部分： 數(shù)學(xué)表達(dá)式（用以四則運(yùn)算）：calc()、 min()、max()和clamp()。 切換值（允許子元素循環(huán)調(diào)用傳入?yún)?shù)）：toggle()。 屬性引用（獲取引用的屬性）：attr()。 以上功能屬性，在之前的章節(jié)中也提到過，目前能用的就只有 calc() 跟 attr()，但是即便如此，這兩個(gè)函數(shù)已經(jīng)卻也已經(jīng)發(fā)揮出了很強(qiáng)大的功能。 var()var() 是 CSS Custom Properties for Cascading Variables Module Level 1 的內(nèi)容，中文名叫 自定義屬性，并不叫CSS變量，并不叫CSS變量，并不叫CSS變量，重要的內(nèi)容說三次。 語法如下： var( 方法的第一個(gè)參數(shù)是要替換的自定義屬性的名稱。函數(shù)的可選第二個(gè)參數(shù)用作回退值。如果第一個(gè)參數(shù)引用的自定義屬性無效，則該函數(shù)將使用第二個(gè)值。 我們可以在任何選擇器中聲明，例子如下： // 下面的定義都是有效的
:root {
--color: red;
}
@media (min-width: 300px) {
:root {
--color: blue;
}
}
.color {
--color: white;
}
a {
color: var(--color, black);
}
從上面的代碼我們可以知道，自定義屬性不僅僅可以在全局作用域下定義，甚至也可以在局部作用域下定義，這點(diǎn)是一些 CSS處理器 所無法實(shí)現(xiàn)的。 我們知道，CSS目前還沒有條件判斷的功能，但是我們藉由數(shù)學(xué)表達(dá)式函數(shù) calc() 也可以實(shí)現(xiàn)很多有趣的功能。 這里我們分享一個(gè)由 var() 跟 calc() 實(shí)現(xiàn)的進(jìn)度條功能，效果如下： 代碼在我codepen: https://codepen.io/krischan77/pen/QPezjB中，各位隨時(shí)可以去看效果。 currentColor關(guān)鍵字 currentColor 是屬性 color 的值，如果 color 上設(shè)置 currentColor ，則將其視為 color: inherit。 border 和 box-shadow 默認(rèn)的顏色就是當(dāng)前的文字顏色，也就是類似 currentColor。 嗯，所以有什么用？ 我們可以通過 currentColor 來輕松實(shí)現(xiàn)換膚功能。DEMO如下： 你想換的顏色： currentColor 是 CSS3 中非常好用的一個(gè)關(guān)鍵字，利用它我們就可以輕松實(shí)現(xiàn)文本顏色與圖形之間的互動(dòng)。 說到這里，不知道大家有沒有覺得很奇怪， 像 multi-word 這種具有連字符的單詞才是 CSS 中的常規(guī)命名，而 currentColor 確是駝峰命名？如果你知道答案的話，可以在下方留言區(qū)域留言回答，不知道的話也沒關(guān)系，可以持續(xù)關(guān)注魚頭的 『Hello CSS』，魚頭會(huì)在下一篇文章中解答。 后記本文主要簡單分享了 CSS 的繼承與可變性，同時(shí)也再次地回顧了之前系列中所分享過的層級(jí)，函數(shù)等內(nèi)容，一方面是想做個(gè)整理歸納，如果 CSS 屬性分配得恰當(dāng)，不僅可以減輕我們很多的工作量，也可以輕松實(shí)現(xiàn)一些比較有趣的效果，更重要是可以減少JS 與 CSS 的耦合度，對(duì)我們的開發(fā)與后期維護(hù)也是有很大幫助的。 大家也不妨多挖掘挖掘 CSS 的潛在能力，這也許會(huì)帶來意想不到的收獲。 參考資料：CSS Cascading and Inheritance Level 4 CSS Values and Units Module Level 4 Origin of CSS declarations 【Hello CSS】系列【Hello CSS】是以CSS基礎(chǔ)概念為主題的系列文章，旨在幫助大家更深刻地了解并且提高CSS在各位開發(fā)者心目中的地位。由于魚頭我水平有限，文筆有限，如果各位在文章中發(fā)現(xiàn)有任何不合理，不正確的地方，還煩不吝指出，我會(huì)非常感謝的；如果通過文章有任何想法或疑問，也希望各位能積極留言，我們互相探討；如果通過本系列文章有所收獲，這就讓魚頭我喜不自勝了！ 如果你也喜歡 CSS，喜歡探討技術(shù)，或者對(duì)本文，本系列有任何的意見或建議，你可以掃描下方二維碼，關(guān)注微信公眾號(hào)“ 魚頭的Web海洋 ”，隨時(shí)與魚頭互動(dòng)。歡迎！衷心希望可以遇見你。 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115005.html 相關(guān)文章
發(fā)表評(píng)論0條評(píng)論
wangtdgoodluck男|高級(jí)講師TA的文章閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
|
