可以在css中使用變量嗎

這篇文章將為大家詳細(xì)講解有關(guān)可以在css中使用變量嗎，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識(shí)有一定的了解。

從策劃到設(shè)計(jì)制作，每一步都追求做到細(xì)膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、網(wǎng)頁設(shè)計(jì)、域名與空間、雅安服務(wù)器托管、網(wǎng)絡(luò)營銷、VI設(shè)計(jì)、 網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進(jìn)步。

CSS 變量當(dāng)前有兩種形式：

• 變量，就是擁有合法標(biāo)識(shí)符和合法的值。可以被使用在任意的地方。可以使用var()函數(shù)使用變量。例如：var(--example-variable)會(huì)返回--example-variable所對應(yīng)的值

• 自定義屬性。這些屬性使用--*where*的特殊格式作為名字。例如--example-variable: 20px;即使一個(gè)css聲明語句。意思是將20px賦值給--example-varibale變量。

在使用CSS變量的時(shí)候, 應(yīng)該知道的三個(gè)主要內(nèi)容

• 自定義屬性

• var()函數(shù)

• :root偽類

1、自定義屬性

我們可以將重復(fù)使用的屬性定義成自定義屬性, 這樣在以后需要修改的時(shí)候, 只需要修改自定義屬性里的屬性值就可以了.

:root {
　　--textColor: #444;
}

上面的代碼就是自定義屬性的寫法, 需要注意的是, 自定義屬性以 -- 開頭

3、var()函數(shù)

我們需要使用var()函數(shù)來讀取變量, 否則瀏覽器不知道你的自定義屬性是啥東東.

var()函數(shù)還可以指定第二個(gè)屬性, 表示屬性的默認(rèn)值

p {
　　color: var(--textColor);
}

要設(shè)置p標(biāo)簽的字體顏色, 可以像上面代碼那樣寫

它跟 p { color: #444; } 這樣是一樣的

3、root偽類

在說:root偽類之前, 要先說一下CSS自定義屬性的作用域問題

同一個(gè)CSS自定義屬性, 可以在多個(gè)選擇器中聲明, 讀取的時(shí)候, 優(yōu)先級最高的屬性生效.

body {
　　--bgColor: red;
}
.content {
　　--textColor: blue;
}

上面的代碼, -bgColor的作用域是body, --textColor的作用域是.content 由于這個(gè)原因,  最好把自定義屬性放在根元素:root里面, 這樣的話能保證任何選擇器都能讀取他們.

關(guān)于可以在css中使用變量嗎就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享題目：可以在css中使用變量嗎
瀏覽路徑：http://m.kartarina.com/article16/piphdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、云服務(wù)器、外貿(mào)建站、Google、電子商務(wù)、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)