<url>

概述

CSS 数据类型 <url> 指向一个资源。它没有独有的表达形式,只能通过 url() 函数定义。

URI 和 URL?

URI(统一资源标识符) 与 URL(统一资源定位符) 不同。URL 描述资源的位置,而 URI 描述资源的 id。URI 可以是一个资源的 URL(地址)、或 URN(统一资源名称)。

在 CSS Level 1 中,url() 函数被引入并用于描述 URL,即地址(虽然没有明确定义,但指一个 CSS 数据类型 <url>

在 CSS Level 2 中,url() 函数被扩展为可以描述任何一个 URI,即 URL 或 URN。这一定义导致  url() 函数被用于创建一个  <uri> 数据类型。这一行为使人迷惑,且在 CSS 中几乎从不使用 URN。

为了解决这一问题,在 CSS Level 3 中恢复了它的初始定义, url() 函数被明确定义为指代 <url> CSS 数据类型,且 <uri> CSS 数据类型不再存在。

注意,这些语义信息并不会影响 Web 开发者的开发和对此数据类型的具体实现。

许多 CSS 属性 将 URL 作为属性值,例如 background-imagecursor@font-facelist-style 等。

url() 函数

URL 可以使用单引号或双引号包含,也可以直接书写。可以在此函数中使用相对地址。相对地址相对于 CSS 样式表的 URL(而不是网页的 URL)。

语法

 <CSS 属性>:  url("http://mysite.example.com/mycursor.png")

 <CSS 属性>:  url(http://mysite.example.com/mycursor.png)

注意: 从 Firefox 15 开始,不再允许在未用引号包含的 url() 中使用大于 0x7e 的控制字符。详情请查看 bug 752230

示例

.topbanner { background: url("topbanner.png") #00D no-repeat fixed; }
ul { list-style: square url(http://www.example.com/redball.png) }

规范

规范 状态 说明
CSS Values and Units Module Level 3
<url>
Candidate Recommendation 自 CSS Level 2 (Revision 1) 以来没有显著更改
CSS Level 2 (Revision 1)
<uri>
Recommendation 自 CSS Level 1 以来没有显著更改
CSS Level 1
<url>
Recommendation  

浏览器兼容性

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本支持 1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
特性 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本支持 1.0 1.0 (3.5) yes yes 1.0

文档标签和贡献者

 最后编辑者: zhyupe,