css的面向对象思想

CSS的面向对象思想是指将页面的样式按照具有独立性的模块进行划分，每个模块都有着独立的样式属性和功能，以便更好的管理和维护页面。

// 定义一个名为
class名为nav的样式模块
.nav {
  width: 100%;
  height: 50px;
  background-color: #f9f9f9;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
// 定义一个名为
class名为btn的样式模块
.btn {
  width: 100px;
  height: 40px;
  background-color: #1abc9c;
  color: #ffffff;
  font-size: 16px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
// 定义一个名为
class名为card的样式模块
.card {
  width: 300px;
  height: 400px;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
// 在
html页面中使用定义好的样式模块
<nav class="nav">
  <button class="btn">按钮</button>
</nav>
<div class="card">
  <h2>文章标题</h2>
  <p>文章内容</p>
</div> 

通过使用面向对象的思想，将样式按照独立的模块进行划分，在需要改变某个元素的样式时，只需修改该元素的样式模块即可，而不会影响其他模块，这样更加灵活方便的管理和维护页面。同时，使用面向对象的思想也可以提高开发效率，避免了样式的冗余和重复，让代码更加简洁易读。