Question

我应该在样式表中使用以下哪一项？

/* Example #1: */ background-image: url(image.png);
/* Example #2: */ background-image: url("image.png");
/* Example #3: */ background-image: url('image.png');

W3C指定什么正确方式？

Answer 1

W3C说引用是可选的，你的三种方式都是合法的。

打开和关闭报价只需要是相同的字符。

如果您的网址中包含特殊字符，则应使用引号或转义字符（请参阅下文）。

Syntax and basic data types

URI值的格式是'url（'后跟可选的空格，后跟可选的单引号（'）或双引号（“）字符，后跟URI本身，后跟可选的单引号（'）或双引号（“）字符后跟可选的空格，后跟'）'。两个引号字符必须相同。

转义特殊字符：

出现在不带引号的URI中的某些字符（如括号，空格字符，单引号（'）和双引号（“））必须使用反斜杠进行转义，以便生成的URI值为URI标记：'\ （'，'\）'。

Answer 2

以下是W3 CSS 2.1规范所说的内容：

URI值的格式为'url（'   其次是可选的空白区域   然后是可选的单引号   （'）或双引号（“）字符   接下来是URI本身   通过可选的单引号（'）或   双引号（“）字符后跟   可选的空格后跟'）'。   两个引号字符必须是   相同。

来源：http://www.w3.org/TR/CSS21/syndata.html#uri

因此，您提出的所有3个示例都是正确的，但我选择的是第一个，因为您使用的字符较少，因此生成的CSS文件会更小，导致带宽使用量减少。

这可能感觉这并不重要，但是高流量网站更喜欢节省带宽和大量的css文件，并且在其中的url引用中选择使文件变小的选项是有意义的... 即使因为没有优势也没有这样做。

注意：如果网址包含括号，逗号，空格字符，单引号或双引号，则可能必须转义字符。这可能会使URL更长，而不仅仅是使用引号（需要更少的转义）。因此，只有当转义的开销不会使url长于仅使用引号（这是非常罕见的）时，您可能希望使用没有引号的URL来提供Css文件。

但是我不希望任何人甚至考虑这些边缘情况...... Css优化器会为你处理这个......（但是如果你实际上在编写一个css优化器，你肯定需要知道所有这些：p）

Answer 3

根据W3C，有三种方式合法。如果名称中有特殊字符（作为空格），则应使用第二个或第三个字符。

Answer 4

示例2或3是最好的：

From W3C: URI值的格式为'url（'后跟可选的空格，后跟可选的单引号（'）或双引号（“）字符，后跟URI本身，后跟可选的单引号（'）或双引号（“）字符后跟可选的空格，后跟'）'。两个引号字符必须相同。

请注意，如果适当的字符被转义，示例1是可以接受的。

Answer 5

2021 年更新（大多数答案来自 2015 年及更早的时间。）

引号是可选的，但是某些字符（如果使用）需要转义。

来自 MDN：

一个 url，它是一个相对或绝对地址，或指向要包含的 Web 资源的指针，或一个数据 uri，可选择使用单引号或双引号。如果 URL 包含括号、空格或引号，则需要引号，除非这些字符被转义，或者地址包含 0x7e 以上的控制字符。双引号不能出现在双引号内，单引号不能出现在单引号内，除非被转义。以下内容均有效且等效：

<css_property>: url("https://example.com/image.png")
<css_property>: url('https://example.com/image.png')
<css_property>: url(https://example.com/image.png)

如果您选择不使用引号编写 URL，请在作为 URL 一部分的任何括号、空格字符、单引号 (') 和双引号 (") 之前使用反斜杠 ()。

来源： https://developer.mozilla.org/en-US/docs/Web/CSS/url()

Answer 6

根据Google CSS Coding Style

不要在URI值（url（））中使用引号。

例外：如果确实需要使用@charset规则，请使用双引号 - 不允许使用单引号。

Answer 7

我有：

a.pic{
    background-image: url(images/img (1).jpg);
}

我花了一段时间才明白文件名的大括号违反规则。

所以它不是强制性的，但是，即使旧版浏览器不能很好地理解引用，它也可以让您在相当复杂的动态生成页面中省去一些麻烦。

引用url（）的值真的有必要吗？

7 个答案: