Web网页设计（CSS样式表的几种引入方式）

四种CSS样式表的引入方式

第一种：内联

内联方式指是在标签中直接编写HTML样式的一种方式，style=“”，如下：

<div style="width:300px;height:300px"></div>

此种方式在需要在每个标签中添加所需要的样式，从而造成代码冗余，降低HTML网页的加载速度，故而不推荐使用，但在做小demo或者刚接触HTML时可以使用，此种方式只需了解即可。

第二种：内嵌

此种方式是在head标签中添加一个style标签，在style标签中添加样式，如下：

<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        div{
            background-color:red;
        }
    </style>
</head>

内嵌方式会使页面太“重”，同样做小demo或者刚接触HTML的可以使用。

第三种：外联

外联方式是通过新建一个.css文件，通过link标签引入样式，注意要将link标签添加在头部标签中，如下：

<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" href="css/qq.css"/>
</head>

外联样式直接在css文件中写样式即可，可以通过link来吧样式引到.html文件中，这是一种常用的方式，单独为样式新建一个css文件夹，将控制HTML的css样式编写在css文件中可以更好的维护和管理。推荐使用

第四种：导入

这种方式是在head标签里，添加一个style标签，在写@import URL（），和link方式差不多，如下：

<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        @import url(css/longyu.css);

    </style>
</head>

和link标签实现的效果一样

导入和外联的区别：

link是在页面加载的时候同时加载引入的样式，而@import是在页面加载完成后，再加载引入的样式；并且link是XHTML中的标签，所以兼容所有的浏览器，但@import是在CSS2.1提出的，所以低版本的浏览器会不兼容，link是可以通过JS来改变样式的，@import就不可以；还有就是link可以引入除了css以外的其他文件，但是@import却只能引入css文件。

来源：CSDN

作者：黑哥.

链接：https://blog.csdn.net/qq_44384173/article/details/103862109

标签

css

网页设计

css样式