css可以使用變數嗎-css教學-PHP中文網

css可以使用變數。在css中，變數是由CSS作者定義的實體，其中包含要在整個文件中重複使用的特定值；使用自訂屬性來設定變數名，並使用var()函數來讀取。

css可以使用變數嗎

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

CSS 變數目前有兩種形式：

變量，就是擁有合法識別碼和合法的值。可以被使用在任意的地方。可以使用var()函數使用變數。例如：var(--example-variable)會傳回--example-variable所對應的值
自訂屬性。這些屬性使用--*where*的特殊格式作為名字。例如--example-variable: 20px;即使一個css宣告語句。意思是將20px賦值給--example-varibale變數。

在使用CSS變數的時候, 應該知道的三個主要內容

#1、自訂屬性

#我們可以將重複使用的屬性定義成自訂屬性, 這樣在以後需要修改的時候, 只需要修改自訂屬性裡的屬性值就可以了.

:root { 　　--textColor: #444; }

登入後複製

上面的程式碼就是自訂屬性的寫法, 需要注意的是, 自訂屬性以-- 開頭

3、var()函數

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

var()函數還可以指定第二個屬性, 表示屬性的預設值

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

登入後複製

要設定p標籤的字體顏色, 可以像上面程式碼一樣寫

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

3 、root偽類別

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

同一個CSS自訂屬性, 可以在多個選擇器中宣告, 讀取的時候, 優先權最高的屬性生效.

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

登入後複製

上面的程式碼, -bgColor的作用域是body, --textColor的作用域是.content 由於這個原因, 最好把自訂屬性放在根元素:root裡面, 這樣的話能保證任何選擇器都能讀取他們.

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

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

php8，我來也