CSS 速记属性顺序

Question

如您所知，我们可以在 css 中使用速记属性。但我发现属性值的顺序很重要。

'border:1px 红色实心;'等于'border: 1px solid red;'

---

但是“font:italic bold 12px/20px”不等于“font:italic 12px/20px bold;”

我仔细阅读了手册，但找不到任何有关属性值顺序的内容；

Answer 1

顺序的相关性是根据每个属性定义的。例如，description of the font shorthand使用以下语法:

[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'>
[ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box |
 small-caption | status-bar | inherit

这看起来有点乱，但使用元注释的关键在 1.4.2 CSS property definitions 节中.它说，除其他外:

1. 几个并列的词意味着所有这些词都必须按给定的顺序出现。
2. 竖线 (|) 分隔两个或多个备选方案:其中一个必须出现。
3. 双横线 (||) 分隔两个或多个选项:其中一个或多个选项必须以任何顺序出现。

所以我们可以读到字体样式、字体变体和字体粗细可以以任何顺序出现，它们都是可以省略的，但是如果出现，它们必须在字体大小和字体系列之前，这两个都是必需的并且必须出现在那个顺序。

幸运的是，大多数属性都比较简单。大多数情况下，值中元素的顺序并不重要，因为设计可以从格式中推断元素的 Angular 色。而且您永远不需要 font 简写:您始终可以写下各个字体属性。