CSS中怎样正确定义复合样式

CSS中的样式复合是一种非常重要的技巧，它可以让我们在一个样式中定义多个属性，从而使代码更加简洁高效。

在CSS中，我们可以用“;”来分隔每个属性，但在定义复合样式时，需要用“{}”将多个属性包裹起来，例如：

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
} 

这样，我们就定义了一个名为“box”的样式，并在其中定义了三个属性：宽度、高度和背景颜色。

需要注意的是，在定义复合样式的时候，属性的顺序是没有要求的，但为了代码的可读性，最好按照字母顺序或者相关性顺序排列。

此外，在使用复合样式时，我们可以通过选择器来将其应用到不同的元素中。例如：

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
}

.box2 {
  width: 200px;
  height: 200px;
  background-color: #00f;
} 

以上代码中，我们定义了两个不同的样式，用于设定不同元素的宽度、高度和背景颜色。使用时只需将这些样式应用到不同的元素中：

<div class="box"></div>
<div class="box2"></div> 

这样，即可使两个元素分别应用不同的样式，实现不同的效果。

总的来说，在CSS中正确定义复合样式是我们书写高效美观代码的基础，我们需要掌握好这一技巧并合理运用。