代码之家 › 专栏 › 技术社区 › Hasani

什么时候应该在CSS属性前面使用逗号(“,”)和空格(“”)?[重复]

comma rules space symbols css

0

Hasani · 技术社区 · 4 年前

在CSS声明中使用逗号背后的逻辑是什么?

有时是必需的,有时是可选的,有时会生成错误。

<div>test</div>

<style>
div {
    height: 200px;

    background:
        /* Comma between colors is required. */
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        /* Comma between 1st and 2nd line is optional. */
        rgb(255, 0, 0);

    /* There must not be a comma. */
    filter: brightness(90%) contrast(90%);
}
</style>

0 回复 | 直到 5 年前

1

3

Temani Afif 5 年前

对于背景,我们需要逗号,因为它是多个背景层。所以每次我们添加一个新的背景层,我们都需要一个逗号。从技术上讲,他们是 独立的 层。如果定义为颜色,我们可以在最后一层前面加逗号。

对于过滤器,我们正在应用一过滤器是多个过滤器功能的组合。与transform属性相同。从技术上讲,它们不是独立的价值观。

在所有情况下,您都应该参考规范来获取每个属性的语法,因为没有魔术使用逗号、空格或任何其他字符的规则。主要目的是要有一个清晰而不含糊的语法。

For background

价值: <bg-layer> # , <final-bg-layer>

 <bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

 <final-bg-layer> =  <\'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

散列标记( # )指示前面的类型、单词或组出现一次或多次, 由逗号标记分隔 (可以选择用空白和/或注释包围)。它可能会有选择地跟在上面的大括号形式后面,以精确指示重复发生的次数,如#{1,4}。 ^ref

For colors :

函数表示法中RGB值的格式为 rgb( 然后是 三个数值的逗号分隔列表 (三个整数值或三个百分比值)后跟 ) .整数值255对应于100%,并对应于十六进制表示法中的F或FF:r gb(255,255,255) = rgb(100%,100%,100%) = #FFF .数值周围允许有空格字符。

For filter

价值: none | <filter-value-list>

 <filter-value-list> = [ <filter-function> | <url> ]+

加号( + )指示前面的类型、单词或组出现一次或多次。

值得注意的是,在后台可以有逗号、空格和 / 如上述语法所述,分隔不同的值。

 background:linear-gradient(red,red) left/100% 50px,
            linear-gradient(blue,blue) top/50px 20px yellow;

逗号是层之间的分隔,空间是不同属性之间的分隔。我们可以这样写:

 backgrund-image:linear-gradient(red,red),linear-gradient(blue,blue);
 background-position:left,top;
 background-size:100% 50px,50px 20px;
 background-color:yellow;

2

3

Nicolas Reynis 5 年前

brightness 和 contrast 是筛选器属性的两个独立值。

rgba 单个rgb值是 rgba 和 linear-gradient 函数,在这种情况下 线性梯度 价值是多少 background 所有物

编辑:同样值得注意的是,这条规则有一个主要的例外: font-family 取几个用逗号分隔的值。。。所以这并不完全一致。