這篇文章將為大家詳細講解有關可以在css中使用變量嗎,文章內容質量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關知識有一定的了解。
從策劃到設計制作,每一步都追求做到細膩,制作可持續(xù)發(fā)展的企業(yè)網站。為客戶提供網站建設、網站設計、網站策劃、網頁設計、域名與空間、雅安服務器托管、網絡營銷、VI設計、 網站改版、漏洞修補等服務。為客戶提供更好的一站式互聯(lián)網解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進步。
CSS 變量當前有兩種形式:
變量,就是擁有合法標識符和合法的值??梢员皇褂迷谌我獾牡胤?。可以使用var()函數(shù)使用變量。例如:var(--example-variable)會返回--example-variable所對應的值
自定義屬性。這些屬性使用--*where*的特殊格式作為名字。例如--example-variable: 20px;即使一個css聲明語句。意思是將20px賦值給--example-varibale變量。
在使用CSS變量的時候, 應該知道的三個主要內容
自定義屬性
var()函數(shù)
:root偽類
1、自定義屬性
我們可以將重復使用的屬性定義成自定義屬性, 這樣在以后需要修改的時候, 只需要修改自定義屬性里的屬性值就可以了.
:root { --textColor: #444; }
上面的代碼就是自定義屬性的寫法, 需要注意的是, 自定義屬性以 -- 開頭
3、var()函數(shù)
我們需要使用var()函數(shù)來讀取變量, 否則瀏覽器不知道你的自定義屬性是啥東東.
var()函數(shù)還可以指定第二個屬性, 表示屬性的默認值
p { color: var(--textColor); }
要設置p標簽的字體顏色, 可以像上面代碼那樣寫
它跟 p { color: #444; }
這樣是一樣的
3、root偽類
在說:root偽類之前, 要先說一下CSS自定義屬性的作用域問題
同一個CSS自定義屬性, 可以在多個選擇器中聲明, 讀取的時候, 優(yōu)先級最高的屬性生效.
body { --bgColor: red; } .content { --textColor: blue; }
上面的代碼, -bgColor的作用域是body, --textColor的作用域是.content 由于這個原因, 最好把自定義屬性放在根元素:root里面, 這樣的話能保證任何選擇器都能讀取他們.
關于可以在css中使用變量嗎就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
分享題目:可以在css中使用變量嗎
瀏覽路徑:http://muchs.cn/article16/piphdg.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供全網營銷推廣、云服務器、外貿建站、Google、電子商務、微信公眾號
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)