CSS中的URL_CSS中的URI

URI是Uniform Resource Identifier的缩写，表示统一资源标识符，是一个用于标识某一互联网资源名称的字符串。该种标识允许用户对任何（包括本地和互联网）的资源通过特定的协议进行交互操作。URI由包括确定语法和相关协议的方案所定义。

Web上可用的每种资源，如HTML文档、图像、视频片段、程序等，都由一个通用资源标识符进行定位。

在CSS属性中，使用功能符号 url 来定义一个URI，为网页提供一个图像、视频及浏览器所支持的任何资源。其格式是在 url 后跟一对小括号，小括号中为 URI 的值，如：

url(protocol://server/pathname)

其中，url 和开始括号之间不能有空格，而开始括号的后面，及结束括号的前面，既可以有空格，也可以没有。URI值的两侧，既可以加引号，也可以不加。但是，URI值中包含空格时，必须加引号。加引号时，既可以使用单引号，也可以使用双引号。URI中，如果包含括号、逗号、单引号、双引号等特殊字符，则必须使用反斜杠进行转义，如 '\('，'\)'，'\,'。

上述这种方式定义了一个绝对URI。这里的绝对是指，无论这个URI放在哪里，它都能正常工作，因为它定义了Web空间中的一个绝对位置。假设在一个名为 www.waibo.wang 的Web服务器，该服务器是有一个名为 images 的目录，在这个目录中有一个图像logo.jpg。这种情况下，该图像的绝对URI将是：

url(http://www.waibo.wang/images/logo.jpg)；

不管这个URI放在哪里，它都是合法的，而不论包含这个URI的页面是在服务器 www.waibo.wang 上，还是在 www.aitaoxun.com 上。

另一种URI是相对URI，之所以如此称呼，是因为它指定的是一个相对于该URI所在文档的位置而言的。

在CSS中使用相对路径时，URI是相对于样式表的位置，而不是要应用样式的HTML文件的位置。如：

body {
background: url(image.jpg);
}

上述代码就表示，使用图像 image.jpg 作为网页的背景图像，图像文件和css 文件位于相同的目录。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

CSS中的URL_CSS中的URI相关推荐

从Chrome中的css自定义样式按钮中删除蓝色边框
本文翻译自:Remove blue border from css custom-styled button in Chrome I'm working on a web page, and I wa ...
CSS在ASP.NET中使用
原以为在ASP.NET中使用CSS会很麻烦,真正做起来了却很简单,现把使用过程简要记录如下: 使用CSS大体有两种情况,一是静态的添加,另一是动态变换一.静态添加: 首先在aspx中加入(加入hea ...
Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...
style 放入css文件失效_React中使用CSS的7种方式
来源 | http://www.fly63.com/article/detial/1961 1.在组件中直接使用style 不需要组件从外部约会css文件,直接在组件中书写. import react ...
html中属性选择器是什么,为什么在CSS选择器/ HTML属性中首选使用破折号？
小编典典代码完成我猜破折号是解释为标点符号还是不透明标识符取决于选择的编辑器.但是,根据个人喜好,我更喜欢能够在CSS文件中的每个单词之间切换,并且如果它们之间用下划线分隔并且没有停顿的话,会很烦 ...
[css] 请说说颜色中#F00的每一位分别表示什么？为什么会有三位和六位的表示呢？
[css] 请说说颜色中#F00的每一位分别表示什么?为什么会有三位和六位的表示呢? 颜色可以使用红-绿-蓝(red-green-blue (RGB))模式的两种方式被定义:十六进制符号 #RRGGB ...
[css] 怎么让div中的图片和文字同时上下居中？
[css] 怎么让div中的图片和文字同时上下居中? <div><img src="./"/><label>文字内容</label> ...
[css] 如何取消页面中选中的文字？
[css] 如何取消页面中选中的文字? user-select: none; /* browser-specific values */ -moz-user-select: none; -webkit ...
熟悉html css,编写HTML和CSS的前端开发中不一定熟悉JavaScript
原标题:编写HTML和CSS的前端开发中不一定熟悉JavaScript 作为前端开发人员,HTML.css.Java是必备的知识技能,但是现实工作工作中并非所有的前端都知道Java,根据外国一个网站的 ...

CSS中的URL_CSS中的URI

CSS中的URL_CSS中的URI相关推荐

最新文章

热门文章