HTML5中添加CSS样式的三种方式：一、用link标签外链CSS文件，需置于head内并设rel="stylesheet"和正确href路径；二、用style标签内嵌CSS代码，也置于head内，支持media属性；三、用元素style属性添加行内样式，优先级最高但不宜滥用。
如果您希望在HTML5文档中为网页添加CSS样式，则需要通过外链或内嵌方式将样式规则引入到HTML结构中。以下是具体操作方法：
一、使用link标签外链CSS文件
通过link标签引入外部CSS文件，可实现样式与结构分离，便于维护和复用。该方式要求CSS文件已存在且路径正确，浏览器会按顺序加载并应用样式规则。
1、在HTML5文档的<head>标签内部，插入<link>元素。
2、设置rel属性为"stylesheet"，表明该链接资源为样式表。
立即学习“前端免费学习笔记（深入）”；
3、设置href属性为CSS文件的相对或绝对路径，例如"style.css"或"https://example.com/css/style.css"。
4、设置type属性为"text/css"（HTML5中可省略，但保留更清晰）。
5、确保CSS文件编码与HTML文档一致（推荐UTF-8），避免中文注释或字符显示异常。
6、验证路径是否正确：若页面无样式效果，请检查浏览器开发者工具中的Network选项卡，确认CSS文件状态码是否为200。
二、使用style标签内嵌CSS代码
通过style标签将CSS规则直接写入HTML文档内部，适用于小规模样式或临时调试。所有规则作用于当前文档，无需额外文件请求。
1、在HTML5文档的<head>标签内，插入<style>标签。
2、在<style>标签内部编写标准CSS语法，如选择器、属性和值。
3、可添加media属性限定样式生效条件，例如media="print"用于打印样式。
4、避免在<style>标签内使用HTML注释（<!-- -->），应使用CSS注释/* */。
5、若页面样式未生效，请检查<style>标签是否被错误放置在<body>外或嵌套在其他非标准标签中。
三、使用style属性为单个元素添加行内样式
通过元素的style属性直接定义CSS声明，优先级高于外链和内嵌样式，适用于个别元素的特殊样式控制。
1、在目标HTML元素的开始标签中，添加style属性。
2、在style属性值中书写CSS声明，多个声明间用分号分隔，如"color: red; font-size: 14px;"。
3、属性名使用短横线分隔格式（如background-color），不可使用驼峰命名（backgroundColor）。
4、值中若含空格或特殊字符，需用引号包裹，例如"font-family: 'Microsoft YaHei';"。
5、过度使用行内样式会导致维护困难，建议仅在动态脚本修改样式或A/B测试等必要场景下采用。
