CSS皮膚是指通過定義CSS樣式來更改網站或應用程序的外觀。它可以用來改變文字和背景顏色，字體，按鈕風格等等。在本文中，我們將學習如何換上CSS皮膚。

首先，我們需要編寫一個基本的CSS文件，它將定義網站的布局和外觀。這個文件可以包含各種類，如h1、p和div。

body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
font-size: 32px;
color: #333;
margin: 20px 0;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #333;
color: #fff;
border-radius: 5px;
text-decoration: none;
font-size: 16px;
transition: all 0.3s ease;
}
.button:hover {
background-color: #fff;
color: #333;
border: 2px solid #333;
}

接著，我們可以開始創建皮膚。定義每個皮膚的CSS規則后，我們需要給皮膚命名。這個名字可以作為類名使用，然后我們將類名添加到body標簽中以應用皮膚。

/* default skin */
.skin-default {
/* define default skin rules */
}
/* dark skin */
.skin-dark {
/* define dark skin rules */
}
/* pink skin */
.skin-pink {
/* define pink skin rules */
}

在應用CSS皮膚之前，我們需要有一個切換皮膚的功能。我們可以使用JavaScript來設置一個按鈕，點擊它可以切換皮膚。這里是一個例子：

<button onclick="changeSkin('skin-default')">Default Skin</button>
<button onclick="changeSkin('skin-dark')">Dark Skin</button>
<button onclick="changeSkin('skin-pink')">Pink Skin</button>
<script>
function changeSkin(skinName) {
document.body.className = skinName;
}
</script>

最后，當我們點擊按鈕時，JavaScript函數將改變body標簽的類名，從而應用對應的皮膚。

總之，CSS皮膚是一種非常有用的工具，它可以讓我們輕松地更改我們網站或應用程序的外觀。我們只需要定義CSS規則和皮膚名，并為切換皮膚編寫一個JavaScript函數。