jsp中@import导入外部样式表与link链入外部样式表的区别

昨天碰到同事问了一个问题,@impor导入外部样式与link链入外部样式的优先级是怎样的,为什么实验的结果是按照样式表导入后的位置来决定优先级。今天就这个问题具体总结如下:

先解释一下网页添加css样式的方法,一共有四种,分别是:
一、内嵌样式——直接在页面的标签里加<div style="border:1px red solid;">测试信息</div>
二、内部样式表——在head部分加入 <style type="text/css">div{margin: 0;padding: 0;border:1px red solid;}</style>
三、链入外部样式表——在head部分加入<link  rel="stylesheet" type="text/css" href="my.css" media="all" />,引入外部的CSS文件
四、导入外部样式表——在head部分加入<style type="text/css">@import url(my.css);</style>
样式表的优先级顺序从高到低依次为:内嵌样式 > 内部样式表 > 导入外部样式表(其实是属于内部样式表)
链入外部样式表内部样式表之间的优先级取决于所处位置的先后,最后定义的优先级最高。
本文主要是做@import导入样式表与link链入样式表的区别探讨,所以其他的不做详谈。
1. 链入外部样式表
链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head>区内,如下:
<head>
……
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all">
……
</head>
上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。media是选择媒体类型,这些媒体包括:屏幕,纸张,语音合成设备,盲文阅读设备等。
2.导入外部样式表
导入外部样式表是指在内部样式表的<style>里导入一个外部样式表,导入时用@import,看下面这个实例:
<head>
……
<style type=”text/css”>
<!--
@import “mystyle.css”
其他样式表的声明
-->
</style>
……
</head>
例中@import “mystyle.css”表示导入mystyle.css样式表,注意使用时外部样式表的路径。方法和链入样式表的方法很相似,实质上它相当于存在内部样式表中的。
注意:导入外部样式表必须在样式表的开始部分,在其他内部样式表上面。
综合度娘的多篇文章和个人理解,两者的区别总结如下:
1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性,等,@import就只能加载CSS了。
2:加载时间及顺序不同。使用link链接的css是客户端浏览你的网页时先将外部的CSS文件加载到网页当中,然后再进行编译显示,所以这种情况下显示出来的网页跟我们预期的效果一样,即使一个页面link多个css文件,网速再慢也是一样的效果;而使用@import导入的CSS就不同了,客户端在浏览网页时是先将html的结构呈现出来,再把外部的CSS文件加载到网页当中,当然最终的效果也是跟前者是一样的,只是当网速较慢时会出现先显示没有CSS统一布局时的html网页,这样就会给阅读者很不好的感觉。这也是现在大部分网站的CSS都采用链接方式的最主要原因。
3:兼容性不同。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
4:使用dom控制样式时出现问题。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
5:导入样式可以避免过多页面指向一个css文件。当网站中使用同一个CSS文件的页面不是非常多时,这两种方式在效果方面几乎是没有不同的,但网站的页面数达到一定程度时(比如新浪等门户),如果采用链接的方式可能就会使得由于多个页面调用同一个CSS文件而造成速度下降,但是一般页面能达到这种程度的网站也会有资本用最好的硬盘,所以这方面的因素也不用怎么担心。
综上所述,一般普通的站点在调用外部样式表的时候,还是尽量选择link链入外部样式表比较好。关于区别中第二点的加载顺序的差别中,找到一个国外的参考文章作为补充资料:http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ 

更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361191.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

EBS调试

一、在请求中的调试&#xff1a; 1、用系统函数fnd_file.PUT_LINE()&#xff0c;然后在请求的查看日志中就可以看到 例如&#xff1a; fnd_file.PUT_LINE(fnd_file.log, l_customer_type); 其中l_customer_type就是要查看的变量。 2、先建一张表&#xff0c;然后在程序中执行…

Acision推出“ forgeathon” –第一个WebRTC应用挑战

Acision推出了“ forgeathon”&#xff0c;这是 面向全球开发人员的 首个在线丰富网络通信&#xff08;WebRTC&#xff09;应用挑战 加入Forgeathon&#xff0c;让Acision帮助您将应用程序或服务推向全球&#xff01; 英国雷丁– 2015年1月6 日 &#xff1a;安全&#xff0c;…

SQL Server 中的ROWID

在SQL Server中没有像Orcal中的rowid&#xff0c;但是可以运用一定的变通达到这个效果。1、建立临时表&#xff0c;其中包含rowid&#xff0c;2、重命名原表后删除临时表USE TianzxSELECT identity(int,1,1) as rowid,flow.* into temptable from flow--建立临时表&#xff0c;…

jsp中四种传递参数的方法

jsp中四种传递参数的方法如下&#xff1a; 1、form表单 2、request.setAttribute();和request.getAttribute(); 3、超链接&#xff1a;<a herf"index.jsp"?aa&bb&cc>name</a> 4、<jsp:param> 下面一一举例说明&#xff1a; 1、form表…

多个退货单

我曾经听说过&#xff0c;过去人们为使方法具有单个出口点而奋斗。 我知道这是一种过时的方法&#xff0c;从未认为它特别值得注意。 但是最近&#xff0c;我与一些仍坚持该想法的开发人员进行了联系&#xff08;最后一次是在这里 &#xff09;&#xff0c;这让我开始思考。 因…

GO 语言编程 windows 环境搭建

参考 : http://blog.csdn.net/love_se/article/details/7754274 首先是安装Go&#xff0c;这里有很详细的安装说明&#xff0c;http://code.google.com/p/golang-china/wiki/Install 或者http://golang.org/doc/install 下面我们在window下面安装&#xff0c;google有提供win安…

建立代理,而不是框架

自从引入Java注释以来&#xff0c;它已成为大型应用程序框架API的组成部分。 此类API的良好示例是Spring或Hibernate的示例&#xff0c;其中添加了几行注释代码可实现非常复杂的程序逻辑。 尽管人们可以争论这些特定API的缺点&#xff0c;但大多数开发人员都会同意&#xff0c;…

HttpServletRequest.getContextPath()取得的路径

如果项目名称为test,你在浏览器中输入请求路径&#xff1a;http://localhost:8080/test/pc/list.jsp 执行下面向行代码后打印出如下结果&#xff1a; 1、 System.out.println(request.getContextPath()); 打印结果&#xff1a;/test 2、System.out.println(request.getSer…

合理的嵌入式开发学习路线

最近网上好多新手问我&#xff0c;怎么样学习嵌入式开发&#xff1f;其实这个问题很复杂&#xff0c;因为嵌入式开发是个非常复杂的领域&#xff0c;既有深度&#xff0c;也有广度&#xff0c;是个软硬结合的领域。。。我研究的时间也不长&#xff0c;不过以后可能会研究RTOS这…

重点保护

在“ Java的一些句子 ”一文中&#xff0c;我写道&#xff1a; “受保护的方法和字段可以在同一包中的类中使用&#xff08;到目前为止与私有包相同&#xff09;&#xff0c;此外&#xff0c;还可以从其他类中使用受保护的方法和字段&#xff0c;这些类扩展了包含受保护的字段或…

机打发票打印管理

最近公司也从手写发票换成了机打发票&#xff0c;便应财务的要求做了这么一个简单的发票管理及打印系统&#xff0c;程序并不复杂。 使用C#&#xff08;2.0&#xff09; Access&#xff08;97-2003版&#xff09;/WinForm形式 系统菜单中有企业基本信息设置&#xff0c;见图4…

程序员需要了解的一点组织行为学知识

程序员由于天天和逻辑打交道&#xff0c;所以在世故的人眼里往往显得过于简单。 近来看组织行为学&#xff0c;发现其中一节列了很多特别的技能。 考虑到也许他们对程序员群体很有启示意义&#xff0c;就追加了一点说明&#xff0c;把它放在博客里。 相信这对想成为管理者的程序…

序列化的概念

讨论了为什么Optional不可序列化以及如何处理&#xff08;即将推出&#xff09;之后&#xff0c;让我们仔细看看序列化。 总览 这篇文章介绍了序列化的一些关键概念。 它尝试精简地执行此操作&#xff0c;而不会涉及太多细节&#xff0c;包括将建议降至最低。 它没有叙述&…

正则表达式总结及一些有用的例子

背景 正则表达式的用处十分广泛&#xff1a;字符串处理、输入验证等&#xff0c;特别是在爬取网页中对网页内容的清洗更需要正则。 正则表达式 基本所有的语言都支持正则表达式&#xff0c;或者内置或者引入。正则的语法很多&#xff0c;但每种语言对正则支持的程度都不同&…

对PostgreSQL SPI例子的学习

[作者&#xff1a;技术者高健博客园 mail: luckyjackgaogmail.com ] http://www.postgresql.org/docs/9.1/static/spi-examples.html SPI 的例子里面没有说&#xff0c;是如何编译和部署的&#xff0c;我这里补充下&#xff1a; 编译与部署&#xff1a; [rootlocalhost soft]#…

Java飞行记录器(JFR)

JFR是Java分析器&#xff0c;它使您可以研究代码的运行时特征。 通常&#xff0c;您将使用探查器来确定代码的哪些部分导致大量内存分配或导致消耗过多的CPU。 有很多产品在那里。 过去&#xff0c;我使用过YourKit&#xff0c;OptimizeIt&#xff0c;JProfiler&#xff0c;Ne…

图像识别SLIC、Haralick texture features(自备)

SLIC 简单线性迭代聚类(SLIC ),它采用k-means聚类方法来有效地生成超像素。 SLIC超像素分割详解&#xff08;一&#xff09;&#xff08;二&#xff09;&#xff08;三&#xff09;_超像素分割 样本-CSDN博客 超像素分割 & SLIC算法 & 使用示例_slic分割算法matlab-C…

DOM

1 标签操作 直接查找 documeny.getElementById() 间接查找 文件内容&#xff1a; 1.innterText只有文本 2.innerHTML所有内容 3.value input便签 value 获取当前标签中的值 select标签 value 获取当前选中的value selectedIndex 设定当前选中的value textarea标签…

在Java中给出的时间

tl; dr&#xff0c;您可以使用标签来阐明给定的测试时间样式。 什么时候给出&#xff1f; 给定的时间&#xff0c;然后是一种指定系统行为的常用样式&#xff0c;其中您的测试分为三个部分。 给定的部分列出了测试的前提条件&#xff0c;即在开始之前假设世界所处的任何状态。…

Vue.js环境搭建

简述小弟刚刚开始写博客&#xff0c;学习VueJs也不久&#xff0c;开这个博客&#xff0c;只是为了多多学习和记录自己的 学习之旅&#xff0c;可能很多地方都很浅薄&#xff0c;还望各位海涵和多多拍砖。 学习Vue也有两个多月了&#xff0c;接触它是在一个很偶然的机会。当初是…