CSS @import 用法

目录结构a.cssp {color: pink}b.css/* 引入 a.css，注意结尾需要分号*/@import 'a.css';/* 或者 @import url('a.css'); */p {font-size: 30px;}index.html<!DOCTYPE html><html lang="en"><head><meta charset=

tanleiDD

6873人浏览 · 2021-03-06 19:25:50

tanleiDD · 2021-03-06 19:25:50 发布

目录结构

在这里插入图片描述

a.css

p {
    color: pink
}

b.css

/* 引入 a.css， 注意结尾需要分号  */ 
@import 'a.css';	/* 或者 @import url('a.css'); */  

p {
    font-size: 30px;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import './style/b.css';
        p {
            font-style:italic;
        }
    </style>
</head>

<body>
    <p>style</p>
</body>
</html>

效果

在这里插入图片描述

注意事项

使用@import语句引入样式时，结尾需要加分号;
在html文档中使用@import时，需要在style标签里面
不推荐使用@import语句
- @import引入的 CSS 将在页面加载完毕后被加载
- @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别