不需要引用css样式的网页,网页基础之样式的四种引用方式

在上一小节中《网页结构基本标签和基本样式》中讲到了行内样式。样式在一个网站中扮演着装饰层的角色，可以将本不起眼的网页通过样式装饰了之后，让人眼前一亮，因此样式在前端开发中是必不可少的，本小节笔者将针对样式的四种引用方式做个详细分析。

1. 引入样式的四种方式：

1) 行内样式

行内样式的引用是使用 style 属性把样式用等号链接，包含在引号中，如：

图一

2) 内联样式；

使用 标签包裹样式，如：

图二

3) 外联样式；

使用 link 单标签引入，, href 属性为引入样式表路径的，可使用相对路径，即相对当前网页文件的路径，

test.html 文件

图三

1.css 样式文件

图四

4) 导入式样式

(基本不用)，缺陷：将整个页面渲染完了之后再去下载@import 中的样式表，会出现闪屏的情况，基本很少用

图五

2. 四种样式引入的先后顺序

样式表的引入遵循就近原则，其加载样式的先后顺序为 行内样式 -> 内联样式 -> 外联样式 -> 导入式样式。

3. 建议

在写网站的过程中，推荐使用外联样式，使网页结构与样式相分离，便于阅读和管理，既高效又便于合作