CSS资源的引入
画龙点睛的CSS文件引入，如何样引入才是最优的呢？
什么是CSS外部样式表？
CSS外部样式表是一种文件类型，将HTML文档和CSS代码分离。这使得HTML文件可以轻松地对样式进行管理而且测试Web页变得更容易了。外部样式表包含如颜色、字体、间距和布局等与样式相关的属性等。
CSS资源的引入方式有哪些？
CSS资源的引入大体可分为内联、内部和外部三种方式，分别为：
- 内联式：样式代码直接写在HTML节点元素里面
- 内部样式表：代码写在head，head里的style标签中
- 外部样式表：链接外部的css文件，使用link标签在head中
CSS外部样式表是最优的方式？
外部样式表远不只有管理样式代码的好处。它还可以增加代码的可重用性和快速下载。具体而言，它有如下几个优点：
- 管理方便:CSS文件内容一般包含所有的页面固定不变的样式（header、footer等），这个文件可以使得样式表达式共用、统一，提高代码的健壮性和易维护性
- 可扩展性的好处：需要增加样式时只需要增加css文件和各自的ID、Class属性
- 服用性强：可以为网站多个页面提供统一的共享样式表
- 下载速度快：外部样式表只需要下载一次就可以给多个网页使用，从而大大提高了页面下载速度； 内联样式表的下载速度相比之下就相对较慢，因为所有的CSS代码都需要在每次访问页面时都下载一遍
CSS外链与内联、内部样式表的区别？
1. 代码结构方面：
- 内联式：代码与HTML节点元素结合在一起，难以阅读和维护，不利于代码的共享使用
- 内部样式表：CSS代码于style标签之间的写在head部分，适用于个别变动复杂的网站
- 外部样式表：CSS代码写在单独的CSS目录下，通常为styles.css或main.css。在head中调用使用link或@import，代码结构清晰，容易修改，增强了代码的重复使用和网站的可维护性。
2. 代码体积方面：
- 内联式：由于像素级定制的特点，导致代码量庞大，每个节点都需要书写
- 内部样式表：省略了命名空间，点缀着少量的属性名称，代码要比内联式精简
- 外部样式表：CSS代码位于公共目录下，充分会被浏览器进行缓存
3. 加载速度方面：
- 内联式：对于样式文件较大网页、具体实现代码采用语法糖的网页，加载时间较长，导致页面渲染过程缓慢。
- 内部样式表：仍然需要浏览器去解析HTML节点对象和CSS样式表的定义，稍稍降低了页面加载的速度。
- 外部样式表：浏览器加载网页时基本不需要CSS加载时间（因为Cascading Style Sheets自身就被浏览器单独地视为一种文件类型而不是文件）。网页的HTML文体加载依赖于两种东西：HTML标签给页面结构的定义，外部样式表给文档定义装扮。因此，网页的外观会由Cascading Style Sheets在最后高质量实现，直接与浏览器结合得更良好地避免刷新和重构。一想就觉得它是加载最快的方式而且最能够优化浏览器表现。
综上所述，我们应该尽可能采用外部CSS样式表，当然，根据自己的实际环境，进行综合考虑。
