摘要:中的繼承實際上是父級元素對子元素的影響。特殊的通用屬性值為處理繼承提供了四種特殊的通用屬性值,其值如下值意義繼承的值。如果使用的屬性為繼承屬性,則將其視為,否則則視為。
繼承作者:陳大魚頭
github: KRISACHAN
繼承(英語:inheritance) 是面向對象軟件技術當中的一個概念。在 CSS 中與 層疊(英語:Cascade) 一起描述了如何設置樣式規則,并為所有元素的所有屬性賦值。這兩個屬性同屬規范 “ CSS Cascading and Inheritance Level ”。CSS中的 繼承 實際上是父級元素對子元素的影響。
在之前的文章中,我們介紹過 層疊(優先級) 的規則,這里我們先復習一下:
選擇器 | 千位 | 百位 | 十位 | 個位 | 合計值 |
---|---|---|---|---|---|
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 |
沒有選擇器, 規則在一個元素的 屬性里 | 1 | 0 | 0 | 0 | 1000 |
魚頭注:有很多人會認為 !important 也參與了優先級的排列,但 !important 是在優先級的規則之外的,如果參與了優先級的排列,意思就是 !important 是可以被覆蓋的,但事實顯然不是。
接下來我們談談 CSS中的繼承。
特殊的通用屬性值CSS為處理繼承提供了四種特殊的通用屬性值,其值如下:
值 | 意義 |
---|---|
inherit | 繼承的值。 |
initial | 屬性初始值。 |
unset | 如果使用 unset 的屬性為繼承屬性,則將其視為 inerit,否則則視為 initial。 |
revert | 屬性值被設置成自定義樣式所定義的屬性(如果被設置), 否則屬性值被設置成用戶代理的默認樣式。 |
在這里分享一個CSS屬性all。CSS all 簡寫屬性 將除卻 unicode-bidi 與 direction 之外的所有屬性重設至其初始值,或繼承值。 all 的值可以如下:
/* Global values */
all: initial
all: inherit
all: unset
/* CSS Cascading and Inheritance Level 4 */
all: revert;
以上四值的功能如上面的表一樣。這里我們重點分享一下 revert。revert關鍵字指定依賴于CSS聲明的源:
用戶代理源(user-agent origin):瀏覽器會有一個 基本的樣式表 來給任何網頁設置默認樣式,這些樣式統稱用戶代理樣式,等同于 unset。
用戶源(user origin):網站的用戶(或讀者)所選擇的自定義樣式,主要是根據用戶的一員定制(例如用戶自定義的系統主題與字體)。
作者源(author origin):網站開發者定義的樣式。
例子如下:
<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">
人若志趣不遠,心不在焉,雖學不成。
<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">
人若志趣不遠,心不在焉,雖學不成。
<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">
人若志趣不遠,心不在焉,雖學不成。
<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">
人若志趣不遠,心不在焉,雖學不成。
<cite>— 張載cite>
blockquote>
section>
效果如下:
代碼在我codepen (codepen.io/krischan77/…) 中,大家可以隨時查看。
魚頭注:至于CSS中可繼承的屬性有點多,我就不列出來了,各位有興趣的可以看看這個問題:stackoverflow.com/questions/5… 。
計算值(Computed Value)計算值(Computed Value) 是解析指定屬性值的結果,通過將其絕對化用以繼承。
計算值(Computed Value) 用以繼承時是由父節點傳達到子節點的值,由于歷史原因,它不一定是由 getComputedStyle() 返回的結果。
常見的計算值(Computed Value) 有:em、ex、vh、vw、smaller、bolder等不固定具體px尺寸的值。
下面是一個不同計算值單位下盒子的寬度變化的DEMO
代碼有點長,就不貼出來了,有興趣可以點開鏈接嘗試一下:krissarea.gitee.io/blog/css/un…。
功能表示法(Functional Notations)
功能表示法是一種組件值,可以表示更復雜的類型或調用特殊處理。主要分有以下三個部分:
數學表達式(用以四則運算):calc()、 min()、max()和clamp()。
切換值(允許子元素循環調用傳入參數):toggle()。
屬性引用(獲取引用的屬性):attr()。
以上功能屬性,在之前的章節中也提到過,目前能用的就只有 calc() 跟 attr(),但是即便如此,這兩個函數已經卻也已經發揮出了很強大的功能。
var()var() 是 CSS Custom Properties for Cascading Variables Module Level 1 的內容,中文名叫 自定義屬性,并不叫CSS變量,并不叫CSS變量,并不叫CSS變量,重要的內容說三次。
語法如下:
var( <custom-property-name> , <declaration-value>");
方法的第一個參數是要替換的自定義屬性的名稱。函數的可選第二個參數用作回退值。如果第一個參數引用的自定義屬性無效,則該函數將使用第二個值。
我們可以在任何選擇器中聲明,例子如下:
// 下面的定義都是有效的 :root { --color: red; } @media (min-width: 300px) { :root { --color: blue; } } .color { --color: white; } a { color: var(--color, black); }
從上面的代碼我們可以知道,自定義屬性不僅僅可以在全局作用域下定義,甚至也可以在局部作用域下定義,這點是一些 CSS處理器 所無法實現的。
我們知道,CSS目前還沒有條件判斷的功能,但是我們藉由數學表達式函數 calc() 也可以實現很多有趣的功能。
這里我們分享一個由 var() 跟 calc() 實現的進度條功能,效果如下:
<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中,各位隨時可以去看效果。
currentColor關鍵字 currentColor 是屬性 color 的值,如果 color 上設置 currentColor ,則將其視為 color: inherit。
border 和 box-shadow 默認的顏色就是當前的文字顏色,也就是類似 currentColor。
嗯,所以有什么用?
我們可以通過 currentColor 來輕松實現換膚功能。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 中非常好用的一個關鍵字,利用它我們就可以輕松實現文本顏色與圖形之間的互動。
說到這里,不知道大家有沒有覺得很奇怪, 像 multi-word 這種具有連字符的單詞才是 CSS 中的常規命名,而 currentColor 確是駝峰命名?如果你知道答案的話,可以在下方留言區域留言回答,不知道的話也沒關系,可以持續關注魚頭的 『Hello CSS』,魚頭會在下一篇文章中解答。
后記本文主要簡單分享了 CSS 的繼承與可變性,同時也再次地回顧了之前系列中所分享過的層級,函數等內容,一方面是想做個整理歸納,如果 CSS 屬性分配得恰當,不僅可以減輕我們很多的工作量,也可以輕松實現一些比較有趣的效果,更重要是可以減少JS 與 CSS 的耦合度,對我們的開發與后期維護也是有很大幫助的。
大家也不妨多挖掘挖掘 CSS 的潛在能力,這也許會帶來意想不到的收獲。
參考資料:CSS Cascading and Inheritance Level 4
CSS Values and Units Module Level 4
Origin of CSS declarations
【Hello CSS】系列【Hello CSS】是以CSS基礎概念為主題的系列文章,旨在幫助大家更深刻地了解并且提高CSS在各位開發者心目中的地位。由于魚頭我水平有限,文筆有限,如果各位在文章中發現有任何不合理,不正確的地方,還煩不吝指出,我會非常感謝的;如果通過文章有任何想法或疑問,也希望各位能積極留言,我們互相探討;如果通過本系列文章有所收獲,這就讓魚頭我喜不自勝了!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/7350.html
摘要:中的繼承實際上是父級元素對子元素的影響。如果使用的屬性為繼承屬性,則將其視為,否則則視為。張載名言警句人若志趣不遠,心不在焉,雖學不成。張載效果如下代碼在我中,大家可以隨時查看。 作者:陳大魚頭 github: KRISACHAN 繼承 繼承(英語:inheritance) 是面向對象軟件技術當中的一個概念。在 CSS 中與 層疊(英語:Cascade) 一起描述了如何設置樣...
摘要:原文發表于以太坊智能合約開發第七篇智能合約與網頁交互上一篇中,我們通過開發框架快速編譯部署了合約。智能合約與網頁交互啟動腳本修改完了之后,就需要與網頁進行整合。 原文發表于:以太坊智能合約開發第七篇:智能合約與網頁交互 上一篇中,我們通過truffle開發框架快速編譯部署了合約。本篇,我們將來介紹網頁如何與智能合約進行交互。 編寫網頁 首先我們需要編寫一個網頁。打開 smartcon...
摘要:精確控制表格列寬請注意,為了確保這個技巧奏效,需要為這些表格元素指定一個寬度哪怕是。同樣,為了讓發揮作用,我們還需要為那一列指定寬度。 自適應內部元素 figure{ max-width: 300px; max-width: min-content;//這個關鍵字將解析為這個容器內部最大的不可斷行元素的寬度( 即最寬的單詞、 圖片或具有固定寬度的盒元素。 mar...
摘要:函數內置不可變,在函數體內整個執行環境中為常量。這兩個方法的用途都是在特定的作用域中調用函數,實際上等于設置函數體內的對象的值。控制表單控件的禁用狀態。生成相對定位的元素,相對于其在普通流中的位置進行定位。 Javasript 1.請定義一個方法,傳入一個string類型的參數,然后將string的每個字符間加個空格返回 spacify(hello world) // => h e l...
摘要:函數內置不可變,在函數體內整個執行環境中為常量。這兩個方法的用途都是在特定的作用域中調用函數,實際上等于設置函數體內的對象的值。控制表單控件的禁用狀態。生成相對定位的元素,相對于其在普通流中的位置進行定位。 Javasript 1.請定義一個方法,傳入一個string類型的參數,然后將string的每個字符間加個空格返回 spacify(hello world) // => h e l...
閱讀 3431·2021-10-14 09:42
閱讀 2718·2021-09-08 10:44
閱讀 1300·2021-09-02 10:18
閱讀 3600·2021-08-30 09:43
閱讀 2794·2021-07-29 13:49
閱讀 3719·2019-08-29 17:02
閱讀 1576·2019-08-29 15:09
閱讀 1035·2019-08-29 11:01