使用css外部样式表的方法

所属分类: 网页制作 / CSS 阅读数: 697
收藏 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后加版本号;
    可以适当增加缓存机制。

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

CSS配合JavaScript做酷的动态页面效果

  利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

  想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:   通过许多实际项目,
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程:li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位(position)

  使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。   其实,要想控制好层的绝对定位,只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

  如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

  在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。   相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

  水平对齐(text-align),用以设定元素内文本的水平对齐方式。   1.语法   text-align具体参数如下: 语法:text-align:left|right|center|justify 说明:设定元素内文本的水平对齐方式。 参数:left:左
收藏 0 赞 0 分享
查看更多