CSS (Cascading Style Sheets) 是網頁設計中最重要的一部分。在網頁中使用 CSS 可以為您的頁面添加許多豐富的樣式和設計元素。本文將為您介紹如何利用 CSS 實現點擊添加樣式的效果。

.button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
.button:hover {
background-color: #3e8e41;
}
.active {
background-color: #3e8e41;
}

可以看到，這是一個按鈕樣式的 CSS 代碼。首先，定義了一個名為「button」的類，它包含了按鈕的所有樣式，如內邊距（padding）、背景顏色、文本顏色、邊框等。同時，還定義了一個「hover」偽類，用于設置當鼠標滑過按鈕時的樣式效果。當用戶鼠標滑過按鈕時，按鈕的背景顏色將變成另一種顏色。

為了實現點擊添加樣式的效果，需要使用 JavaScript。下面是一段示例代碼：

var button = document.querySelector('.button');
button.addEventListener('click', function() {
button.classList.toggle('active');
});

上述代碼定義了一個變量「button」，并選中了一個名為「button」的元素來表示按鈕。接下來我們在該按鈕上添加了一個「click」事件監聽器。當按鈕被點擊時，監聽器將執行一個函數。該函數使用「toggle」方法來切換按鈕的類名，初始時不存在名為「active」的類，當按鈕第一次被點擊時會加入該類，第二次點擊時則會移除該類。

在 CSS 中添加名為 「active」的類的樣式代碼如下：

.active {
background-color: #3e8e41;
}

當按鈕被點擊時，它的背景顏色將變成上述樣式所定義的顏色。

在 HTML 代碼中添加按鈕的代碼如下：

<button class="button">點擊我</button>

這是一個簡短各精確的示例，可以根據實際需求修改或擴展。讓我們一起動手嘗試吧！