首先确保CSS与HTML文件以UTF-8编码保存，避免乱码；接着在HTML的head中通过link标签正确引入CSS文件，路径需准确无误；然后检查CSS选择器是否与HTML元素匹配，语法是否规范；最后利用浏览器开发者工具查看资源加载状态及样式应用情况，排查404或优先级问题。
如果您在使用Windows 11记事本编写CSS样式但发现HTML页面无法正常渲染或出现乱码，可能是由于文件编码不匹配或样式未正确关联。以下是解决此问题的步骤：
本文运行环境：Surface Laptop 5，Windows 11
一、确保文件保存为UTF-8编码
记事本默认可能以ANSI或其他编码保存文件，这会导致浏览器解析CSS或HTML时出现字符乱码。必须手动选择正确的编码格式。
1、在记事本中完成CSS或HTML代码编写后，点击菜单栏的“文件” → “另存为”。
立即学习“前端免费学习笔记（深入）”；
2、在弹出的窗口中，找到“编码”下拉菜单，务必选择“UTF-8”，不要使用默认的ANSI。
3、输入文件名并确保扩展名为.css或.html，然后点击“保存”。
二、正确关联CSS与HTML文件
即使CSS代码正确，若HTML未通过link标签引入，样式也不会生效。需检查路径和标签语法。
1、在HTML文件的<head>区域插入link标签，示例代码如下：
<link rel="stylesheet" href="style.css">
2、确认href属性中的文件路径与CSS文件实际位置一致，路径区分相对与绝对，推荐使用相对路径。
3、检查文件名拼写，包括大小写，避免因名称不符导致加载失败。
三、在HTML中验证CSS选择器有效性
CSS规则若选择器错误或优先级被覆盖，将无法显示效果。需确保选择器能准确匹配目标元素。
1、检查CSS中使用的选择器是否与HTML元素的class、id或标签名完全对应。
2、例如，若HTML中有<p class="text">，则CSS应定义.text { }，类选择器必须以点号开头。
3、避免使用浏览器不支持的CSS属性或语法错误，如缺少分号或括号不匹配。
四、使用浏览器开发者工具排查问题
浏览器可直观显示资源加载状态与样式应用情况，是定位问题的关键手段。
1、在HTML页面上右键点击，选择“检查”或按F12打开开发者工具。
2、切换到“Elements”面板，查看DOM结构中是否成功加载了link标签指向的CSS文件。
3、在“Styles”侧边栏中，确认目标元素是否显示预期的CSS规则，若被划掉说明被更高优先级规则覆盖。
4、切换到“Network”选项卡，刷新页面，观察CSS文件请求状态是否为200，排除404错误。
