在網頁設計中，CSS是至關重要的。它能夠讓網頁更加美觀，提高用戶體驗。在本文中，我們將探討如何使用CSS來實現點擊變換字體顏色。
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
p {
font-size: 20px;
color: black;
}
.active {
color: red;
}首先，我們需要創建一個按鈕，當按鈕被點擊時，它會觸發JavaScript動作來改變段落的CSS樣式。以下是按鈕的CSS樣式：
接下來，我們按照上述CSS樣式將段落的字體顏色設置為黑色。以下是CSS樣式：
我是一段普通的文本。
現在我們將JS事件監聽器附加到按鈕上。當按鈕被點擊時，它將添加一個.active類到段落標簽中。這能夠改變段落字體的顏色。以下是代碼：
這樣就完成了點擊變換字體顏色的功能。當您點擊按鈕，字體顏色將改變為紅色，再次點擊字體顏色將改變回黑色。
綜上所述，CSS是網頁設計中的一個關鍵元素，能夠提高用戶體驗。點擊變換字體顏色是CSS功能之一，它能夠增加網頁的交互性。我們的示例代碼可以幫助您更好地理解CSS如何實現此功能，以便您能夠在自己的網站上應用。
下一篇css做細線表格