在網頁設計中，CSS 是重要的一部分。其中一個非常有用的功能就是通過點擊切換不同的樣式。下面，讓我們來了解如何在CSS中實現這個功能。

首先，我們需要在 HTML 代碼中設置一個按鈕。如下面的代碼所示：

<button onclick="changeStyle()">切換樣式</button>

這里的 onclick 指定了按鈕被點擊后應該執行的函數名稱。下一步就是在 CSS 文件中定義要切換的樣式。

body {
font-size: 16px;
font-family: Arial, sans-serif;
background-color: #fff;
color: #000;
}
.alt-style body {
font-size: 18px;
font-family: Georgia, serif;
background-color: #000;
color: #fff;
}

在上面的代碼中，我們定義了兩個不同的樣式。第一個是默認樣式，第二個是備選樣式。這里通過添加 .alt-style 類來區別備選樣式。

當用戶點擊按鈕時，應該觸發一個 JavaScript 函數來切換頁面樣式。下面是實現這個功能的代碼：

function changeStyle() {
var bodyElement = document.querySelector('body');
if (bodyElement.classList.contains('alt-style')) {
bodyElement.classList.remove('alt-style');
} else {
bodyElement.classList.add('alt-style');
}
}

這里的 changeStyle 函數首先獲取 body 元素。然后，它檢查這個元素是否已經有 .alt-style 類。如果是，它就將這個類從元素中移除，恢復到默認樣式。否則，它就將 .alt-style 類添加到元素中，切換到備選樣式。

現在，當用戶點擊按鈕時，頁面樣式就會切換到備選樣式。再次點擊按鈕，頁面樣式就會恢復到默認樣式。