css的四种引入方式

CSS代码
来源：站三界导航
67阅读
2022-09-11

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

写法：在网页元素上通过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>

五、css引用的优先级
记住就近原则
内部样式、、@import都出现在HTML的里面，就近原则，距离修改元素近的优先级高
行内样式>内部样式>link>@import
建议开发中链入外部样式，无需改动HTML结构，有利于代码的维护，开发效率高

六、link和@import的区别
1、引入的内容不同

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

2、加载的顺序不同

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

3、兼容性不同

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

4、对js的支持不同

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

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/10197.html

1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。

2、本站仅提供信息发布平台，不承担相关法律责任。

3、若侵犯您的版权或隐私，请联系本站管理员删除。

4、本文由会员转载自互联网，如果您是文章原创作者，请联系本站注明您的版权信息。

上一篇：镂空文字CSS

下一篇： css居中方法