网站上未显示CSS字体样式

Question

我对编码非常陌生，目前正在尝试使用HTML和CSS构建简单的标题和导航栏。

到目前为止，这是我的CSS代码：

     * {   text-decoration: none; }

     body {   background-color: #f3f3f3; }

     header {   background-color: #fff;   width: 100%;   height: 100px; }

     header .header-logo {   font-family: Montserrat;   font-size: 24px;  
     font-weight: 900;   color: #111;   text-transform: uppercase;  
     display: block;   margin: 0 auto;   text-align: center;   padding:
     20px 0; }

     header nav ul {

     }

     header nav ul li { display: inline-block; float: left; list-style:
     none; }

     header nav ul li a {   font-family: Montserrat;   font-size: 24px;  
     font-weight: 900;   color: #111; }

但是，当我在浏览器中查看我的网站时，似乎字体粗细和颜色没有显示出来（在标题徽标中）。

而且导航字体不会添加任何样式（字体，大小，粗细或颜色）。

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Website</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <a href="index.html" class="header-logo">Moving Animals</a>
    <nav>
      <ul>
        <li><a href="portfolio.html"></a>Portfolio</li>
        <li><a href="about.html"></a>About</li>
        <li><a href="contact.html"></a>Contact</li>
      </ul>
      <a href="cases.html" class="header-cases">Cases</a>
    </nav>
  </header>
  <main>

  </main>
  <footer>

  </footer>
</body>
</html>

如果任何人都能看到我要去哪里出了问题，那么当我决心学习如何构建网站时，将不胜感激。 谢谢你的时间。

更新：终于看到，投资组合，关于和联系应该在而不是-之间进行了更改，并且导航栏似乎在起作用。

现在的问题是，两个标题的字体粗细都没有改变，有什么想法吗？ 再次感谢！

Answer 1

由于header-logo是直接在链接（即a标签）上使用的类，因此我将扩展其选择器：将其从header .header-logo更改为header a.header-logo ，否则默认链接类可能会覆盖它。

实际上，您甚至可能希望将:link ， :visited ， :hover和:active伪类添加到单独选择器中的a标记中。

Answer 2

将color和weight属性作为html页面中的内联字段传递，因为我认为您的值已被覆盖。

根据我的建议，

在设计网页时，建议您使用内联元素来测试样式是否正常，然后移至.css文件。

Answer 3

在您的HTML代码中的标题中，添加css中提到的class="header-logo"

<header class="header-logo">hey</header>

以及您的以下代码：

 header .header-logo {   font-family: Montserrat;   font-size: 24px;  
 font-weight: 900;   color: #111;   text-transform: uppercase;  
 display: block;   margin: 0 auto;   text-align: center;   padding:
 20px 0; }

这样做只是将header .header-logo之后的单个空格删除到header.header-logo如下所示：

 header.header-logo {   font-family: Montserrat;   font-size: 24px;  
 font-weight: 900;   color: #111;   text-transform: uppercase;  
 display: block;   margin: 0 auto;   text-align: center;   padding:
 20px 0; }

我尝试这样做，它对我有用。CSS字体样式的答案未显示在网站线程中