css的四种引入方式

在这里插入图片描述

一、行内样式

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

写法:在网页元素上通过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则不能支持

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐