CSS定義變量并賦值

在CSS3中，我們可以使用自定義屬性來定義變量，并在不同樣式中進行引用和使用。這為我們的樣式設置帶來了更強大的靈活性。

要定義變量，我們需要使用:root選擇器，并在其中使用--標識符來命名變量。例如，我們可以定義一個背景色的變量：

:root{
--bg-color: #f1f1f1;
}

定義好變量后，我們可以在需要引用的樣式中使用var()函數來調用它：

body{
background-color: var(--bg-color);
}

這樣，我們就可以很方便地改變整個網站的背景色了。

同樣的，我們也可以定義文字顏色或邊框顏色的變量，并在樣式中引用它們：

:root{
--text-color: #333;
--border-color: #ccc;
}
body{
color: var(--text-color);
}
p{
border: 1px solid var(--border-color);
}

這樣，我們就可以統一修改網站常用的文字或邊框顏色，而不需要一個一個地去修改樣式了。