CSS 封裝樣式是 Web 開發(fā)中的一個重要技能。通過封裝自己的樣式，我們可以方便地重復使用代碼，提高開發(fā)效率，減少出錯。因此本文將介紹如何使用 CSS 封裝自己的樣式。

首先，我們需要創(chuàng)建一個 CSS 文件，并在 HTML 文件中引入該文件。例如：

<link rel="stylesheet" href="style.css">

接下來，我們可以定義一些基礎樣式，例如：

body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1, h2, h3 {
color: #333;
}
a {
color: #007bff;
text-decoration: none;
}

定義了基礎樣式后，我們可以開始封裝自己的樣式。我們可以使用類選擇器或 ID 選擇器來定義樣式。例如：

.header {
background-color: #007bff;
color: #fff;
padding: 10px;
}
#sidebar {
float: left;
width: 200px;
}
.article {
margin-left: 220px;
}
.btn {
display: inline-block;
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border-radius: 5px;
cursor: pointer;
}

在 HTML 文件中，我們可以使用 class 屬性或 id 屬性來應用定義好的樣式。例如：

<div class="header">
<h1>My Website</h1>
</div>
<div id="sidebar">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div class="article">
<h2>Article Title</h2>
<p>Article content...</p>
<button class="btn">Read More</button>
</div>

以上就是使用 CSS 封裝自己的樣式的簡單介紹。當然，封裝樣式不是一件容易的事情，需要長時間的實踐和經驗的積累。但是，只要我們在實踐中不斷總結和學習，就能夠變得更加熟練和自信。