您的位置:首页 > Web前端 > CSS

CSS引入方式有哪些,区别是什么

2020-03-01 12:00 148 查看

css引入的主要目的:
① 可以同时更新多个网页的样式;
② 使网页的表示层与结构层彻底分离;
③ 大大减小了网页文件的大小;
④ 加快了网页的加载速度。
引入方式
(1)、内部样式
适合案例或者比较小的页面;
语法:
在head书写一个style标签 type属性可有可无

行内(内联)样式:
几乎不用,除非需要样式的最先显示行内样式,缺点:1、会把结构和css全部融合在一个页面里面,代码很乱。2、后期调整样式的时候,也不方便。
注意:必须有style作为属性
语法:
<标签 style=“属性:属性值;”></标签>
注意:内联样式地内部样式和外部样式,如果是对同一个对象进行了样式的修饰且权重相等且产生了冲突,优先解析的是最后写的样式(就近原则,站在结构的角度去看CSS,谁距离结构近就解析谁的)

(2)、外部样式:优先级是最高的,对应的权重是1000,适合比较大的页面或者整站开发;
语法:
① 用link 链接 (连接式)
属性 rel relation关联 href属性 路径 (可以使用相对路径或者绝对路径。)CSS代码保存在扩展名为.css的样式表中

rel="stylesheet" (关联的是一个样式表) rel="icon" (关联的是小图标) ② import 导入:(引入式) 引入方式@import url(); 语法:

外部样式中link和import之间的区别:
1)本质上:
link是标签,是HTML的写法 但是import是CSS的书写方式
2)兼容性:
link是没有兼容问题 但是import在老版本的IE上不支持 IE5以下
3)加载顺序上:
link是结构HTML和CSS样式同时加载的,
import是先加载HTML后加载CSS,在网速比较慢的时候,往往会先看到比较难看的页面,然后再看到比较顺畅的页面;
4)js控制dom修改样式时:
link可以被修改,但是import不可以;
5)一般在实际的网站开发里面,用link方式

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐