CSS引入方法全解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43552734/article/details/114380176

引入CSS的四种方式

行内式：直接使用html标签的style属性

<h1 style="color: green;text-align: center;">hello</h1>

内嵌式：在head标签内，使用style标签引入css

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

    <!--在head标签内使用style标签-->
    <style>
        <!--指定h1的样式-->
        h1{
           color: red;
           text-align: center; 
        }
    </style>

</head>
<body>
    <!-- 内嵌式 -->
    <h1>hello</h1>
</body>

外链式

创建css文件，注意名字不要以数字开头
html文件中，在head标签使用link标签引入css样式
外链式引入的css文件，与html并行加载

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
    <!--外链式引入css文件-->
     <link rel="stylesheet" href="./test.css">
</head>
<body>
    <!-- 外链式 -->
    <h1>hello</h1>
</body>

导入式

在style标签内，使用@import url(“路径”)引入独立的css文件
这种方式是html加载之后，才加载css。会影响样式渲染的速度
在css文件中也可以使用@import导入样式

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
    <!-- 导入式导入css样式文件 -->
     <style>
         @import url(./css/test2.css);
     </style>
</head>
<body>
    <!-- 导入式 -->
    <h1>hello</h1>
</body>