当CSS属性可以有多个值时,这些值是否总是用空格分隔?

时间:2014-03-13 22:34:00

标签: css fonts whitespace

"font" property可以包含多个值来指定字体样式,字体粗细等。

我正在使用CSS解析器并且似乎找不到明确的答案: CSS属性值总是用空格分隔

font: italic small-caps bold 12px arial,sans-serif

上面的例子有" arial,sans-serif"没有空格。所有其他w3c示例遵循相同的约定,暗示空格是保留用于将值彼此分离 - 这似乎是一个安全的假设,但我还没有看到它明确确认。

我见过的其他问题和讨论涉及速记选择器,输出不同的属性值(这些值的答案似乎也假设空格分离),以及是否可以在一行中声明多个属性。但是,它们似乎都没有进行最后的调用:是否为最终的分隔符?

3 个答案:

答案 0 :(得分:7)

你的问题的技术答案是它完全取决于财产本身。

但通常,是的,空格用于分隔CSS中属性值的不同组件。

正如您在font-family属性中看到的那样,它所使用的值是以逗号分隔的字体列表(通常称为字体堆栈)。它使用逗号作为分隔符的事实仅由该属性的规范定义,请参阅CSS2.1, section 15.3

  

属性值是字体系列名称和/或通用系列名称的优先级列表。与大多数其他CSS属性不同,组件值用逗号分隔,表示它们是替代品:

body { font-family: Gill, Helvetica, sans-serif }

CSS Fonts level 3, section 3.1

  

与其他CSS属性不同,组件值是以逗号分隔的列表,表示备选方案。

在逗号前面或后面或两者都可以接受空格。它并不重要,不会改变财产价值的含义。 W3C规范中显示的约定是逗号后面的单个空格。你链接到的页面是W3Schools,它可能有自己的约定(实际上它显然没有 - 甚至它自己的例子在使用空格时也不一致)。

实际上,即使是font属性,即使是简写,也有自定义语法:为了指定line-height,必须指定font-size后跟正斜杠,例如,font: 12px/1.5等同于font-size: 12px; line-height: 1.5。请参阅this answer

但同样,对于什么字符用作属性值中的分隔符,没有明确的无所不包的答案。每个CSS属性都有自己的可能值语法,这些语法总是在各自的规范中详细说明。

答案 1 :(得分:1)

CSS转换,除calc()之外的所有所谓函数均使用逗号(如果它们采用值列表)。 CSS渐变混合使用空格和逗号。 SVG在这方面更加灵活,空格和逗号可以互换用作属性值列表的分隔符。

答案 2 :(得分:-3)

首先,您的字体标记格式不正确。如果您直接在HTML中声明字体标记,则采用以下格式:

<font face="Colaborate,Arial,Helvetica,sans-serif" size="12px" style="font-style: italic">Some Text</font>

但是,只有在不使用HTML5时才能直接在HTML中声明字体标记。今天大多数浏览器都使用HTML5。使用HTML5时,您应该使用CSS定义字体。

使用CSS定义字体时,空格是css属性可以接受的不同参数的分隔符。例如,如果要定义边框,则必须定义不同的参数:大小,样式和颜色。这是您可以使用空格作为分隔符,因为它们定义了css属性的不同参数。例如,要在文本周围放置一个宽度为一个像素的黑色边框,实线为:

#yourItem {
    border: 1px solid #000000;
}

但是,有一些CSS属性可以接受和评估值的层次结构。一个例子是font-family属性。您可以为font-family定义多个值。它们将按照列出的顺序进行处理。例如,如果我列出了您的项目的font-family,请执行以下操作:

#yourItem {
     font-family: Colaborate, Arial, Helvetica, sans-serif;
     border: 1px solid #000000;
}

浏览器要做的第一件事就是查看机器/设备上是否安装了Colaborate字体。如果Colaborate字体不存在,则接下来将查找Arial(这是大多数机器/设备上的预安装字体)。然后它会将文本呈现为Arial,因为Colaborate不可用。如果它没有找到Arial,它会寻找Helvetica。如果它没有找到Helvetica,它将默认为机器/设备上没有serif处理的第一个字体。这就是在这个例子中使用逗号而不是空格的原因。空间定义了实际的不同参数。逗号用于定义一个css属性参数的选择层次结构。逗号不适用于所有css属性。它只适用于某些人。

希望这有帮助!