HTML5学堂-码匠 HTML5学堂

您当前位于:HTML+CSS结构样式 ——> 文件路径 / ./ ../ ,文件中路径的含义以及使用

文件路径 / ./ ../ ,文件中路径的含义以及使用

2015/08/05 11:04:06 | 作者:HTML5学堂(码匠) | 分类:HTML+CSS结构样式 | 关键词:CSS,路径,含义,url

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

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

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

绝对路径和相对路径

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

例如:../images/h5course.jpg

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

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

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

路径的特殊符号

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

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

/ 表示根目录。

路径寻找实例

CSS路径实例

在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学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端