CSS可以通过切换皮肤来让网页看起来更加符合个人喜好。在这篇文章中，我们将介绍CSS如何切换皮肤。

CSS切换皮肤的方法是通过更改样式表文件来实现的。我们需要为每个皮肤创建一个单独的样式表文件，并在网页上引用它们。

<!-- 在网页中引用样式表文件 --><link rel="stylesheet" type="text/css" href="/post/style1.css" /><!-- 创建第二个皮肤 --><link id="skin2" rel="alternate stylesheet" type="text/css" href="/post/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”将其标记为默认样式表文件。反之亦然。

通过上述操作，我们可以轻松地实现切换皮肤的功能。