内联式、 行内引入：
引入方法
- 直接在html的标签中书写css。这是一种最为原始也是最容易理解的
- 样式内容书写在html标签的style属性中，多个css样式可以写在一起，使用分号隔开。
<标签名 style="具体样式属性: 属性值;">内容</标签名> - 样式书写是 样式名:样式值; (注意全部是英文半角符号)
内联式特点：
- 冗余代码多，代码量大
- 不利于维护和修改
- 优先级相对来说较高，个别特殊的效果可以使用，但是不要滥用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联式引入css</title>
</head>
<body>
<ul>
<li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
<li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
<li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
<li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
<li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
<li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
<li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
<li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
<li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
<li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
<li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
<li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
<li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
<li style="background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;"></li>
</ul>
</body>
</html>Copy to clipboardErrorCopied
嵌入式引入 头部引入
引入方法
-
可以把样式书写在style标签中
-
然后把style标签放在head标签中
-
使用css选择器选择你要控制的元素，然后书写样式
/*样式书写格式：*/ 选择器{ 样式名1:样式值1; 样式名2:样式值2; }Copy to clipboardErrorCopied
引入特点：
- 统一放置在 style 标签当中，然后通过选择器，将规定样式和对应的标签建立联系，便于维护和修改
- CSS 样式修改时并不需要翻阅 HTML 代码，也不需要去针对每个 HTML 标签处理样式，只需要调整style 标签中的样式，就可以针对性修改，页面达到了样式与结构相分离
- 代码量少
- 相对整站来说，存在冗余代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌入式引入css</title>
<style>
li{
color:red;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>Copy to clipboardErrorCopied
css外部式引入
引入方式
-
在外部新建一个css文件（后缀是.css），把样式写在外部的css文件中。
-
当一个页面需要外部css的时候，可以使用link标签把css引入进来,把link标签书写在head标签中
<link rel="stylesheet" type="text/css" href="./index.css"> -
link标签书写的位置应该和style是一样的
- href:相关联css的路径
- rel：stylesheet link引入的css和当前的文档html进行关联
- type：text/css 引入的格式是text文本，是css文本
外部式引入特点：
- 将html和css完全分离成两个文件
- 一个css文件可以控制多个html文件
- 相对单页有冗余代码
- 相对来说有服务器压力
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<div>
</div>
</body>
</html>Copy to clipboardErrorCopied
重绘重排
重排和重绘是DOM编程中耗能的主要原因之一：
-
重排（回流）：当render tree中的一部分或者是全部，因为元素的尺寸、布局、隐藏等等改变引起页面的重新渲染，这个过程称作为重排，完成重排以后，浏览器会重新绘制受影响的部分到屏幕，该过程称为重绘。
重排的情况:
- 添加或者删除可见的DOM元素
- 元素位置改变
- 元素尺寸改变
- 元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）
- 页面渲染初始化（无法避免）
- 浏览器窗口尺寸改变
-
重绘：当render tree（渲染树）中更新的属性只会影响元素的外观、风格，不会影响元素的布局的时候，浏览器需要重新绘制当前元素的样式，被称作为重绘。
-
重绘不会引起重排，但重排一定会引起重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。
style标签和link标签的书写位置
如果书写到非head标签的位置可能会引起一些问题
- 不便于维护:后期维护的时候需要花费时间去寻找代码书写位置
- 会引起页面的回流（重排）和重绘
- 页面从上至下去解析，假设style标签写在body后边，读取这个style之前，整个网页的文档已经渲染的差不多了，发现还有style标签,页面就会重新计算页面的样式 然后重新渲染，所以会引起 重绘和重排，网页可能出现闪烁，并且加载变慢
- 所以style标签应该书写在head标签中
@import引入
@import是CSS提供引入css文件的一种方式
使用@import方法，在style标签中引入
@import "index.css";
@import url(index.css);
@import url("index.css");Copy to clipboardErrorCopied
link引入和@import引入的对比
- 功能范围不同 link属于html标签 @import只是css提供的引入css的功能
- 加载顺序不同 页面在加载的时候，link引入的css会同时被加载 @import引入的css只有等页面全部下载完成以后才进行加载，所以可能会出现闪烁
- 兼容性 link所有浏览器都支持 @import低版本ie不支持
- 使用JS控制样式 JS只能控制link标签 @import是不能够被JS控制的