CSS的几种引入方式

2022-10-31

阅读：51

CSS的几种引入方式

内部样式表

在html文件 style标签内直接添加样式

<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>
        .box{
            padding: 20px;
        }
    </style>
</head>

link标签引入

在html文件中声明使用外部资源

<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>
    <link rel="stylesheet" href="./css/common.css" type="text/css">
</head>

@import 方式

异步引入css的方式，在整个html加载完成之后才会加载，会导致页面闪烁，不推荐使用

<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 './css/style.css'
    </style>
</head>

内联样式

<body>
    <div class="title" style="font-size: 16px;color:red;">Hello Word</div>
</body>

搜索一下

加入前端e栈