网页页面中css4种连接引入方式浅谈

2020-10-25 16:33 jianzhan
<%--第1种方式--%>

  <link href="/site.css" rel="stylesheet" type="text/css" />

  <%--第2种方式--%>

  <link href="site.css" rel="stylesheet" type="text/css" />

  <%--第3种方式--%>

  <link href="../site.css" rel="stylesheet" type="text/css" />

  <%--第4种方式--%>

  <link href="<%=ResolveUrl("~/site.css")%>" rel="stylesheet" type="text/css" />

  下面,我在剖析1下这4种方式的优缺陷

  方式1:    /url

  用法:

  这个是从网站域名顶部刚开始搜索文档

  假如你的网页页面是:http://dozer.cnblogs.com/article/1.aspx

  引入的css文档时:/css/site.css

  最终的css相对路径便是:http://dozer.cnblogs.com/css/site.css

  也便是说,它会忽视 http://dozer.cnblogs.com 后边的全部物品,随后再加本身

  局限性:

  假如你的网站是1个子网站,例如在IIS下的1个网站中创建运用程序流程(而并不是立即创建1个网站)

  那末你网站的根文件目录就会是:http://www.test.com/website

  难题来了,由于引入全是依据url来分辨的,它压根没法差别你网站的根文件目录是甚么,因此分析出来的详细地址也会不正确,会把"website"都忽视掉

  方式2:  url

  用法:

  这个是相对性的相对路径

  假如你的网页页面是:http://dozer.cnblogs.com/article/1.aspx

  引入的css文档时:css/site.css

  最终的css相对路径便是:http://dozer.cnblogs.com/article/css/site.css

  也便是说,它会除去最终1个"/"后的物品,随后加生本身

  局限性:

  这个的局限性有2个:

  第1:假如你在masterpage中做了1个引入,可是內容页却在不一样的文档夹,最终的引入是依据內容页来分辨的,因此就错误了。

  第2:假如你用了UrlRewrite,那url和具体文档系统软件是不一样的,那很显著也会错误。

  方式3:     ../url

  用法:

  实际上这个和方式21样,../ 是回到上1级的意思

  假如你的网页页面是:http://dozer.cnblogs.com/article/1.aspx

  引入的css文档时:../css/site.css

  最终的css相对路径便是:http://dozer.cnblogs.com/css/site.css

  局限性:

  局限性和方式21样

  此外,IIS默认设置不容许用 ../ 来回到父级,因此要配备1下

  方式4:     <%=ResolveUrl("~/url")%>

  用法:

  这个用法和方式1类似,可是有个益处,便是能够防止方式1的局限性

  由于这个是靠服务器分析出来的,而并不是在顾客端实行的,因此能鉴别子网站

  假如你的网页页面是:http://www.cnblogs.com/dozer/article/1.aspx

  引入的css文档时:<%=ResolveUrl("~/site.css")%>

  最终的css相对路径便是:http://www.cnblogs.com/dozer/site.css

  局限性:

  这个方式是全能的,可是也并不是完善的

  由于要靠服务器分析,因此自然不可以所见即所得啦,也有便是要多打那末多字,很不便.