CSS的4种引入方式

目录

• CSS的4种引入方式
• • 一、内嵌式：CSS写在style标签中
  • 二、外联式：CSS写在一个单独的.css文件中
  • 三、行内式：CSS写在标签的style属性中
  • 四、导入外部样式
  • 五、css引用的优先级
  • 六、link和@import的区别

一、内嵌式：CSS写在style标签中

提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中

案例代码

这是一个p标签

二、外联式：CSS写在一个单独的.css文件中

提示：需要通过link标签在网页中引入

案例代码
my.css文件

/* 选择器{} */
p{color: red;
}

html中通过link标签的href属性引入
html代码

这是p标签
这是div标签
这是一个div

三、行内式：CSS写在标签的style属性中

提示：会配合js使用

案例代码

这是一个p标签

四、导入外部样式

外部样式
hello.css文件

p{color: red;
}
div{background-color: green;
}

html文件

这是一个p标签
这是一个div标签

五、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则不能支持