CSS可以通過切換皮膚來讓網頁看起來更加符合個人喜好。在這篇文章中，我們將介紹CSS如何切換皮膚。

CSS切換皮膚的方法是通過更改樣式表文件來實現的。我們需要為每個皮膚創建一個單獨的樣式表文件，并在網頁上引用它們。

<!-- 在網頁中引用樣式表文件 -->
<link rel="stylesheet" type="text/css" href="style1.css" />
<!-- 創建第二個皮膚 -->
<link id="skin2" rel="alternate stylesheet" type="text/css" href="style2.css" title="皮膚2" />

在上面的代碼中，我們首先在網頁上引用了一個名為“style1.css”的樣式表文件。接下來，我們使用“link”元素創建了一個第二個皮膚，名為“style2.css”，并將其標記為備選樣式表。

我們還為備選樣式表指定了一個標識符“皮膚2”，這將在用戶切換皮膚時使用。在完成樣式表文件的創建和網頁的引用之后，我們就可以通過javascript來實現切換皮膚的功能。

<!-- 在網頁中添加一個選項按鈕 -->
<input type="button" value="切換皮膚" onclick="changeSkin()" />
<script type="text/javascript">
function changeSkin() {
// 獲取網頁上的樣式表文件
var style1 = document.getElementsByTagName("link")[0];
var style2 = document.getElementsByTagName("link")[1];
// 判斷當前使用的樣式表文件
if(style1.getAttribute("rel") == "stylesheet") {
style1.setAttribute("rel", "alternate stylesheet");
style2.setAttribute("rel", "stylesheet");
} else {
style1.setAttribute("rel", "stylesheet");
style2.setAttribute("rel", "alternate stylesheet");
}
}
</script>

在上面的代碼中，我們使用“input”元素創建了一個用于切換皮膚的選項按鈕，并為其添加了一個“onclick”事件。在事件處理程序函數中，我們首先獲取網頁上的樣式表文件，然后判斷當前使用的樣式表文件。如果當前使用的是第一個樣式表文件，“style1.css”，則將其標記為備選文件，將第二個樣式表文件“style2.css”將其標記為默認樣式表文件。反之亦然。

通過上述操作，我們可以輕松地實現切換皮膚的功能。