当我将 css 链接到 html 时，为什么没有显示某些 css 样式？答案

【问题标题】：Why some of the css styling is not showing when i link the css to an html?当我将 css 链接到 html 时，为什么没有显示某些 css 样式？
【发布时间】：2021-08-01 15:58:20
【问题描述】：

为什么不应用我的所有样式？

如果显示所有样式，我的网页应该是粉红色的。谁能给我一个解决方案，好吗？以上是我的css样式表和html
如果我问一些愚蠢的问题，请原谅我，我只是一个初学者。

html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <header>
    <nav class="navbar">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Career</a></li>
        <li><a href="">Information literacy</a></li>
      </ul>
    </nav>
  </header>
  
  <div class="sidenav">
      <p style="font-size:30px;color:#ffffff;font-family: 'Palette Mosaic'">Topics</p>
      <a href=""> Careers and life planning</a>
      <hr>
      <a href=""> Information Literacy</a>
      <hr>
      <a href=""> Reference</a>
    <hr>
    </div>

  <div class="main">
  <h1>Welcome</h1>
  <h2> This is MY Webpage</h2>
  </div>
</body>

这是 CSS 样式表
所有颜色、背景颜色和字体系列都没有改变。但是字体大小可以更改。
为什么？

<style>
  @import url('https://fonts.googleapis.com/css2?family=Palette+Mosaic&display=swap');
  
  body {
    background-color: #ffbbbb;
    font-family: 'Palette Mosaic', Copperplate;
    min-height: 150vh;
  }
  .navbar {
    margin: -10px;
    width: 100%;
    background-color: #d2d2d2;
    font-size: 30px;
  }
  nav ul {
    margin: 7px;
    padding: 10px 0px 10px 5px;
  }
  nav li {
    display: inline;
    margin-right: 20px;
  }
  a {
    font-family: Copperplate;
    color: #ffffff;
    text-decoration: none;
  }
 
 .sidenav {
  height: 50%;
  width: 140px;
  position: fixed;
  top: 70px;
  margin-left: -10px;
  background-color: #d2d2d2;
  padding: 15px;
}
.main{
  margin-left: 220px;
}
  h1{
    font-size: 70px;
  }
  h2{
    font-size: 40px;
    }
 
</style>

【问题讨论】：

它对我来说很好用。我认为你应该将样式嵌入到 html 文件中，如果它在你的标记中可能会出现错误
把css文件中的标签去掉，否则代码没有问题。

标签： html css styling

【解决方案1】：

不要将<style> </style> 标签放在你的style.css 文件中。这些仅用于将 css 样式直接写入 .html 文件。

@import url('https://fonts.googleapis.com/css2?family=Palette+Mosaic&display=swap');
  
  body {
    background-color: #ffbbbb;
    font-family: 'Palette Mosaic', Copperplate;
    min-height: 150vh;
  }
  .navbar {
    margin: -10px;
    width: 100%;
    background-color: #d2d2d2;
    font-size: 30px;
  }
  nav ul {
    margin: 7px;
    padding: 10px 0px 10px 5px;
  }
  nav li {
    display: inline;
    margin-right: 20px;
  }
  a {
    font-family: Copperplate;
    color: #ffffff;
    text-decoration: none;
  }
 
 .sidenav {
  height: 50%;
  width: 140px;
  position: fixed;
  top: 70px;
  margin-left: -10px;
  background-color: #d2d2d2;
  padding: 15px;
}
.main{
  margin-left: 220px;
}
  h1{
    font-size: 70px;
  }
  h2{
    font-size: 40px;
    }

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <header>
    <nav class="navbar">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Career</a></li>
        <li><a href="">Information literacy</a></li>
      </ul>
    </nav>
  </header>
  
  <div class="sidenav">
      <p style="font-size:30px;color:#ffffff;font-family: 'Palette Mosaic'">Topics</p>
      <a href=""> Careers and life planning</a>
      <hr>
      <a href=""> Information Literacy</a>
      <hr>
      <a href=""> Reference</a>
    <hr>
    </div>

  <div class="main">
  <h1>Welcome</h1>
  <h2> This is MY Webpage</h2>
  </div>
</body>

【讨论】：

非常感谢！我已经在 css 样式表中删除了，它现在可以工作了！

【解决方案2】：

仅删除样式标签并运行您的代码即可。

【讨论】：