1
新建一个html文件，命名为test.html，用于讲解html中如何导入css。
请点击输入图片描述
2
在test.html文件内，使用div创建一个模块，下面将对该div进行css样式的定义。
请点击输入图片描述
3
在test.html文件内，设置div的class属性为mydiv，主要用于css文件对该类名进行样式定义。
请点击输入图片描述
4
新建一个css文件夹，在文件夹内创建一个css文件，命名为test.css，用于编写css样式。
请点击输入图片描述
5
在test.css文件内，使用div的类名进行样式定义，设置div的宽度、高度均为200px，背景颜色为黄色。
请点击输入图片描述
6
在test.html文件内，使用link标签导入test.css样式文件，href为css路径。
请点击输入图片描述
7
在浏览器打开test.html文件，查看实现的效果。
直接在标签内设置、在html内部定义style、和导入css文件三种方式。导入css文件可以使用link标签，或者@import关键字。
两者区别（复制粘贴）：
1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
