CSS 的导入方式 (link or import ?)
前言
最常看见的CSS的使用方式有三种
1. 在span, div 等标签上直接使用 style 属性定义CSS
<span style="color:blue">This is Blue.</span>
2. 在当前的html 文件里定义class, 在html 标签中用class 的属性设置。
<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<style type="text/css">
.blue{
color:blue
}
</style>
</HEAD> <BODY>
<span class="blue">This is Blue.</span>
</BODY>
</HTML>
3. 第三种方式就是把CSS 的定义单独到一个文件里。 html 文件里使用link 引入css文件
<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<link href="blue.css" rel="stylesheet" type="text/css" />
</HEAD> <BODY>
<span class="blue">This is Blue.</span>
</BODY>
</HTML>
4. 除了以上方式之外, 另一种方式就是使用 @import
<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<style type="text/css">
@import url(blue.css);
</style>
</HEAD> <BODY>
<span class="blue">This is Blue.</span>
</BODY>
</HTML>
前两种方式自不必多说。 这里比較一下 link 和 @import 的方式?
Link 与 @import 差异
1. 来源与作用。 link 属于 XHTML 标签, 除了能够载入CSS外, 还能够定义RSS, 定义rel 连接属性等其它作用。
而@import 全然是CSS提供的一种方式, 仅仅能载入CSS。
2. 载入顺序不同。 link 引用的CSS会在页面被载入的时候同一时候载入;
而@import 引用的CSS会等到页面所有被下载完再被载入, 所以有时候会出现開始没有样式,之后页面闪烁一下出现样式(在网速慢的时候会更明显)。
3. 兼容性的区别。
@import 是CSS2.1 提出的,老的浏览器不支持。IE5 以上的才干识别(只是如今来说,已经不是问题了,应该非常少有使用IE5及下面的浏览器了)。
link 浏览器都支持。
4. 使用javascript 能够控制到 link, 但@import 却无法控制。
<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<link id="linkId" href="" rel="stylesheet" type="text/css" />
</HEAD> <BODY>
<span class="blue">This is Blue.</span> <script>
document.getElementById("linkId").href = "blue.css";
</script> </BODY>
</HTML>
5. @import 能够在CSS 中再此引入其它样式表。
能够创建一个主样式表。 在主样式表中引入其它的样式表。
这种优点是便于改动和扩展。
CSS拆分成文件, 尽管对于开发和维护来说比較方便和清晰。 可是有一个缺点是会对站点server产生较多的HTTP请求。
浏览量大的站点还是慎重使用,像一些大型訪问量大的站点的首页,会直接把CSS或js 直接写在html 中。
假设你想样式表并行载入,以使页面更快。请使用LINK 替代@import。
前言
前言
CSS 的导入方式 (link or import ?)的更多相关文章
- css加载方式link和@import的区别!
本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别. 1. 老祖宗的差别.link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可 ...
- css的两种引用方式 link和@import
学习web开发的最大乐趣就是不断的发现自己以前不曾见过的东西,这些东西对于我来说是那么的新鲜有趣. 比如说今天偶尔研究别人的网站,就发现了有趣的东东. 当点开此网页的css时(这个css文件命名方式就 ...
- Unit 4.css的导入方式和选择器
一.什么是css CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方 ...
- 调用css时,用link 和 @import url 有什么区别
加载css link与@import的区别: 其实 link 与 @import 在显示效果上还是有很大区别的,基本上来看 link 的加在会在页面显示之前全部加在完全,而 @import 会是读取完 ...
- CSS的导入方式:link与import方式的区别
在前端开发中,加载CSS样式文件有两种方式:link方式与import方式,它们之间的区别主要有以下几点: 1.兼容性不一样 link是一个HTML标签,所以它不存在兼容性问题,而import方式则具 ...
- CSS引入的方式有哪些? link和@import的区别是?转载
CSS引入的方式有哪些? link和@import的区别是? HTML 中引入 CSS 的方式 有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS ...
- 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
高效开发之SASS篇 作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
- HTML网页设计中 link 和 @import 的区别
页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import.外部引用CSS两种方式link和@import的方式分别是 ...
- 【转载】link和@import的区别
link和@import的区别 原文地址:http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html 页面中使用CSS的方式主要有3种:行内添 ...
随机推荐
- Ubuntu 14.04在虚拟机上的桥接模式下设置静态IP
1.虚拟机--->虚拟机设置 将虚拟机设置为桥接模式 2.查看window 网卡以及IP信息 cmd下输入 ipconfig -all 可以看到,我的网卡为Realtek PCIe GBE Fa ...
- Ubuntu 16.04上thunderbird配置163邮箱出现“配置无法被验证-请查看用户名或密码是否正确?”
在Ubuntu 16.04 上用thunderbird配置163免费邮箱时出现的提示信息如图1: 图1 提示信息 网上有不少方法都说是将接收和发出的主机名分别改为 imap.ym.163.com 和 ...
- WordPress实现前台登录功能
一.添加登录表单 1.首先在当前主题的目录下新建一个php文件,命名为page-login.php,然后将page.php中的所有代码复制到page-login.php中: 2.删除page-logi ...
- pytorch使用过程中遇到的一些问题
问题一 ImportError: No module named torchvision torchvison:图片.视频数据和深度学习模型 解决方案 安装torchvision,参照官网 问题二 安 ...
- mysql5.7.20搭建
官网mysql下载源码安装 下载MySQL5.7.20源码包,wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.20.tar.g ...
- 【bzoj3489】A simple rmq problem 三维KD-tree
题目描述 因为是OJ上的题,就简单点好了.给出一个长度为n的序列,给出M个询问:在[l,r]之间找到一个在这个区间里只出现过一次的数,并且要求找的这个数尽可能大.如果找不到这样的数,则直接输出0.我会 ...
- BZOJ 3998 [TJOI2015]弦论 ——后缀自动机
直接构建后缀自动机. 然后. 然后只需要再后缀自动机的go树上类似二分的方法进行查找即可,实际上是“26分”. 然后遇到了处理right集合的问题,然后觉得在go和parent树上上传都是可以的,毕竟 ...
- EC++学习笔记(一) 习惯c++
条款01:c++多范式编程语言 条款02:尽量以 const, enum, inline 替换#define 1. 提供类型安全检查 2. 去除函数调用开销 3. 避免宏的二义性 const doub ...
- 【CF659F】Polycarp and Hay(并查集,bfs)
题意: 构造一个矩阵,使得: 矩阵所有格子中数字都小于等于原矩阵,并且至少有一个元素和原矩阵相等, 构造的矩阵除了0以外的数字必须联通并且相等,矩阵中元素之和为K. n,m<=1e3,1< ...
- java面
常被问到的十个 Java 面试题 每周 10 道 Java 面试题 : 面向对象, 类加载器, JDBC, Spring 基础概念 Java 面试题问与答:编译时与运行时 java面试基础1 java ...