html引入css的方法主要有三种：行内样式、内部样式表和外部样式表。1. 行内样式直接在html标签内使用style属性，优点是简单且优先级高，但不易维护，适合少量使用；2. 内部样式表在html的<head>中使用<style>标签定义，适用于单个页面，便于修改但无法复用；3. 外部样式表通过<link>引入独立的.css文件，易于维护和跨页面复用，推荐用于大型项目。css优先级为行内样式最高，接着是内部或外部样式表（后定义的覆盖先定义的），浏览器默认样式最低。优化css加载可通过将<link>放在<head>、使用媒体查询、压缩文件、cdn加速等方式实现，避免使用@import以提升性能。
直接点说，HTML引入CSS就是给网页穿衣服，让它变得好看。方法不少，但掌握这几种就够用了。
解决方案
-
行内样式 (Inline Styles)
立即学习“前端免费学习笔记（深入）”；
这是最直接的方法，直接在HTML标签里用
style属性写CSS。<p style="max-width:90%">这段文字是蓝色的。</p>
优点：简单粗暴，优先级高。 缺点：不易维护，代码冗余，不推荐大量使用。
-
内部样式表 (Internal Stylesheet)
在HTML文档的
<head>部分使用<style>标签嵌入CSS代码。<!DOCTYPE html> <html> <head> <title>内部样式表</title> <style> p { color: green; font-size: 18px; } </style> </head> <body> <p>这段文字是绿色的。</p> </body> </html>优点：方便在单个页面内修改样式。 缺点：只适用于当前页面，无法在多个页面共享样式。
-
外部样式表 (External Stylesheet)
将CSS代码写在一个独立的
.css文件中，然后在HTML文档中使用<link>标签引入。<!DOCTYPE html> <html> <head> <title>外部样式表</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>这段文字的样式在 styles.css 文件中定义。</p> </body> </html>
styles.css文件内容：p { color: red; font-size: 20px; }优点：易于维护，可以在多个页面共享样式，提高代码复用率。强烈推荐！ 缺点：需要额外加载CSS文件，可能影响页面加载速度（但通常可以忽略）。
CSS优先级：行内样式、内部样式表和外部样式表哪个优先级最高？
CSS优先级是个老生常谈的问题，但搞清楚它能避免很多样式冲突的麻烦。简单来说，优先级顺序是：行内样式 > 内部/外部样式表（后定义的覆盖先定义的）> 浏览器默认样式。
-
行内样式: 直接写在HTML标签里的
style属性，优先级最高，谁也干不过它，除非用!important。 - 内部/外部样式表: 如果选择器一样，后定义的样式会覆盖先定义的。如果选择器不一样，那就看选择器的具体性（Specificity）了，这个比较复杂，涉及到ID选择器、类选择器、标签选择器等。
- 浏览器默认样式: 这是浏览器自带的样式，优先级最低，基本可以忽略。
举个例子：
<!DOCTYPE html>
<html>
<head>
<title>CSS优先级</title>
<style>
p { /* 内部样式表 */
color: blue;
}
</style>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p style="color: green;">这段文字是什么颜色？</p>
</body>
</html>styles.css文件内容：
p { /* 外部样式表 */
color: red;
}最终，这段文字会显示绿色，因为行内样式的优先级最高。
如何选择合适的CSS引入方式？
选择哪种引入方式，主要看你的项目规模和需求。
- 小型项目或单页应用: 如果只是一个简单的页面，用内部样式表或者行内样式都可以，方便快捷。
- 大型项目: 强烈推荐使用外部样式表。把CSS代码放在单独的文件里，方便维护和管理，也方便在多个页面共享样式。
另外，还可以结合实际情况，灵活运用。比如，某些特殊的样式，只在一个地方用到，就可以用行内样式；通用的样式，就放在外部样式表里。
外部样式表引入后，如何避免CSS加载阻塞页面渲染？
CSS加载会阻塞页面渲染，这是个事实。但我们可以通过一些方法来优化：
将
<link>标签放在<head>里: 这是最佳实践，浏览器会尽早发现CSS文件，并行下载。-
使用媒体查询 (Media Queries): 只在特定设备或条件下加载CSS文件，比如只在打印时加载打印样式。
<link rel="stylesheet" href="print.css" media="print">
CSS文件压缩: 减小CSS文件的大小，缩短加载时间。可以使用一些工具来压缩CSS代码，比如在线压缩工具或构建工具。
使用CDN: 将CSS文件放在CDN上，利用CDN的缓存和加速，提高加载速度。
避免使用
@import:@import会阻塞CSS文件的并行下载，影响页面加载速度。尽量使用<link>标签引入CSS文件。
总之，优化CSS加载是一个综合性的问题，需要根据实际情况，选择合适的优化方法。
