• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <url>

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

    URI 和 URL?
    • URI(统一资源标识符)与 URL(统一资源定位符)不同。URL 描述资源的位置,而 URI 描述资源的 id。URI 可以是一个资源的 URL(地址)、或 URN(统一资源名称)。
    • 在 CSS Level 1 中,url()函数被引入并用于描述 URL,即地址(虽然没有明确定义,但指一个 CSS 数据类型
    • 在 CSS Level 2 中,url()函数被扩展为可以描述任何一个 URI,即 URL 或 URN。这一定义导致 url()函数被用于创建一个数据类型。这一行为使人迷惑,且在 CSS 中几乎从不使用 URN。
    • 为了解决这一问题,在 CSS Level 3 中恢复了它的初始定义, url()函数被明确定义为指代 CSS 数据类型,且 CSS 数据类型不再存在。
    • 注意,这些语义信息并不会影响 Web 开发者的开发和对此数据类型的具体实现。

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

    示例

    .topbanner { background: url("topbanner.png") #00D no-repeat fixed; }
    ul { list-style: square url("https://www.lanmper.cn/upload/browser/compatible_ie.gif") }
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持<url>

    url()函数语法:

    url(url-modifier)

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

    例子

    div{background-image:url("1.gif");}
    div{background-image:url(1.gif);}
    
    @import url(global.css);
    @import "global.css";
    

    上篇:<string>

    下篇:<ident>