CSS引入方式有内联、内部和外部三种，推荐使用外部样式表以提升性能与维护性。link标签同步加载，兼容性好，而@import异步加载，存在渲染延迟且IE4不支持。老版本IE对CSS3、媒体查询支持差，最多识别31个link标签。现代实践建议用link引入主样式，结合条件注释适配IE，通过构建工具合并文件并用Autoprefixer添加前缀，确保兼容性与性能。
在网页开发中，CSS 的引入方式直接影响页面渲染效果和浏览器兼容性。合理选择引入方法，能提升性能并减少兼容问题。
常见的 CSS 引入方式
主要有三种方式将 CSS 应用于 HTML 页面：
- 内联样式（Inline Styles）：直接写在 HTML 元素的 style 属性中，例如：<div style="color: red;">。优先级最高，但不利于维护，且无法利用缓存。
- 内部样式表（Internal Style Sheet）：在 HTML 的 <head> 中使用 <style> 标签定义样式。适用于单页专用样式，不能跨页面复用。
- 外部样式表（External Style Sheet）：通过 <link rel="stylesheet" href="style.css"> 引入外部文件。最推荐的方式，利于缓存、维护和分离结构与表现。
link 与 @import 的区别及兼容性
link 是 HTML 标签，而 @import 是 CSS 提供的规则，两者都能引入样式文件，但行为不同：
- link 在页面加载时同步加载 CSS，浏览器能尽早解析样式，有利于渲染性能。
- @import 写在 CSS 文件或 style 标签中，例如：@import url("style.css");，样式文件会在主样式表加载后再请求，可能导致闪烁或延迟渲染。
- 从兼容性看，@import 在 IE5+ 支持，但早期版本如 IE4 不支持；而 link 在所有主流浏览器中都稳定支持。
IE 浏览器中的常见兼容问题
老版本 IE（特别是 IE6-IE8）对 CSS 支持有限，容易出现以下问题：
立即学习“前端免费学习笔记（深入）”；
- CSS3 属性（如 border-radius、box-shadow）不被识别，需添加厂商前缀或使用图片替代。
- 不支持 media query，响应式布局失效，可通过 JS 方案（如 respond.js）弥补。
- 对 link 标签的 media 属性处理有 bug，某些情况下媒体查询会阻断样式加载。
- 最多只能识别 31 个 link 标签，超出部分可能被忽略，建议合并 CSS 文件。
现代浏览器的最佳实践
为确保兼容性和性能，推荐以下做法：
- 使用外部 link 引入主样式，避免内联和 @import 影响加载速度。
- 为老版本 IE 提供条件注释引入特定样式，例如：<!--[if IE 7]><link rel="stylesheet" href="ie7.css"><![endif]-->
- 借助构建工具压缩、合并 CSS，减少 HTTP 请求。
- 使用 Autoprefixer 自动添加兼容性前缀，确保新特性在旧浏览器中可用。
基本上就这些。选对引入方式，再结合兼容性处理，能让样式在各种浏览器中稳定呈现。
