我的網站沒有加載 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