前言

最常看见的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 ?)的更多相关文章

  1. css加载方式link和@import的区别！

    本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别. 1. 老祖宗的差别.link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可 ...

  2. css的两种引用方式 link和@import

    学习web开发的最大乐趣就是不断的发现自己以前不曾见过的东西,这些东西对于我来说是那么的新鲜有趣. 比如说今天偶尔研究别人的网站,就发现了有趣的东东. 当点开此网页的css时(这个css文件命名方式就 ...

  3. Unit 4.css的导入方式和选择器

    一.什么是css CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方 ...

  4. 调用css时，用link 和 @import url 有什么区别

    加载css link与@import的区别: 其实 link 与 @import 在显示效果上还是有很大区别的,基本上来看 link 的加在会在页面显示之前全部加在完全,而 @import 会是读取完 ...

  5. CSS的导入方式：link与import方式的区别

    在前端开发中,加载CSS样式文件有两种方式:link方式与import方式,它们之间的区别主要有以下几点: 1.兼容性不一样 link是一个HTML标签,所以它不存在兼容性问题,而import方式则具 ...

  6. CSS引入的方式有哪些? link和@import的区别是?转载

    CSS引入的方式有哪些? link和@import的区别是? HTML 中引入 CSS 的方式 有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS ...

  7. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  8. HTML网页设计中 link 和 @import 的区别

    页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import.外部引用CSS两种方式link和@import的方式分别是 ...

  9. 【转载】link和@import的区别

    link和@import的区别 原文地址:http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html 页面中使用CSS的方式主要有3种:行内添 ...

随机推荐

  1. [转]Makefile中的wildcard/notdir/patsubst

    1.wildcard : 扩展通配符 2.notdir : 去除路径 3.patsubst :替换通配符 例子:建立一个测试目录,在测试目录下建立一个名为sub的子目录$ mkdir test$ cd ...

  2. LeetCode（103） Binary Tree Zigzag Level Order Traversal

    题目 Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left ...

  3. Debian 修改时间时区

    http://blog.51cto.com/zhujiangtao/1554976 第一种图形化方面推荐使用 第二种修改文件的形式 只是在当前的terminal生效 笔者使用的是: debian9.3

  4. 【php学习之路】微信公众帐号

          上个月开始学习php,算上中间放假的时间差不多有一个月了.这段时间呢,每天上班没事的时候不慌不忙的看下php,刚开始也只是看下php中文手册,看完一遍好像没什么感觉.于是就想啊,做个什么东 ...

  5. python算法-快速排序

    快速排序: 学习快速排序,要先复习下递归: 递归的2个条件: 1. 函数自己调用自己 2.有一个退出的条件 练习:基于递归下一个函数,计算n!并且求出当n等于10的值. n!=n * n-1*…..* ...

  6. Non-maximum suppression(非极大值抑制算法）

    在RCNN系列目标检测中,有一个重要的算法,用于消除一些冗余的bounding box,这就是non-maximum suppression算法. 这里有一篇博客写的挺好的: http://www.c ...

  7. 【Openjudge】岛屿（并查集）

    题目链接 此题是并查集.考虑到水位不断上涨,所以将时间倒转.先统计最后一天的联通块个数,每一天浮出水面的块进行计算.复杂度O(玄学). 代码如下 #include<cstdio> #inc ...

  8. BZOJ 3601 一个人的数论 ——莫比乌斯反演 高斯消元

    http://www.cnblogs.com/jianglangcaijin/p/4033399.html ——lych_cys 我还是太菜了,考虑一个函数的值得时候,首先考虑是否积性函数,不行的话就 ...

  9. git提交之后没有push，代码被覆盖之后恢复

    git  reflog  通过这个看commit id git reset [commit id] --hard   有时候要删除一个index.lock文件.

  10. sublime text3安装angularjs插件

    sublime能够支持AngularJS开发那绝对是一件很爽的事情.下面我一步步讲解如何为sublime安装AngularJS插件. 首先提供一个破解版的sublime text 3的下载地址:htt ...