摘要:中的繼承實(shí)際上是父級(jí)元素對子元素的影響。特殊的通用屬性值為處理繼承提供了四種特殊的通用屬性值,其值如下值意義繼承的值。如果使用的屬性為繼承屬性,則將其視為,否則則視為。
繼承作者:陳大魚頭
github: KRISACHAN
繼承(英語:inheritance) 是面向?qū)ο筌浖夹g(shù)當(dāng)中的一個(gè)概念。在 CSS 中與 層疊(英語:Cascade) 一起描述了如何設(shè)置樣式規(guī)則,并為所有元素的所有屬性賦值。這兩個(gè)屬性同屬規(guī)范 “ CSS Cascading and Inheritance Level ”。CSS中的 繼承 實(shí)際上是父級(jí)元素對子元素的影響。
在之前的文章中,我們介紹過 層疊(優(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è)元素的 屬性里 | 1 | 0 | 0 | 0 | 1000 |
魚頭注:有很多人會(huì)認(rèn)為 !important 也參與了優(yōu)先級(jí)的排列,但 !important 是在優(yōu)先級(jí)的規(guī)則之外的,如果參與了優(yōu)先級(jí)的排列,意思就是 !important 是可以被覆蓋的,但事實(shí)顯然不是。
接下來我們談?wù)?CSS中的繼承。
特殊的通用屬性值CSS為處理繼承提供了四種特殊的通用屬性值,其值如下:
值 | 意義 |
---|---|
inherit | 繼承的值。 |
initial | 屬性初始值。 |
unset | 如果使用 unset 的屬性為繼承屬性,則將其視為 inerit,否則則視為 initial。 |
revert | 屬性值被設(shè)置成自定義樣式所定義的屬性(如果被設(shè)置), 否則屬性值被設(shè)置成用戶代理的默認(rèn)樣式。 |
在這里分享一個(gè)CSS屬性all。CSS all 簡寫屬性 將除卻 unicode-bidi 與 direction 之外的所有屬性重設(shè)至其初始值,或繼承值。 all 的值可以如下:
/* Global values */
all: initial
all: inherit
all: unset
/* CSS Cascading and Inheritance Level 4 */
all: revert;
以上四值的功能如上面的表一樣。這里我們重點(diǎn)分享一下 revert。revert關(guān)鍵字指定依賴于CSS聲明的源:
用戶代理源(user-agent origin):瀏覽器會(huì)有一個(gè) 基本的樣式表 來給任何網(wǎng)頁設(shè)置默認(rèn)樣式,這些樣式統(tǒng)稱用戶代理樣式,等同于 unset。
用戶源(user origin):網(wǎng)站的用戶(或讀者)所選擇的自定義樣式,主要是根據(jù)用戶的一員定制(例如用戶自定義的系統(tǒng)主題與字體)。
作者源(author origin):網(wǎng)站開發(fā)者定義的樣式。
例子如下:
<style>
body {
color: #404040;
background: #DDDDDD;
}
blockquote {
border-radius: 5px;
padding: 15px;
background: #0F60B6;
color: #FFFFFF;
display: table;
}
.all-unset {
all: unset;
}
.all-initial {
all: initial;
}
.all-inherit {
all: inherit;
}
style>
<h1 aria-level="1">雞湯大全h1>
<section aria-level="2">
<h2 role="heading">名言警句h2>
<blockquote cite="https://www.juzimi.com/album/3903593">
人若志趣不遠(yuǎn),心不在焉,雖學(xué)不成。
<cite>— 張載cite>
blockquote>
section>
<section aria-level="2">
<h2 role="heading">名言警句(all: unset)h2>
<blockquote class="all-unset" cite="https://www.juzimi.com/album/3903593">
人若志趣不遠(yuǎn),心不在焉,雖學(xué)不成。
<cite>— 張載cite>
blockquote>
section>
<section aria-level="2">
<h2 role="heading">名言警句(all: initial)h2>
<blockquote class="all-initial" cite="https://www.juzimi.com/album/3903593">
人若志趣不遠(yuǎn),心不在焉,雖學(xué)不成。
<cite>— 張載cite>
blockquote>
section>
<section aria-level="2">
<h2 role="heading">名言警句(all: inherit)h2>
<blockquote class="all-inherit" cite="https://www.juzimi.com/album/3903593">
人若志趣不遠(yuǎn),心不在焉,雖學(xué)不成。
<cite>— 張載cite>
blockquote>
section>
效果如下:
代碼在我codepen (codepen.io/krischan77/…) 中,大家可以隨時(shí)查看。
魚頭注:至于CSS中可繼承的屬性有點(diǎn)多,我就不列出來了,各位有興趣的可以看看這個(gè)問題:stackoverflow.com/questions/5… 。
計(jì)算值(Computed Value)計(jì)算值(Computed Value) 是解析指定屬性值的結(jié)果,通過將其絕對化用以繼承。
計(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)開鏈接嘗試一下:krissarea.gitee.io/blog/css/un…。
功能表示法(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( <custom-property-name> , <declaration-value>");
方法的第一個(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)度條功能,效果如下:
<style>
* {
margin: 0;
padding: 0;
}
.progress {
height: 20px;
width: 300px;
background-color: #f5f5f5;
}
.progress::before {
counter-reset: progress var(--percent, 0);
content: counter(progress) "%2002";
display: block;
height: 20px;
line-height: 20px;
width: calc(300px * var(--percent, 0) / 100);
font-size: 12px;
color: #fff;
background-color: #2486ff;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
style>
<div id="progress" class="progress">div>
<script>
"use strict";
let count = 0;
const progressAdd = count => {
if (count < 100) {
count++;
progress.style = `--percent: ${count}`;
setTimeout(() => {
progressAdd(count);
}, 100);
};
};
progressAdd(count);
script>
代碼在我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如下:
<style>
html,
body {
color: #000000;
}
.box {
width: 100px;
height: 100px;
background: currentColor;
padding: 10px;
}
style>
<div id="box" class="box">div>
你想換的顏色:<input id="color" name="color" type="color" value="#000000" autocomplete="off">
<script>
"use strict";
color.onchange = event => {
document.querySelector("body").style.color = color.value;
};
script>
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 的耦合度,對我們的開發(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ì)非常感謝的;如果通過文章有任何想法或疑問,也希望各位能積極留言,我們互相探討;如果通過本系列文章有所收獲,這就讓魚頭我喜不自勝了!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/7350.html
摘要:中的繼承實(shí)際上是父級(jí)元素對子元素的影響。如果使用的屬性為繼承屬性,則將其視為,否則則視為。張載名言警句人若志趣不遠(yuǎn),心不在焉,雖學(xué)不成。張載效果如下代碼在我中,大家可以隨時(shí)查看。 作者:陳大魚頭 github: KRISACHAN 繼承 繼承(英語:inheritance) 是面向?qū)ο筌浖夹g(shù)當(dāng)中的一個(gè)概念。在 CSS 中與 層疊(英語:Cascade) 一起描述了如何設(shè)置樣...
摘要:原文發(fā)表于以太坊智能合約開發(fā)第七篇智能合約與網(wǎng)頁交互上一篇中,我們通過開發(fā)框架快速編譯部署了合約。智能合約與網(wǎng)頁交互啟動(dòng)腳本修改完了之后,就需要與網(wǎng)頁進(jìn)行整合。 原文發(fā)表于:以太坊智能合約開發(fā)第七篇:智能合約與網(wǎng)頁交互 上一篇中,我們通過truffle開發(fā)框架快速編譯部署了合約。本篇,我們將來介紹網(wǎng)頁如何與智能合約進(jìn)行交互。 編寫網(wǎng)頁 首先我們需要編寫一個(gè)網(wǎng)頁。打開 smartcon...
摘要:精確控制表格列寬請注意,為了確保這個(gè)技巧奏效,需要為這些表格元素指定一個(gè)寬度哪怕是。同樣,為了讓發(fā)揮作用,我們還需要為那一列指定寬度。 自適應(yīng)內(nèi)部元素 figure{ max-width: 300px; max-width: min-content;//這個(gè)關(guān)鍵字將解析為這個(gè)容器內(nèi)部最大的不可斷行元素的寬度( 即最寬的單詞、 圖片或具有固定寬度的盒元素。 mar...
摘要:函數(shù)內(nèi)置不可變,在函數(shù)體內(nèi)整個(gè)執(zhí)行環(huán)境中為常量。這兩個(gè)方法的用途都是在特定的作用域中調(diào)用函數(shù),實(shí)際上等于設(shè)置函數(shù)體內(nèi)的對象的值。控制表單控件的禁用狀態(tài)。生成相對定位的元素,相對于其在普通流中的位置進(jìn)行定位。 Javasript 1.請定義一個(gè)方法,傳入一個(gè)string類型的參數(shù),然后將string的每個(gè)字符間加個(gè)空格返回 spacify(hello world) // => h e l...
摘要:函數(shù)內(nèi)置不可變,在函數(shù)體內(nèi)整個(gè)執(zhí)行環(huán)境中為常量。這兩個(gè)方法的用途都是在特定的作用域中調(diào)用函數(shù),實(shí)際上等于設(shè)置函數(shù)體內(nèi)的對象的值。控制表單控件的禁用狀態(tài)。生成相對定位的元素,相對于其在普通流中的位置進(jìn)行定位。 Javasript 1.請定義一個(gè)方法,傳入一個(gè)string類型的參數(shù),然后將string的每個(gè)字符間加個(gè)空格返回 spacify(hello world) // => h e l...
閱讀 3448·2021-10-14 09:42
閱讀 2738·2021-09-08 10:44
閱讀 1313·2021-09-02 10:18
閱讀 3628·2021-08-30 09:43
閱讀 2808·2021-07-29 13:49
閱讀 3730·2019-08-29 17:02
閱讀 1589·2019-08-29 15:09
閱讀 1042·2019-08-29 11:01