4.1-CSS引入方式

1 CSS概述

​ 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

2 CSS的引入方式

（1）内联样式(行内样式)

把css代码直接写在现有的HTML标签，样式的内容写在元素的开始标签中

<div style="color: red;">我是一个div</div>
<!--多个CSS样式写在一起-->
<div style="color:red;font-size:14px">
    设置字体颜色为红色，并且字体大小为14px
</div>

缺点：样式与结构冗余，不方便对代码进行管理（不推荐使用）

优点：优先级高

（2）内部样式表

将样式表编写到head标签里的style标签中

<style  type="text/css">
/* style标签中的type属性可省略不写，默认值就是type="text/css" */
div{
	/* 字体大小 */
    /*主义属性结尾的分号不可省略*/
	font-size: 25px;
}
</style>

缺点：样式复用率低

优点：样式与结构分离

（3）外部样式表

优点：样式与结构分离，解耦；样式的复用率高（框架:例如bootstrap）， 共用，定义好的css文件可以应用到多个页面中

1. 通过link标签引入外部CSS文件

<link rel="stylesheet" type="text/css" href="文件的路径"/>

2. 通过@import url()引入CSS文件

缺点：引入方式会先加载html，再加载css；当网络环境较差时，网页比较大则会儿出现先显示无样式的页面（不建议使用）

<style>
	/*要写在style标签的最前面，否则不会生效 或者直接在外部css文件中直接使用*/
  @import url('./style.css');
</style>

引入方式优先级：

内联样式>内部样式>外部样式