-
CSS4种引用方式及优先级
- 行内样式
在html标签中直接用style：
<p style="color:#ccc"></p>
缺点:代码不简洁，不利于维护，文件体积大，单独特殊的CSS代码写在行内无伤大雅，但是可重复利用的样式会增加整体的大小，单独写css出来即有利于维护，又可以缓存，减少http请求数量和缩小请求文件大小的问题。
- 内部样式（内嵌样式）
将CSS代码写在<style></style>标签之间
优点：速度快，直接在html文档中读取样式
适合项目页面不多，CSS代码也不多的情况，如果项目有很多页面，那么页面使用的是公用的CSS代码，之后每个页面都要定义一次，文件会变得很大，后期维护也困难。
- 链接样式（外部样式）
在<head></head>中加入<link>链接
<link type="text/css" rel="stylesheet" href="demo.css" />
优点：实现了结构层和表现层的分离，提高代码可维护性
- 导入样式（不建议使用）
@import url（demo.css）;
1.可以在html中定义，定义在style标签中或者在CSS中定义
使用@import引入CSS样式表，跟链接样式相似，但是在老版本的浏览器中（低于ie5）是不支持@import的，也就是说兼容性不好
2.会导致会导致样式表文件逐个下载，导致页面加载时间更久，比如link混合@import。
3.在IE中，如果使用@import和JS混合，还会导致执行顺序混乱，阻碍页面渲染，让人感觉页面比较慢。
2.四种方式的引用优先级
- 一般来说：行内样式>内部样式>外部样式>导入样式。
- 但是真正的优先级得看哪个样式离代码更近，也就是就近原则，而且内部样式、外部样式和导入样式都是在一个头文件内部。
扫一扫
1617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
