首先确保HTML与CSS文件正确关联，创建包含DOCTYPE声明的HTML文件，并通过link标签引入同目录下的style.css文件；接着在同一目录下创建CSS文件并定义样式规则；检查link标签是否位于head区域内且路径准确，若文件在子目录需调整为href="css/style.css"；也可使用内部样式表将CSS代码嵌入style标签中，或用行内样式直接设置元素外观；最后通过浏览器打开HTML文件，按F12查看开发者工具中是否存在404错误或未应用的样式规则，确认页面显示正常。
如果您编写了HTML和CSS文件，但页面未按预期显示样式，可能是由于文件未正确关联或路径设置错误。以下是确保HTML与CSS正确运行并配合显示的步骤：
一、创建基础HTML文件
该步骤用于建立网页结构，为引入CSS样式提供载体。确保HTML文档结构完整，包含正确的DOCTYPE声明和基本标签。
1、使用文本编辑器新建一个文件，命名为 index.html。
2、在文件中输入以下基本结构代码：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>欢迎访问我的网站</h1>
<p class="intro">这是一个段落示例。</p>
</body>
</html>
二、创建配套CSS文件
此步骤用于定义网页的外观样式。通过外部CSS文件实现内容与样式的分离，便于维护和复用。
1、在同一目录下新建一个文件，命名为 style.css。
2、在CSS文件中添加以下样式规则：
h1 {
color: blue;
font-size: 24px;
}
.intro {
color: green;
font-style: italic;
}
三、正确链接外部CSS文件
确保HTML文件能够成功加载外部CSS文件，关键在于路径的准确性以及link标签的正确书写。
1、检查HTML中的 <link> 标签是否位于 <head> 区域内，并确认属性值无误。
2、若CSS文件与HTML文件不在同一文件夹，需调整href路径。例如，当CSS位于css子目录时，应写为：
href="css/style.css"。
3、对于上级目录中的CSS文件，使用相对路径：
href="../style.css"。
四、使用内部样式表作为替代方案
当不需要复用样式或仅针对单个页面时，可将CSS直接嵌入HTML文件中，提升加载效率。
1、删除原有的 <link> 标签，在 <head> 中添加 <style> 标签。
2、在标签内写入CSS规则，例如：
<style>
h1 { color: red; }
p.intro { font-weight: bold; }
</style>
五、通过行内样式快速应用样式
适用于个别元素需要特殊样式的情况，行内样式直接作用于HTML标签，优先级最高。
1、在目标元素上使用style属性，例如：
<p style="color: purple; font-size: 16px;">这是行内样式示例</p>
六、验证HTML与CSS是否正常运行
完成配置后，需通过浏览器打开HTML文件，检查样式是否生效，排查常见问题。
1、双击HTML文件或右键选择“在浏览器中打开”。
2、若样式未生效，按F12打开开发者工具，查看控制台是否有404错误（表示文件未找到）。
3、在开发者工具的Elements面板中，检查元素是否应用了预期的CSS规则。
