同目录下HTML无法加载CSS及页面空白问题排查求助

问题代码 #

HTML文件

<!Doctype HTML>
<html>
<head>
 <title>Using Internal CSS</title>
 <link href="elliptical shaped.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p class="one"></p>
<p class="two"></p>
<p class="three"></p>
</body>
</html>

CSS文件

.one {
border-top-left-radius: 80px 50px;
-moz-border-radius-top-left: 80px 50px;
-webkit-border-radius-top-left: 80px 50px;}
.two {
border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
-moz-border-radius: 1em 4em 1em 4em
 / 2em 1em 2em 1em;
-webkit-border-radius: 1em 4em 1em 4em
 / 2em 1em 2em 1em;}
.three {
padding: 0px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;}

可能的问题原因及解决方法 #

• CSS文件名含空格导致路径解析失败
  浏览器对带空格的文件名解析易出错，把CSS文件名改成无空格格式（比如elliptical-shaped.css），同时同步修改HTML里的链接路径：

  <link href="elliptical-shaped.css" type="text/css" rel="stylesheet" />
  

• 空p标签导致视觉空白
  就算CSS加载成功，空<p>标签默认高度为0，肉眼看不到任何效果。给CSS类添加宽高、背景或边框属性，比如：

  .one {
    border-top-left-radius: 80px 50px;
    -moz-border-radius-top-left: 80px 50px;
    -webkit-border-radius-top-left: 80px 50px;
    width: 200px;
    height: 100px;
    background: #ccc;
    border: 1px solid #000;
  }
  

• 文件名大小写/拼写不匹配
  检查CSS实际文件名是否和HTML里的href完全一致，Linux/macOS系统区分大小写，若实际文件名是Elliptical Shaped.css，而HTML里写的是小写，就会加载失败，确保文件名完全匹配。

• 浏览器缓存干扰
  普通刷新可能没清除缓存，用Ctrl+F5强制刷新，或打开浏览器开发者工具（F12），在「网络」面板勾选「禁用缓存」后重新加载，查看CSS请求状态是否为200（成功）。

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