探讨:网页外部引用CSS的两种方式

2016-02-19 23:47 7 1 收藏

今天图老师小编给大家介绍下探讨:网页外部引用CSS的两种方式,平时喜欢探讨:网页外部引用CSS的两种方式的朋友赶紧收藏起来吧!记得点赞哦~

【 tulaoshi.com - Web开发 】

 有很多网页中的CSS链接与引用是这样写的:

style type="text/css" media="screen"
@import url("http://www.webjx.com/abc.css");
/style

  而很多网站使用的都是link

link rel="stylesheet" rev="stylesheet" href="webjx.css" type="text/css" media="all" /

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  而像google 百度 163等网站他们都是直接写在网页中
  当然使用链接link和导入import的好处就是易于维护,但当网速比较慢的时候,会出现加载中断的情况,导致页面排版错误
  他俩的作用相同
  唯一的不同是服务对象不一样

  @import 为CSS服务
  link是为当前的页服务

  经典有网友说 @import会优先执行。
  外部引用CSS中 link与@import的区别

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  这两天刚写完XHTML加载CSS的几种方式,其中外部引用CSS分为两种方式link和@import。
  本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。

  差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。
  link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。

  差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS 的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。

  差别3:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

  差别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

  大致就这几种差别了(如果还有什么差别,大家告诉我,我再补充上去),其它的都一样,从上面的分析来看,还是使用link标签比较好。

来源:http://www.tulaoshi.com/n/20160219/1630634.html

延伸阅读
标签: PHP
      在网页制作过程中怎样在不刷新页面的情况下使前台页面和 后台CGI页面保持交互一直是个问题。这里介绍两个我在实践中使 用的方法。     方法一:通过Cookie交互。一共是三个文件,分别为: index.htm,action.php,main.htm       原理为前台页面main.ht...
代码如下: package com.demos; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; public class GetScreenActivity extends Activity { private Button firstBtn = null; private Button secBtn = null; @Override pr...
标签: Web开发
之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐。学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery。Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值)。在所要提交的表单中,如果元素很多的话...
导读:本文主要讨论手机手机客户端的两种主要的界面布局与设计方式,对于手机设计师来说,此类文章比较少见,当然其中对于用于体验与可用性的实现依然很普遍。 手机产品设计与传统的桌面和web产品设计相比,最显著的约束是 设计空间的急剧缩小 。打个比方,这就像从一个100平米的房子搬到5平米的单间,东西没少一样,可以施展的空间却小了几十...
标签: Web开发
即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...

经验教程

91

收藏

28
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部