css的四种引入方式

最新推荐文章于 2024-04-22 13:50:02 发布

傲娇味的草莓

最新推荐文章于 2024-04-22 13:50:02 发布

阅读量1.3w

点赞数 8

分类专栏：前端css 文章标签： css

本文链接：https://blog.csdn.net/weixin_45709829/article/details/123647240

版权

11 篇文章 2 订阅

订阅专栏

在这里插入图片描述

别名：行间样式、内联样式

写法：在网页元素上通过style=""属性

<div style="color: pink; margin-top: 10px;border: 1px solid blue">行内样式</div>

写法：在网页创建嵌入的样式表，写在里面

<head>
    <style>
        p{
            color:pink;
            border:blue 1px solid;
        }
    </style>
</head>

写法：网页引入外部样式表，外部创建一个css文件，在html中通过连接这个css文件，一般写在css前面

<link rel="stylesheet" type="text/css" herf="1.css">

写法：通过@import 引入，不建议开发使用

<style>
    @import"1.css";
</style>

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

1、引入的内容不同

link引入样式文件、图片资源等，而@import只引入样式文件

2、加载的顺序不同

link在页面加载的同时加载，@import在页面加载以后加载

3、兼容性不同

link是XHTML标签，没有兼容性问题，@import在css2.1提出，低版本的浏览器不支持

4、对js的支持不同

link支持js控制dom去改变样式，@import则不能支持

关注