溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“css里能不能用var變量”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css里能不能用var變量”吧!
css里面能用var變量；可以利用var()函數來插入css變量的值，css變量可以訪問DOM，也可以利用該函數來讀取變量，語法為“var(變量名, value)”，第二個參數的值可用于表示變量的默認值。
本教程操作環境：windows10系統、CSS3&&HTML5版本、Dell G3電腦。
var() 函數用于插入自定義的屬性值，如果一個屬性值在多處被使用，該方法就很有用。
var() 函數用于插入 CSS 變量的值。
CSS 變量可以訪問 DOM，這意味著您可以創建具有局部或全局范圍的變量，使用 JavaScript 來修改變量，以及基于媒體查詢來修改變量。
使用 CSS 變量的一種好方法涉及設計的顏色。您可以將它們放在變量中，而不必一遍又一遍地復制和粘貼相同的顏色。
var() 函數的語法如下：
var(name, value)
name 必需。變量名（以兩條破折號開頭）。
value 可選。回退值（在未找到變量時使用）。
var() 如何工作
首先：CSS 變量可以有全局或局部作用域。
全局變量可以在整個文檔中進行訪問/使用，而局部變量只能在聲明它的選擇器內部使用。
如需創建具有全局作用域的變量，請在 :root 選擇器中聲明它。 :root 選擇器匹配文檔的根元素。
如需創建具有局部作用域的變量，請在將要使用它的選擇器中聲明它。
下面的例子與上面的例子相同，但是在這里我們使用 var() 函數。
首先，我們聲明兩個全局變量（--blue 和 --white）。然后，我們使用 var() 函數稍后在樣式表中插入變量的值：
實例
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h3 {
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>
<h2>使用 var() 函數</h2>
<div class="container">
<h3>Welcome to Shanghai!</h3>
<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>輸出結果：
到此，相信大家對“css里能不能用var變量”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
