站長(zhǎng)資訊網(wǎng)
css里面能用var變量；可以利用var()函數(shù)來(lái)插入css變量的值，css變量可以訪問(wèn)DOM，也可以利用該函數(shù)來(lái)讀取變量，語(yǔ)法為“var(變量名, value)”，第二個(gè)參數(shù)的值可用于表示變量的默認(rèn)值。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。
css里面能用var變量嗎
var() 函數(shù)用于插入自定義的屬性值，如果一個(gè)屬性值在多處被使用，該方法就很有用。
var() 函數(shù)用于插入 CSS 變量的值。
CSS 變量可以訪問(wèn) DOM，這意味著您可以創(chuàng)建具有局部或全局范圍的變量，使用 JavaScript 來(lái)修改變量，以及基于媒體查詢來(lái)修改變量。
使用 CSS 變量的一種好方法涉及設(shè)計(jì)的顏色。您可以將它們放在變量中，而不必一遍又一遍地復(fù)制和粘貼相同的顏色。
var() 函數(shù)的語(yǔ)法如下：
var(name, value)
name 必需。變量名（以兩條破折號(hào)開(kāi)頭）。
value 可選。回退值（在未找到變量時(shí)使用）。
var() 如何工作
首先：CSS 變量可以有全局或局部作用域。
全局變量可以在整個(gè)文檔中進(jìn)行訪問(wèn)/使用，而局部變量只能在聲明它的選擇器內(nèi)部使用。
如需創(chuàng)建具有全局作用域的變量，請(qǐng)?jiān)?:root 選擇器中聲明它。 :root 選擇器匹配文檔的根元素。
如需創(chuàng)建具有局部作用域的變量，請(qǐng)?jiān)趯⒁褂盟倪x擇器中聲明它。
下面的例子與上面的例子相同，但是在這里我們使用 var() 函數(shù)。
首先，我們聲明兩個(gè)全局變量（–blue 和 –white）。然后，我們使用 var() 函數(shù)稍后在樣式表中插入變量的值：
實(shí)例
<!DOCTYPE html> <html> <head> <style> :root { --blue: #1e90ff; --white: #ffffff; } body { background-color: var(--blue); } h2 { border-bottom: 2px solid var(--blue); } .container { color: var(--blue); background-color: var(--white); padding: 15px; } button { background-color: var(--white); color: var(--blue); border: 1px solid var(--blue); padding: 5px; } </style> </head> <body> <h1>使用 var() 函數(shù)</h1> <div class="container"> <h2>Welcome to Shanghai!</h2> <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p> <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p> <p> <button>Yes</button> <button>No</button> </p> </div> </body> </html>
輸出結(jié)果：
（學(xué)習(xí)視頻分享：css視頻教程）
