在css中變數什麼

在css中，變數指的是自訂屬性，是擁有合法識別碼和合法的值，可以被使用在任意的地方。 CSS變數可以存取DOM，這意味著開發者可以建立具有局部或全域範圍的變量，使用JavaScript來修改變量，以及基於媒體查詢來修改變數。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS自訂屬性也稱為CSS變數。變數就是擁有合法識別碼和合法的值，可以被使用在任意的地方。透過var()函數使用變數。例如：var(--example)會傳回--example所對應的值。

var() 函數用來插入 CSS 變數的值。

CSS 變數可以存取 DOM，這表示您可以建立具有局部或全域範圍的變量，使用 JavaScript 來修改變量，以及基於媒體查詢來修改變數。

使用 CSS 變數的一種好方法涉及設計的顏色。您可以將它們放在變數中，而不必一遍又一遍地複製和貼上相同的顏色。

基本用法：

• 宣告一個局部變數：

element {
  --main-bg-color: brown;
}

• 使用一個局部變數：

element {
  background-color: var(--main-bg-color);
}

• 宣告一個全域CSS 變數：

:root {
  --global-color: #666;
  --pane-padding: 5px 42px;
}

• 使用一個全域CSS 變數：

.demo{
   color: var(--global-color);
}

補充

• #:root 是CSS偽類，符合文件樹的根元素。對於 HTML 來說，:root 表示 元素，除了優先權更高之外，與 html 選擇器相同。所以我們一般會把自訂屬性寫在:root{}裡面，html標籤裡面的元素就會繼承它。

• CSS 自訂屬性是可以級聯的：每一個自訂屬性可以多次出現，變數的值將會藉助級聯演算法和自訂屬性值運算出來。

• CSS 變數不支援 !important 聲明，注意只是聲明。

（學習影片分享：css影片教學）

以上是在css中變數什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！