CSS中link和@import的使用区别_通过@import引入css和link引入css有啥区别-程序员宅基地

技术标签: css  前端  html  

CSS中link和@import的使用区别

1、兼容性问题

@import是css2.1引入,只有高版本的IE浏览器支持(大于IE5版本以上的),
link属于html元素不存在兼容问题。

2、加载顺序

@import在页面加载完成后才可以加载css文件,
link因为属于html元素,所以在页面加载时同时加载css文件。

3、从属关系

@import是 是css 的一个标签 ,只有导入样式表的作用,
link是html提供的标签,不仅可以加载 css 文件,还可以定义RSS(RSS教程:) 、rel 连接属性等。

4、引用方式

import进行引用:

<style type="text/css">
        @import url(my.css);
</style>

link进行引用:

<link rel="stylesheet" type="text/css" href="my.css">

5、DOM可控性

可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。(JavaScript可以获取link标签元素,但获取不到@import,因为@import只是一种CSS语法)。

总结:

@import与link本质区别也是最重要的区别就是它们的从属关系的不同,本质上使用选择差别不大,但为了软件中编辑布局网页html代码,一般使用link,也推荐使用link。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Zhang__Hao__/article/details/118596123

智能推荐

Android adb shell相关命令_android的shell命令工具:设备规范管理-程序员宅基地

文章浏览阅读711次。adb(调试桥):debug工具。adb作用:借助adb工具,可以管理设备或手机模拟器状态。adb相关操作命令如下: 1. 显示系统中全部Android平台: android list targets2. 显示系统中全部AVD(模拟器): android list avd3. 创建AVD(模拟器): android create avd_android的shell命令工具:设备规范管理

Centos 7.9 在线安装 VirtualBox 7.0_centos安装virtualbox-程序员宅基地

文章浏览阅读769次,点赞10次,收藏7次。Centos 7.9 在线安装 VirtualBox 7.0_centos安装virtualbox

VsCode 配置java环境(详细教程)_vscode配置java开发环境-程序员宅基地

文章浏览阅读7.3w次,点赞156次,收藏636次。下载和安装java,VsCode 快速配置 java环境,教程带图简单易懂。_vscode配置java开发环境

【Ubuntu命令大全】_ubuntu可执行文件如何用命令执行-程序员宅基地

文章浏览阅读3.1k次,点赞4次,收藏29次。Ubuntu命令大全,方便使用_ubuntu可执行文件如何用命令执行

mysql错误:java.sql.SQLException: The server time zone value '�й���׼ʱ��' is unrecognized or represents_eclipse连接mysql 出错java.sql.sqlexception: the server-程序员宅基地

文章浏览阅读793次。问题:java.sql.SQLException: The server time zone value ‘�й���׼ʱ��’ is unrecognized or represents more than one time zone. You must configure either the server or JDBC driver (via the serverTimezone con..._eclipse连接mysql 出错java.sql.sqlexception: the server time zone value

c/c++数组详解_c++数组概念-程序员宅基地

本文介绍了C/C++数组的概念和特点,以及一维数组的定义方式。数组是存放相同类型数据元素的集合,具有相同数据类型和连续内存位置的特点。文章以代码示例的方式展示了一维数组的定义和使用。

随便推点

Machine Learning 2 - 非线性回归算法分析_非线性回归分析方法-程序员宅基地

文章浏览阅读2.8k次。2017-08-02@erixhao 技术极客TechBoosterAI 机器学习第二篇 - 非线形回归分析。我们上文深入本质了解了机器学习基础线性回归算法后,本文继续研究非线性回归。非线性回归在机器学习中并非热点,并且较为小众,且其应用范畴也不如其他广。鉴于此,我们本文也将较为简单的介绍,并不会深入展开。非线性回归之后,我们会继续经典机器学习算法包括决策_非线性回归分析方法

hive基本函数_josn mincol-程序员宅基地

文章浏览阅读164次。一、关系运算:1.等值比较: =语法:A=B操作类型:所有基本类型描述:如果表达式A与表达式B相等,则为TRUE;否则为FALSE举例:hive>select 1 from lxw_dual where 1=1;12.不等值比较: <>语法: A <> B操作类型:所有基本类型描述:如果表达式A为NULL,或者表..._josn mincol

FI 与SD MM相关接口配置_sd 和fi 接口产生什么凭证?-程序员宅基地

文章浏览阅读767次。1 FI/SD 借口配置FI/SD通过tcode VKOA为billing设置过帐科目,用户可以创建自己的科目定义数据表。 科目是做到COA级的,通过KOFI/KOFK这两个condition type确定分别过帐到FI和CO凭证中。 由于PricingProc.是同Sale_sd 和fi 接口产生什么凭证?

开发与研发-程序员宅基地

文章浏览阅读229次。转:http://blog.sae.sina.com.cn/archives/981按:这几天我一直在写这篇东西,本来是胸有成竹,没想到后来越写越发现自己在这个题目下有太多话想说,而以我现在的能力又不能很好地概括总结,以至于越写越长,文章结构也变得混乱,到后来修改的时候每次都要考虑好久才能下笔,所以决定拆成两部分来发,以便阅读。这篇写得我心力交瘁,质量不算好,凑合着看吧。同样是写程序..._研发和开发

关于android双进程守护-后台持续定位功能+项目IM中写到自己的即时通讯_jobintentservice跨进程-程序员宅基地

文章浏览阅读1.6k次。1.关于进程守护无非就是6.0以下,6.0以上的高版本保活a.android中6.0以下的保护采用双线程守护即可是aidl (1)创建aidl文件 interface IServiceAidlInterface { String getServiceName(); } (2)创建本地service是LocalService类实现aid..._jobintentservice跨进程

FastGithub:github加速神器,解决github打不开、用户头像无法加载、releases无法上传下载、git-clone、git-pull、git-push失败等问题。_fastgithub 程序将自动关闭:系统已运行其它实例-程序员宅基地

文章浏览阅读657次。FastGithub:github加速神器,解决github打不开、用户头像无法加载、releases无法上传下载、git-clone、git-pull、git-push失败等问题。_fastgithub 程序将自动关闭:系统已运行其它实例

推荐文章

热门文章

相关标签