什麼是 Double-Dash CSS 屬性以及它們如何運作？-css教學-PHP中文網

什麼是 Double-Dash CSS 屬性以及它們如何運作？

Patricia Arquette

發布： 2024-11-26 14:53:10

原創

815 人瀏覽過

What are Double-Dash CSS Properties and How Do They Work?

探索神秘的雙破折號CSS 屬性

您可能遇到過一種特殊的CSS 代碼，其屬性名稱以雙破折號為前綴。這些不是常規的 CSS 屬性，而是 CSS3 中引入的自訂屬性。

了解自訂屬性

自訂屬性，也稱為 CSS 變量，可讓您定義和重複使用值整個樣式表。它們透過集中設計元素來實現靈活性和可維護性。

語法和使用

自訂屬性使用下列語法在根元素(:root) 中聲明：

:root {
  --property-name: property-value;
}

登入後複製

然後您可以使用var()存取任何元素中的自訂屬性值function:

#element {
  color: var(--property-name);
}

登入後複製

W3C 範例：

:root {
  --main-color: #05c;
  --accent-color: #056;
}

#foo h1 {
  color: var(--main-color);
}

登入後複製

此範例定義主色和強調色的自訂屬性，並使用# 中的顏色值變數foo h1 選擇器。

參考和文檔

有關自訂屬性的綜合文檔，請參閱W3C 規格頁：

https://www.w3.org /TR/css-variables/

以上是什麼是 Double-Dash CSS 屬性以及它們如何運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！