安科网

页面导入样式时，使用link和@import有什么区别？

wangjie

wangjie

2020-07-08

关注 关注

  1. link属于XHTML标签，除了加载CSS外，还能定义rel连接属性等作用，而@import是CSS提供的，只能用于加载CSS。

  2. 页面被加载时，link会同时被加载，而@import引用的CSS会等页面被加载完再加载。

  3. import是CSS 2.1提出的，只在IE5以上才能被识别，存在兼容问题，而link是XHTML标签，无兼容问题

  4. link是XHTML标签,它不仅可以引入css文件，还可以引入网站图标或者设置媒体查询。

  5. @import是CSS提供的语法规则，只能用来加载css。

  6. @import一定要写在除@charset外的其他任何 CSS 规则之前，如果置于其它位置将会被浏览器忽略。而且，在@import之后如果存在其它样式，则@import之后的分号是必须书写，不可省略的。

  7. link引入css文件，页面载入同时载入css文件，@import在页面完全载入之后载入css文件，在网络较慢情况下一开始会没有css样式。

  8. link在浏览器中没有兼容问题。@import在css2.1中提出，低版本浏览器会不支持。

  9. link中的css可以被javascript获取进而控制DOM，而@import不支持。

css css样式

wangjie

wangjie

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

CSS元素选择器是怎样运作的？

在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的 SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 样式属性，最终交给浏览器解析并套用。但是你想过没有这是如何实现的呢?CSS

jiedinghui 2020-10-25

CSS(Cascading Style Sheets)样式更改——过渡、动画

元素从一种样式逐渐改变为另一种的样式。cubic-bezier在cubic-bezie函数中定义自己的值，可能的值是0至1之间的数值

Ladyseven 2020-10-22

如何在Shadow DOM/Web组件中覆盖CSS

Web组件的主要目的之一是提供封装——能够隐藏HTML标记结构和CSS样式，并与页面上的其他代码分离，这样不同的部分就不会冲突，通过这种方式，这样代码就可以保持漂亮和干净。影子DOM为我们提供了范围限定的样式封装，并提供了一种让我们随意选择进入外界的方法。

zuncle 2020-09-28

使用这些不太常用的 CSS 属性，让我在前端布局效率上，又提高了一个层次！

有很多CSS属性，有些人不了解，或者他们了解它们，但是忘记在需要时使用它们。其实，有时候我们用 JavaScript 来实某些交互，CSS 一个属性就能搞定了，这可以大大节约我们编码的时间。作为前端开发人员，我们经常会遇到这样的事情。所以我问自己，为什么

xiaohuli 2020-09-02

16个非常有用的CSS伪选择器，你千万不要错过了！

熟悉所有的 CSS 是实现这个目标的一种方法 —— 另一种是实施最佳实践和尽可能的减少代码。这个伪元素选择器选择换行之前文本的首行。这个伪元素选择器应用于元素中文本的首字母。应用于任何被用户选中的高亮区域。在 HTML 中，为 HTML 元素。这个规则将应

葉無聞 2020-09-01

前端开发CSS清除浮动的方法有哪些？

在前端开发过程中，非IE浏览器下，当容器的高度自动，并且容器内容中有浮动元素，此时如果容器的高度不能自适应内容的高度，从而使得内容溢出破坏整体布局，这种现象叫做浮动溢出，为了方式这个现象的发生，就需要对CSS样式进行处理，而这个过程就叫做CSS清除浮动。现

nicepainkiller 2020-08-20

CSS动画实例：图文切换

先准备好一张图片，在页面中放置一个类名为container的层作为图文容器，在该层中再定义两个层：一个类名为image-box的层放置图片，一个类名为text-desc的层放置文本描述，HTML代码描述如下：。<p>黄鹤楼是国家首批AAAAA级

AlisaClass 2020-08-09

CSS盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素。该属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。如上图，出现了取两个值中的较大者的现象，即为相邻块元素垂直外边距的合并。这

myloveqiqi 2020-08-09

CSS选择器

应用于页面中的所有元素。匹配元素名称与选择器相似的元素。应用于<h1>元素，<h2>元素和<h3>元素。应用于所有class特性值为note的元素。匹配指定元素的后代元素。应用于所有位于<p>元素中的<

buttonChan 2020-08-02

JavaScript DOM 控制CSS

JavaScript更改P元素的样式：1.<html>2.<body>3.<p id="p2">Hello World!"red";6.</script>7.<p

drdrsky 2020-07-29

20个CSS快速提升技巧

本文涵盖了20个css技巧，可以解决许多工作中常见的问题。css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来

Ladyseven 2020-07-25

妙用CSS变量，让你的CSS变得更心动

「CSS变量」又叫「CSS自定义属性」，为什么会突然提起这个很少人用到的东西呢？因为最近在重构个人官网，不知道为什么突然喜欢用上「CSS变量」，可能其自身隐藏的魅力，让笔者对它刮目相看。谈到为什么会在CSS中使用变量，下面举个栗子，估计大家一看就会明白。看

nicepainkiller 2020-07-24

css基础--盒子模型

1 绝大多数标签都可以看作盒子，可以设置宽高或设置内容；在CSS中，"box model"这一术语是用来设计和布局时使用。　　CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。　　盒模型允许我们

AlisaClass 2020-07-19

css 属性值 display

/* display: block; */ /* 浏览器默认样式 *//* display: inline; */ /* 设置为行内元素 *//* display: none; */ /* 隐藏元素不占空间 *//* display: inline-blo

hellowzm 2020-07-19

vue 对css样式进行修改

background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT

昔人已老 2020-07-19

CSS让页面平滑滚动

兼容情况可以点击这里查看。凡是需要滚动的地方都加一句scroll-behavior:smooth就好了！你别管他用不用得到，也不用管浏览器兼容性如何，你都加上。这就像一个不要钱的免费抽奖，没有中奖，没关系，又没什么损失，中奖了自然好，锦上添花！scroll

骆驼的自白 2020-07-18

CSS 伪元素的用法和使用详解

CSS伪元素是用来添加一些选择器的特殊效果。"first-line" 伪元素用于向文本的首行设置特殊样式。在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：。上

lanzhusiyu 2020-07-19

CSS便捷开发小工具汇总

虽然现代浏览器支持css3，但是一些过往的版本或是目前有些css3属性的应用还是离不开前缀的。一些牛逼且执着于web技术且乐于分享的仁兄就搞了个名叫prefixfree.js的插件可以自动补全前缀。首先在页面任意地方插入插件:. 但是其实部分我们要的想要的

hellowzm 2020-07-19

前端工程师面试题汇总-5

属于元素事件属性的是( )正确答案: A CA. onblurB. requiredC. onfocusD. onsearch. 关于link与@import的区别:区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@impo

CSSEIKOCS 2020-07-18

纯CSS实现密室逃脱游戏

“密室逃脱”这个词想必大家并不陌生，在以前的flash时代，这是一类很经典的益智游戏之一。玩家常常会被困在一间密室中，而过关的目的就是想法设法逃出这件密室。接下来，笔者要用纯CSS实现一款类似的密室逃脱类游戏。是的，你没听错，纯CSS，也就意味着完全没有J

qiupu 2020-11-04
wangjie

wangjie

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号