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

css引入的主要目的:

① 可以同时更新多个网页的样式;

② 使网页的表示层与结构层彻底分离;

③ 大大减小了网页文件的大小;

④ 加快了网页的加载速度。

引入方式

(1)、内部样式

适合案例或者比较小的页面;

语法:

head书写一个style标签  type属性可有可无

<style type="text/css">

修饰的对象{

修饰样式}

</style>

行内(内联)样式:

几乎不用,除非需要样式的最先显示行内样式,缺点:1、会把结构和css全部融合在一个页面里面,代码很乱。2、后期调整样式的时候,也不方便。

注意:必须有style作为属性

语法:

<标签 style="属性:属性值;"></标签>

注意:内联样式地内部样式和外部样式,如果是对同一个对象进行了样式的修饰且权重相等且产生了冲突,优先解析的是最后写的样式(就近原则,站在结构的角度去看CSS,谁距离结构近就解析谁的)

2)、外部样式:优先级是最高的,对应的权重是1000,适合比较大的页面或者整站开发;

语法:

① link  链接 (连接式)

 属性  rel  relation关联 href属性  路径 (可以使用相对路径或者绝对路径。)CSS代码保存在扩展名为.css的样式表中

<link rel="stylesheet" href=".css">

 <link rel="stylesheet" href="  " type="text/css">

rel="stylesheet"  (关联的是一个样式表)

rel="icon"  (关联的是小图标)

② import 导入:(引入式)

引入方式@import  url();  

语法:

<style>

@import url("  .css");

</style>

外部样式中linkimport之间的区别:

1) 本质上:   

link是标签,是HTML的写法  但是importCSS的书写方式

2) 兼容性:   

link是没有兼容问题  但是import在老版本的IE上不支持  IE5以下

3) 加载顺序上:

link是结构HTMLCSS样式同时加载的,

import是先加载HTML后加载CSS,在网速比较慢的时候,往往会先看到比较难看的页面,然后再看到比较顺畅的页面;

4) js控制dom修改样式时:

link可以被修改,但是import不可以;

5) 一般在实际的网站开发里面,用link方式

原文地址:https://www.cnblogs.com/wyy0217/p/12357849.html