CSS自定義屬性是指開發者自行定義的屬性,在CSS中以--為前綴。例如,定義一個文字顏色的自定義屬性:
code { --text-color: #333; }
定義完成后,我們就可以在CSS中使用該屬性,并為其賦值。例如,在p標簽中使用該自定義屬性:
p { color: var(--text-color); }
在上面的代碼中,我們使用了var()函數來引用自定義屬性,這樣就可以控制多個元素使用相同的自定義屬性值,方便風格的統一。
除了顏色,自定義屬性可以用于其他屬性,例如,字體大小,間距,背景顏色等等。
code { --font-size: 14px; --padding: 10px; --background-color: #eee; } p { font-size: var(--font-size); padding: var(--padding); background-color: var(--background-color); }
自定義屬性的優勢在于其靈活性和可復用性,可以讓頁面樣式更加簡潔易懂,讓開發者更加高效地進行樣式調整。