CSS样式引用方式的区别

最新推荐文章于 2024-07-20 15:40:46 发布

程序员-刘华强

最新推荐文章于 2024-07-20 15:40:46 发布

阅读量55

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/woliuhuaqiangla/article/details/134297920

版权

CSS可以使页面变得更加美观，但是他是怎么用的，你们知道吗？

现在我就带大家来了解一下css的使用方式，他可以分为四种引用方式：行内式、内嵌式、外链式和导入式。

我们接下来一个一个的学习。

首先，是我们的行内式：

<div style="width: 100px; height:100px; border:1px solid black">一个宽高都为100px的块</div>

行内样式是直接把css代码放到HTML标签里面，作为style属性的属性值。

行内样式尽量少使用，维护成本比较高。

内嵌式：

<style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
    <div>这是一个长宽都为100px的块</div>

内嵌式是在HTML中创建一个style标签，把css样式写入style标签内，style标签可以写在HTML中的任何位置，通常写在head标签内。

内嵌式尽量在演示的时候来用，它的代码是不能被别的页面使用的。

外链式：

/*css代码*/
 div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

<link rel="stylesheet" href="css代码路径">
    <div>这是一个长宽都为100px的div</div>

外链式是把css样式单拎出来，放在一个单独的css文件中，然后通过link标签进行连接，如果没有link标签进行连接的话，css样式是没有效果的。

我们最常用的就是外链式引用方式，非常的方便，也可以供多个页面重复使用

导入式：

/*css代码*/
 div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

<head>
<style>
        @import url("test.01.css");
    </style>
</head>

<div>这是一个长宽都为100px的div</div>

导入式和和外链式差不多，都是在外部创建一个css文件，然后在style标签内通过@import url(url);导入，但是与外链式不同的是，外链式是先加载css，再显示HTML，而导入式是先显示HTML，再加载css，所以推荐使用外链式。

css引用的优先级：

记住就近原则
内部样式、、@import都出现在HTML的里面，就近原则，距离修改元素近的优先级高
行内样式>内部样式>link>@import

建议开发中链入外部样式，无需改动HTML结构，有利于代码的维护，开发效率高

程序员-刘华强

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS样式引用方式的区别

导入式和和外链式差不多，都是在外部创建一个css文件，然后在style标签内通过@import url(url);导入，但是与外链式不同的是，外链式是先加载css，再显示HTML，而导入式是先显示HTML，再加载css，所以推荐使用外链式。内嵌式是在HTML中创建一个style标签，把css样式写入style标签内，style标签可以写在HTML中的任何位置，通常写在head标签内。外链式是把css样式单拎出来，放在一个单独的css文件中，然后。，如果没有link标签进行连接的话，css样式是没有效果的。
复制链接

扫一扫