CSS与HTML结合有五种方式：一、内联样式，通过style属性直接定义；二、内部样式表，在head中用style标签；三、外部样式表，通过link引入.css文件；四、@import导入，用于模块化但会阻塞渲染；五、依赖选择器与HTML结构准确匹配。
如果您希望为HTML文档添加视觉样式，CSS必须通过特定方式与HTML关联才能生效。以下是实现CSS与HTML结合使用的多种方法：
一、内联样式
内联样式直接在HTML元素的style属性中定义CSS规则，作用范围仅限于当前元素，优先级最高，适合单次快速样式调整。
1、在HTML标签中添加style属性，例如<p style="color: red; font-size: 16px;">文本内容</p>。
2、在style属性值中使用英文冒号分隔属性名与属性值，多个声明之间用英文分号分隔。
立即学习“前端免费学习笔记（深入）”；
3、确保所有CSS属性名称和值均符合标准语法，避免使用中文标点或空格错误。
二、内部样式表
内部样式表通过<style>标签写在HTML文档的<head>部分，可统一控制当前页面所有匹配元素的样式，便于维护单页样式。
1、在<head>标签内插入<style></style>标签对。
2、在<style>标签内部编写CSS选择器与声明块，例如p { margin: 0; line-height: 1.5; }。
3、必须确保<style>标签未被错误地放置在<body>中或闭合标签缺失。
三、外部样式表
外部样式表将CSS代码保存为独立的.css文件，通过<link>标签引入HTML，支持多页面复用与缓存优化，是项目级推荐方式。
1、新建文本文件，保存为style.css，内容仅包含纯CSS规则，不包含任何HTML或<style>标签。
2、在HTML的<head>中添加<link rel="stylesheet" href="style.css">，href路径需与CSS文件实际位置一致。
3、检查浏览器开发者工具的Network面板，确认CSS文件状态码为200且无404报错。
四、@import导入方式
@import可在CSS文件或<style>标签内导入其他CSS资源，常用于模块化组织样式，但会阻塞渲染且优先级低于link引入。
1、在<style>标签内或已有CSS文件顶部，使用@import语句，例如@import url("reset.css");。
2、url()中的路径可为相对路径或绝对URL，必须以分号结尾且不能位于CSS规则块内部。
3、若在<style>中使用，@import必须置于所有CSS规则之前，否则将被浏览器忽略。
五、CSS选择器与HTML结构匹配
无论采用哪种关联方式，CSS样式生效的前提是选择器能准确匹配目标HTML元素，依赖正确的标签名、class、id或属性结构。
1、为需要样式的HTML元素添加class属性，例如<div class="header">。
2、在CSS中使用.classname声明样式，例如.header { background: #f0f0f0; }。
3、class名称区分大小写且不可含空格或特殊字符（除连字符外）。
