我的网站没有加载 CSS 样式表

Question

我正在使用 000webhost 来托管我的网站，我使用的是 HTML 而不是 PHP 我的问题是，在我的网站上，它拒绝加载网页的样式表，所以一切都搞砸了，但是当我在我的电脑上本地运行文件时，一切都是完美的

当我在谷歌浏览器的开发者模式下检查控制台的东西时，这会弹出

它说：拒绝应用来自“http://ismailweb2010.000webhostapp.com/stylesheet1.css”的样式，因为它的 MIME 类型（“text/html”）不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

我不明白这是什么意思，我认为这是导致问题的原因，

这是我的网站https://ismailweb2010.000webhostapp.com/的链接

这是我网站的代码

索引.html；

<html lang="en-GB">
<head>
   <meta name="google-site-verification" content="T4-PmqgKoo-xEOHRUI9dZ5LaNToJ54D4b2vqx4_pS8M" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<title>ismail-home</title>
<link rel="shortcut icon" type="image/jpg" href="images/favicon.png"/>
<link rel="stylesheet" href="stylesheet1.css">

</head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<! -- navigation --> 
<ul>
 <li><a href="https://ismaildev.itch.io/">itch.io</a></li>
 <li><a href="htmlgames.html">games</a></li>
 <li><a class="active" href="index.html">home</a></li>
 <li><a href="about.html">About</a></li>
</ul>
<! -- end of navigation -->

<h1 style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif">welcome to my website </h1>


<p style="font-family: 'Roboto', sans-serif;">hello person this is my website <br><br>and it belongs to me</p>
<br>

<p style="font-family: 'roboto', sans-sherif;">i am a game dev, which means i make GAMES, <br>The types of games i make are, </p>

<footer>
 <br>
 <br>
 <br>
 <p>&#169; ismaildev</p>
 <br>
</footer>

</body>

</html>

关于.html


<html lang="en-GB">

<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<title>ismail-about</title>
<link rel="shortcut icon" type="image/jpg" href="images/favicon.png"/>
<link rel="stylesheet" href="stylesheet1.css">
</head>
<! -- navbar -->
<ul>
      <li><a href="https://ismaildev.itch.io/">itch.io</a></li>
      <li><a href="htmlgames.html">games</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="index.html">home</a></li>
</ul>



<h1 style="font-family: 'Roboto', sans-serif;">about</h1>

<p style="font-family: 'Roboto', sans-serif;">its seems you have found my about page, as a reward heres what you wanted... i think</p>

<br>

<p style="font-family: 'Roboto', sans-serif;">hi my name is (well you must know) and i make games, not the best at least i know how to code, </p>

<br>



<br>

<footer>
      <br>
      <br>
      <br>
      <p>&#169; ismaildev</p>
      <br>
</footer>
    


</body>

</html>

样式表1.css

  width: 300px;
  height: 200px;
  background: rgb(170, 162, 162) url() no-repeat top left/5px 5px;
  animation: mymove 5s infinite;
}

header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

@keyframes mymove {
  50% {background: rgb(58, 52, 52) bottom right/50px 50px;}
}
}

h1 {
  color: rgb(255, 255, 255)
  margin-left: 20px;
  }

/* navbar */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}


li {
  display: inline;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: rgb(88, 88, 88);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #3d3d3d;
}

/* Add a gray right border to all list items, except the last item (last-child) */
li {
  border-right: 1px solid rgb(88, 88, 88);
}

li:last-child {
  border-right: none;
}

ul {
  border: 2px solid #e7e7e7;
  background-color: #292525;
}

li a {
  color: rgb(88, 88, 88);
}

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
/*end of nav bar*/

/*fonts*/
@font-face {
  font-family: 'Roboto', sans-serif;
  src: url(fonts/Roboto-Thin.ttf);
}
/*navbar font*/
ul {
  font:15px "Arial",san-serif;
  }

我是编码 HTML 和 css 的新手，因此将不胜感激

Answer 1

通常您必须配置服务器，以便它为浏览器提供正确的Content-Type header，但由于您可能无法访问配置文件，因此一种解决方法是将样式标签的type属性设置为text/html 。 也就是说，将<link rel="stylesheet" href="stylesheet1.css">更改为<link rel="stylesheet" type="text/html" href="stylesheet1.css"> 。

我的网站没有加载 CSS 样式表

问题描述

1 个解决方案

解决方案1
0 2021-01-29 20:26:23

我的网站没有加载 CSS 样式表

问题描述

1 个解决方案

解决方案1 0 2021-01-29 20:26:23

解决方案1
0 2021-01-29 20:26:23