1,行内式
直接写在html标签中，控制当前标签，对其他标签不起作用
<div style="width:100px;height:100px;">我是盒子</div>
<!-- style就是标签的一个属性，css样式写在里面，各样式之间用分号隔开 -->
2，内嵌式
一般写在head标签中，但理论上写在什么位置都可以，可以控制整个页面的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">我是盒子</div>
</body>
</html>
3,外链式
css样式全部放在扩展名为css的文件中，只要通过link标签引入这个页面，这个css样式文件就可以控制当前页面，由此可推，外链式不仅可以控制一个页面，也可以用来控制整个站点
link标签放在head标签内，具有三个属性
1，rel，指定当前页面和被链接文件的关系，rel=“stylesheet”就表示链接的文件是当前页面的样式表文件
2，type，指定被链接的文件为什么类型，type=“text/css”，表示被了解文件是一个css样式表，可以省略
3，href，定义外部样式表的路径，具体是绝对路径还是相对路径，据实际情况而定
<head>
<link rel="stylesheet" type="text/css" href+"../css/common.css"></link>
</head>
4，三种引入css方式的区别
| 引入方式 | 特点 |
|---|---|
| 行内式 | 权重是最高的，但没有实现样式和结构的分离，且只能控制当前标签，如果全部页面都使用行内式，会造成代码的冗余 |
| 内嵌式 | 没有完全实现样式和结构的分离，控制当前页面的样式 |
| 外链式 | 权重和内嵌式一样，实现了样式和结构的完全分离，可以控制整个站点的样式 |
4784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
