@import 与link-小白教程

最新推荐文章于 2024-03-16 21:30:00 发布

Ys@_yxl

最新推荐文章于 2024-03-16 21:30:00 发布

阅读量318

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_45817492/article/details/115447851

版权

@import 与link-小白教程

- 1. @import 与link的基础用法
- 2. link和@import的区别

1. @import 与link的基础用法

1 在HTML文件中使用用link进行引用

link语法结构:

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

2 在HTML文件中的元素中使用import进行引用

@import在html中的语法结构:

<style type="text/css">
@import url(CSS文件路径地址);
</style>

CSS文件路径地址可以不加引号

具体写法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="1.css">
      <style>
        @import url('hello.css');
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3 在css文件中使用import进行引用

@import在css中的语法结构:

@import url(CSS文件路径地址);

具体写法:

@import '2.css'; 
*{
    padding: 0;
    margin: 0;
}
div{
    width: 100px;
    height: 100px;
} 
div{
    background-color: red;
}

2. link和@import的区别

1、从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而@import是css的语法，只有导入样式表的作用。

2、加载顺序：页面被加载时，link会和html同时被加载而；@import引入的 CSS 将在页面加载完毕后被加载。

3、兼容性：@import是 CSS2.1 才有的语法，所以只能在 IE5以上才能识别；而link是 HTML 标签，所以不存在兼容性问题。

4、DOM：javascript只能控制dom去改变link标签引入的样式，而@import的样式不是dom可以控制的。

5、link方式的样式权重高于@import的权重。（有争议）

6、link除了调用css外还可以有其他作用譬如声明页面链接属性，声明目录，rss等等，而@import就只能调用css。

注意:

import与link样式写在HTML上时，权重主要取决于代码加载顺序，后面样式覆盖前面样式。
一般尽量避免使用import方式，且import方式引入放在最下方，用于页面美化。

Ys@_yxl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
@import 与link-小白教程

@import 与link-小白教程1. @import 与link的基础用法2. link和@import的区别1. @import 与link的基础用法1 在HTML文件中使用用link进行引用link语法结构:<link rel="stylesheet" type="text/css" href="hello.css">2 在HTML文件中的元素中使用import进行引用@import在html中的语法结构:<style type="text/css">@i
复制链接

扫一扫