CSS 封装样式是 Web 开发中的一个重要技能。通过封装自己的样式，我们可以方便地重复使用代码，提高开发效率，减少出错。因此本文将介绍如何使用 CSS 封装自己的样式。

首先，我们需要创建一个 CSS 文件，并在 HTML 文件中引入该文件。例如：

接下来，我们可以定义一些基础样式，例如：

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 属性来应用定义好的样式。例如：

My Website



Link 1
Link 2
Link 3



Article Title
Article content...
Read More

以上就是使用 CSS 封装自己的样式的简单介绍。当然，封装样式不是一件容易的事情，需要长时间的实践和经验的积累。但是，只要我们在实践中不断总结和学习，就能够变得更加熟练和自信。