Chrome OS本地HTML与CSS无法关联问题求助

我的HTML代码在U盘上能正常关联CSS，但在Chrome OS本地运行时CSS完全不生效，页面背景始终是白色。已经尝试过重写link标签，但问题依然存在。

我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <link href="main.css" rel="slylesheet" text="text/css">
<title></title>
</head>
<body>
    <header>
        <div class="container">
            <img src="beens.jpg" alt="logo" class="logo">
            <nav>
                <ul>
                    <li><a href="#">about</a></li>
                    <li><a href="#">games</a></li>
                    <li><a href="#">contact</a></li>
                    <li><a href="#">blog</a></li>
                </ul>
            </nav>
        </div>
        
    </header>
</body>
</html>

对应的CSS代码：

.container {
    width: 80%;
    margin: 0 auto;
}
.header {
    background: rgb(51, 146, 153);
}
li {
  color: rgb(142, 15, 15);
}

解决步骤 #

1. 修正link标签的拼写错误

   • rel属性拼写错误：slylesheet → stylesheet（少了字母't'）
   • 属性名错误：text="text/css" → type="text/css"（正确属性名是type）
     修正后的link标签：

   <link href="main.css" rel="stylesheet" type="text/css">
   

2. 修正CSS选择器错误
   HTML中使用的是<header>标签，而CSS里写的是类选择器.header，两者不匹配。把CSS里的.header改为标签选择器header：

   header {
       background: rgb(51, 146, 153);
   }
   

3. 本地文件检查

   • 确认main.css和HTML文件在Chrome OS本地的同一目录下，文件名大小写完全匹配（Chrome OS基于Linux，文件名区分大小写）
   • 打开Chrome开发者工具（按F12），切换到「Network」标签，刷新页面查看main.css的加载状态：如果显示404，说明文件路径或名称有误
   • 检查本地文件权限，确保HTML和CSS文件都具备可读权限

内容的提问来源于stack exchange，提问作者playday5beans