CSS文件中url的路径含义及使用

在书写代码时经常会使用到路径去将相关文件“连接”到一起，那么相对路径当中，不同的书写方法又分别表示什么含义呢？一起来看一下吧~

HTML5学堂 - 刘国利郑重声明：本文的原作者是自己2013年的一个学生进行的整理，原文发布时间为2013年8月。原文作者——陈亚光。针对原文进行了一些调整、修改和优化。调整时间：2015年08月05日。

绝对路径和相对路径

相对路径-以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。

例如：../images/h5course.jpg

绝对路径-以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。

例如：G:/2015/h5course/images/h5course.jpg

在前端开发当中，我们通常使用相对路径。原因在于，当我们在客户端书写好代码上传到服务端时，通常路径是不相同的，绝对路径会出现路径错误的问题。

路径的特殊符号

../ 表示当前文件所在层级的上一层级。

./ 表示当前文件所在的层级。

/ 表示根目录。

路径寻找实例

在css文件夹里有一个css文件index.css，需要在index.css文件当中引用images文件夹里list_logo.png图片，将此图片设置为背景图background-image。则代码应当如此书写：

1. background-image:url('../images/list_logo.png');

IE的behavior

这个部分算是额外扩展吧，IE使用behavior:url(xx/xxx.htc);来做HTML组件，其中url中指定的htc文件路径是相对于引用css的HTML文件所在目录。

相关文章推荐

CSS引入方式

link和@import的区别

CSS important

CSS选择器优先级

reset 样式重置

欢迎沟通交流~HTML5学堂