Question

据我了解，当您使用速记属性background时，浏览器首先将所有背景属性设置为其默认值，然后输入您要声明的值。那么使用background-color:white会更好吗？而不是background:white？当你输入更多的值，如背景位置或背景图像时，这会改变吗？或者最好是单独声明属性？

我认为必须存在某种转折点，其中节省的字节数平衡了通过单独指定属性所获得的处理时间。但是，我可能完全错了 - 这就是我在这里问的原因。

Answer 1

我听说过最佳实践，但如上所述，处理差异甚至加载时间都可以忽略不计。除了在样式表中有意义的内容之外，没有最佳实践来何时使用这些规则。真正的区别在于它们以不同的方式影响继承的属性。设置background-color: white;只会覆盖background-color规则（无论是否最初设置为background或background-color），但background将覆盖any / all { {1}}规则设置，因此可能会杀死背景图片和关联的background等。以下是一个示例：

background-repeat

使用HTML：

.box {
    background: url(star.png); // set with just background instead of background-image
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
}
.box1 {
    background-color: blue;
}
.box2 {
    background: green;
}

.box1将显示star.png图像（如果图像是透明的，则为蓝色背景），而.box2将仅显示绿色背景，不显示图像。使用这两个规则的最佳实践课程一般是评估CSS创作和继承 - 而不是渲染性能。考虑到这一点，通常最好将<div class="box1 box"></div> <div class="box2 box"></div>应用于元素的最通用/抽象规则，然后使用类{ID>}覆盖更具体实例的属性，background，{{1}等等。

Answer 2

CSS的处理时间应该可以忽略不计。如果你因为这个而限制使用它们，那么，不要再束缚自己了。

仅使用一种颜色时，background: color和background-color: color应该会得到相同的结果。

如果您更喜欢简单的个人声明，那么最后归结为它。通常，shorthands将使用合理的默认值，因此它可以。我通常不记得他们的正确顺序（尤其是font简写），但除此之外，我认为他们还算不错。

无论如何，您可能会使用比预期更多的速记属性。例如，margin和padding是其-top，-right，-bottom和-left组件的缩写，border是border-width，border-color和border-style的简写，它们都是border-[direction]-[attribute]属性的缩写。通过使用border而不是所有非速记属性，您可以节省11行。

CSS背景属性 - 速记与长形式

2 个答案: