CSS 背景属性 - 简写与长格式

Posted 2023-02-24

【中文标题】CSS 背景属性 - 简写与长格式

【英文标题】：CSS Background Property - Shorthand vs Long form

【发布时间】：2011-03-26 18:56:22

【问题描述】：

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

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

【参考方案1】：

我听说过最佳做法，但如前所述，处理甚至加载时间的差异可以忽略不计。除了在您的样式表中有意义之外，没有关于何时使用这些规则的最佳实践。真正的区别在于它们对继承属性的影响不同。设置background-color: white; 只会覆盖background-color 规则（无论它最初是用background 还是background-color 设置的）但background 将覆盖任何/所有background 规则集，因此可能会杀死背景图像以及相关联的background-repeat等。下面是一个例子：

.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;

像 html 一样：

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

.box1 将显示 star.png 图像（如果图像是透明的，则具有蓝色背景），而 .box2 将仅显示绿色背景，没有图像。这两条规则的最佳实践课程是评估 CSS 创作和继承，而不是渲染性能。请记住，通常最好将 background 应用于元素的最通用/抽象规则，然后使用类或 ID 覆盖更具体实例的属性，例如 background-color、background-image 等。

【讨论】：

那你对孤单元素有什么建议呢？假设您只有一个框元素，并且希望背景颜色为蓝色？

我会说background-color。这使它更清晰，更“面向未来”。 （即，如果后来有人创建了一个规则，该规则间接添加了一个 background-image 到你的元素，你的 background-color 规则不会干扰。通常，速记的重点就是：A以更短/更快的格式一起编写多个规则的方法。

【参考方案2】：

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

当只使用一种颜色时，background: color 和 background-color: color 应该给出相同的结果。

最后归结为您是否更喜欢简写而不是单独的声明。通常，速记会使用合理的默认值，所以没关系。我通常不记得它们的正确顺序（尤其是 font 速记），但除此之外，我认为它们还不错。

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

【讨论】：

我知道这绝对可以忽略不计，但我对最佳实践非常感兴趣，即使它没有任何影响 - 知道你做对了仍然很酷。

问题出现是因为我正在重构我的一个网站，我开始用背景替换所有单独的背景颜色、背景位置属性，然后我问自己，这对吗？或者更确切地说，这是最好的方法吗？

@Radu：是的，是的。 CSS 足够简单，我不知道它是否有任何“受支持”的不良做法（语言允许但不应该这样做的东西）。

好点的边框、边距和内边距属性，没想到。