使用css外部样式表的方法

所属分类: 网页制作 / CSS 阅读数: 660
收藏 0 赞 0 分享

前言

为什么会有这篇文章,外部引入样式有什么好谈的,不外乎就是

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" href="style.css" />    

就这么简单,还有什么,so easy,我之前都是这么认为的你肯定比我聪明多了~_^,但是当做一个页面在微信上浏览并且修改再浏览的时候我发现不对劲,因为已经上传的样式表木有改变,IOS还好,可以强制刷新页面。但是安卓端这块一直在用微信的缓存,还没有刷新的按钮,所以觉得css引入问题目测应该没有这么简单。

好了,下面都是一些自己的纯扯蛋瞎扯,欢迎前辈多拍砖。
关于路径

在还没有说之前先说下关于css引入的2种方式:

相对路径(Relative Path),顾名思义:就是css文件相对某一个参照物的位置。上物理课的时候老师都会提到相对运动:指某一个物体对另外一个物体的相对于一个固定参照物来是相对运动的。我们走路看汽车的时候觉得汽车往后走,汽车看我们的时候是往前走,那么相对路径也是酱样子的,网页所处目录就是我们的参照物。像刚刚上面这段css代码的引入就是一个相对路径地址,test是网站的目录,style.css文件跟这个网页文件是同处一个目录层级,如图:
2015714181650823.png (240×110)

那么在网页文件index.html引入css应该是

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" href="style.css" />  

假如说css文件放在跟index.html同级目录,名为css文件夹里面,类似这样:
2015714181710946.png (254×73)

假如css放跟目录也就是test这里
2015714181730490.png (244×69)

“/”斜杠符号在这里表示的就是根目录,也就是这些网页文件之间联系的参照物。

绝对路径(Absolute Path),既然是绝对的,那就说明这个地址是唯一性,独立性。相对本地来说,刚刚的站点test的绝对地址为F:\test,相对服务器来说,就应该是127.0.0.1/test类似这样的IP地址。
关于路径引入

要相对路径还是绝对路径引入css文件,个人认为本地预览的时候可以选择相对路径,项目上线的时候改成绝对路径来引入,为什么?有以下几点:

1. 减少索引,绝对地址的唯一性可以确保用户在输入网页的时候,浏览器直接去索引到那个IP地址,直接一刀致命,没有拖沓。而相对路径就要一步步索引目录,这就好比在路上遇见一个心仪的妹纸,我们害羞不敢当面去谈话,于是我们制造了无数的偶遇之后才有胆子上去问联系方式,到最后才发现妹纸早名花有主,早知如此,何必当初呢~

2. 增加外链,对于做SEO的人来说,我们都知道外链能带来不错的权重提高,就算是别人来抓我们的内容,假如它没有改成自己的服务器地址,那说明这个网站的引用地址还是我们的网址,爬虫会通过这个图片引用地址反爬回去,但相对路径引用,因为地址发生变更,因此爬虫爬回去之后找不到相应的文件,因此爬虫的工作也即将停止。

3. 提高排名,假如是你一个干前端的,那么多少都会遇到某一个自己喜欢的动画效果,HTML搞下来了,但是不想要直接把css也下下来,因此会在本地直接调用网络地址。当你预览这个页面的时候不小心点到了引入地址,会跳转到相应的网站css,即使你没有访问其主页,但是你还是访问了他的域名,无意之中还是增加了其访问量。

当然了,第三点是我自己YY出来的,至于是不是我们无从考究,希望有过研究的可以分享一下你们的见解咯。
绝对路径几种表现

一般式

刚刚我们提到了相对来说不管是引用图片还是引用css文件,路径最好是绝对路径,所以上面的style.css文件的引入地址应该是

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" href="http://xxx.com/test/css/style.css" />  

这样的引入似乎是正确了的,各种对SEO来说也达到的满意程度,但是某宝的做法是这么做

某宝式
2015714181748643.png (630×82)

淘宝的css还有js的引入是通过他们的CDN分布式形式,而且后面都带有?t=20150105,这跟我们的做法不太一致,后面的20150105应该是这个时间更新的,为了方便记住版本信息,但是为什么带“?”问号。于是有Google一番,各路大神对此的解释可以解答我心中的疑惑:

        标注版本号。
        方便查看最近修改情况。可以是日期。【这是淘宝一样】

        用随机数防止缓存。
        如果更改css,为了避免浏览器缓存,不会及时更新导致页面没有出现相应效果,在使用时带上一个动态参数,让浏览器重新下载这个css文件。

那就好理解了,带“?”只是为了让浏览器把旧版本的css给over掉,重下新的css版本号。这个也好解释了为什么微信浏览已经修改过的css文件,但是样式还没有调试过来,因为微信调用的还是老版本的css文件,因此假如各位csser们想要第一时间能预览到最新修改的样式,那么引入的路径最好是”?=xxx”类似这样的版本号,以便让浏览器重下我们已经修改过的css文件。

Facebook式

假如你能翻墙,能上Facebook,那么不妨看看Facebook的css引入又跟我们国内的不太一样,如图:
2015714181808984.png (615×135)

这么一大堆的大小写英文字母是干嘛的,为什么又跟我们国内的不太一样,问了一下同事,他说是类似哈希加密文件,于是百科一了一下哈希算法,大概解释如下:

    旧译哈希(误以为是人名而采用了音译)。它也常用作一种资讯安全的实作方法,由一串资料中经过散列算法(Hashing algorithms)计算出来的资料指纹(data fingerprint),经常用来识别档案与资料是否有被窜改,以保证档案与资料确实是由原创者所提供。

最后一句话解释很好,就是经常被用来识别是否被篡改。假如说本地和网络上的这个css文件被篡改了,那么它会通知浏览器重下这个已经被修改css文件,然后清掉之前的css缓存。好了,说到缓存的问题,发现某宝的缓存还是蛮赞的。

某宝的css刷新前后对比
2015714181826884.png (946×370)

只有这数字的css每次F5之后都会加载一次,其他的css文件都是304,何为304?简单地说就是启用本地缓存机制,假如说这个css是公用的,基本上不会经常改变,那么不妨可以用给这个文件设置长的缓存机制,这样一来该css文件不用每次都向服务器请求一次,不仅提高了访问速度,而且还可以减少渲染这些文件的流量,应该可以减少相应的一些宽带费用。
按照304代码的百科,首先先发一条指令到服务器,服务器发现其不改变那就返回304,假如改变,那就要通信一次,我在想有没有一种服务器机制,类似淘宝这种global.min.css,基本是一年更新不了几次,能不能用户只需要加载一次,后面的无论怎么刷新都不需要重新加载,不懂这个能不能用JS来实现,问了大拿同事,他说是服务器这边的问题,不需要JS来控制。
后话

嗦嗦,婆婆妈妈说了一大堆,不过总的还是没有改变,

    少用相对路径
    多用绝对路径;
    webapp最好在引入css后加版本号;
    可以适当增加缓存机制。

更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介:在这篇文章里,我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程,该课程旨在向大家提供Web设计和开发的坚实基础,无论读者是谁,此教程完全免费、可访问,并且不需要预备知识。当然,我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介:如果你挠着头想弄清楚优雅降级和渐进增强的区别,我告诉你,这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介:Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介:网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求,先在文章顶部给出链接:《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点。如果对此深以为然的朋友,请一笑过之 首先声明: 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外) 解决:写全单位如padding:0px; 2、水平居中 问题:div里的内容,ie默认为center,而ff默认left 解决:mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序,刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多