CSS自定義屬性是CSS3引入的一項(xiàng)重要功能，它允許web開發(fā)者在CSS中使用自定義的變量。這些變量可以存儲(chǔ)不同的值，然后在CSS中使用這些變量，以簡化CSS編寫過程。

要添加CSS自定義屬性，首先需要使用--作為屬性名稱的前綴:

p {
--text-color: red;
}

在上面的示例中，我們定義了一個(gè)名為--text-color的自定義屬性，并為其賦值為紅色。接著，在該屬性相應(yīng)的元素中，我們可以使用var()函數(shù)來引用這個(gè)自定義屬性:

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

在上面的示例中，我們將--text-color變量作為color屬性值傳入。這意味著p元素的文本顏色將是我們先前定義的紅色。

值得注意的是，自定義屬性的命名方式和命名空間是非常重要的。命名應(yīng)該始終以--作為前綴，并使用一些形式的識(shí)別符來說明該屬性是什么。我們還可以在某些情況下將自定義屬性的作用域限制在特定作用域內(nèi)，例如:

#my-element {
--text-color: red;
}
#my-element p {
color: var(--text-color);
}

在上面的示例中，我們定義了一個(gè)名為--text-color的自定義屬性，并將其作用域限制在#my-element元素之內(nèi)。然后，我們?cè)谠撛氐暮蟠鷓元素中使用了它，這樣只有在該元素及其后代中，這個(gè)自定義屬性才能夠被使用。

如此說來，CSS自定義屬性的添加方式就非常簡單了。只需要按照上面的方式定義變量并使用var()函數(shù)即可。這使得我們可以更方便地編寫更加靈活和易于維護(hù)的CSS規(guī)則，因?yàn)槲覀兛梢远x一些通用的值，然后在整個(gè)代碼庫中使用這些值。