本篇文章重点:

link引用CSS时,在页面载入时同时加载;

import需要页面完全载入后加载;

link支持使用javascript控制DOM去改变样式,而Import不支持

下面待我娓娓道来:

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

XML/HTML代码

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" /> 

XML/HTML代码

<style type="text/css" media="screen">
@import url("CSS文件");
</style>

二者都是外部引用CSS的方式,但是存在一定区别:

区别1:老祖宗的差别:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事物;@import就只能加载CSS

区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

区别3:link是XHTML标签,无兼容性问题;@import是在CSS提出的,低版本的浏览器不支持。

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

区别5:@import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他样式表,如:main.css

———————-
@import “sub1.css”;
@import “sub2.css”;
sub1.css
———————-
p {color:red;}
sub2.css
———————-
.myclass {color:blue}
这样做有一个缺点,会对网站服务器产生过多的HTTP请求,以前是一个文件,而现在却是两个或更多文件了,服务器的压力增大,浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码,他们总会把css或js直接写在html里,而不用外部文件。

link和Import区别的更多相关文章

  1. css link和@import区别

    1.link语法结构 <link href="CSSurl路径" rel="stylesheet" type="text/css" / ...

  2. css link和@import区别用法

    这里link与@import介绍的是html引入css的语法单词.两者均是引入css到html的单词. 1.link语法结构<link rel="stylesheet" ty ...

  3. 引入css文件时,css link和@import区别

    这里link与@import介绍的是html引入css的语法单词.两者均是引入css到html的单词. 一.了解基本 1.link语法结构 <link href="CSSurl路径&q ...

  4. 添加css的方式:link与@import区别

    如何在html中添加css? 在html中设置css共有三种方式,分别是: 行内式 内嵌式 导入式-link 导入式-@import 1.行内式.即在html标签中的style属性中设置css,值得注 ...

  5. link与@import区别整理,一个表格带你了解

    网上有许多link和@import的文章,不过大多比较零散,个人觉得一个表格的话看起来能够直观的表达. 于是制作了如下表格: 关于权重这个存在着一些争议,这次碰巧看到了一篇的博客很好的解释了这个问题, ...

  6. link和@import区别

    推荐使用:link 区别 1.从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用:link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS.rel 连接属性 ...

  7. CSS文件引入link和@import 区别

    1.(本质区别)link 属于 HTML 标签,而 @import 完全是 css 提供的一种导入 css 文件的规则. 2.文件加载时机有差别: 当一个页面被加载的时候,link 引用的 css 会 ...

  8. link与@import区别

    1. link属于XHTML标签,@import是css提供的. 2.link在页面加载时加载,@import引用的css等到页面被加载完加载. 3.@import只在IE5以上可用,link无兼容问 ...

  9. link与import区别

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

随机推荐

  1. 【Spring Cloud】 总结

    一.Spring Cloud简介 简单来说,Spring Cloud 就是致力于分布式系统.微服务等的一套在目前非常火热的框架.但它的本身也是一系列框架的有序集合(由多个模块组成). 相比较于Dubb ...

  2. centos7搭建docker并部署lnmp (转)

      1.首先呢先更新yum源 yum -y update 2.1.安装docker存储库 yum install -y yum-utils \ device-mapper-persistent-dat ...

  3. 逆向破解H.Koenig 遥控器 Part 2

    逆向破解H.Koenig 遥控器 Part 2 到目前为止,我们已经知道了RF收发器的安装过程,下面是我们所掌握的东西 : l 无线电收发器是一个Avantcom A7105 l 调制是FSK l 频 ...

  4. leetcode第6题:Z字形变换--直接模拟求解法

    [题目描述] 将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" 行数为 3 时,排列如下: 之后,你 ...

  5. markdown实现点击链接下载文件

    今天用Markdown工具,需要实现一个点连接下载文件的功能,看起来很多简单我也没多想就直接写了,并且单个页面测试的时候也挺正常,就发布了,但是发布后使用的时候发现问题了,浏览器中直接点击链接没反应, ...

  6. JS笔记02

    回顾: html: 超文本标记语言 后缀名: *.html 或 *.htm 标签分类: 围堵标签: 双标签 <html>标签体</html> 空标签: 单标签 <br/& ...

  7. IPC之util.c源码解读

    // SPDX-License-Identifier: GPL-2.0 /* * linux/ipc/util.c * Copyright (C) 1992 Krishna Balasubramani ...

  8. 小程序+tgit

    1.微信公众平台-设置-开发者工具  开通 腾讯云和tgit权限管理 如果遇到问题 ..用户二次验证什么的   直接去 腾讯云-安全设置 将“敏感操作”和“异地登陆” 中的保护去掉 2.微信公众平台- ...

  9. 多组件共享-vuex —— 使用vuex 报错 actions should be function or object with ”handler“

    vuex分模块使用时出现的问题,单文件暂时没有用到 原因是在action 文件中没有任何定义(即:文件为空)或则 action 没有任何方法返回,将action在模块引用时去掉即可 转自:https: ...

  10. Linux根目录下各目录文件类型及各项缩写全称

    bin(binary) :常见linux命令.系统所有用户命令目录文件dev(device) : 设备驱动存储目录文件media: 多媒体及挂载目录proc (process):进程信息文件sbin( ...