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>

如果任何人都可以看到我要去哪里出了问题，我将非常感激，因为我决心学习如何构建网站。感谢您的宝贵时间。

更新：终于看到，“ Portfolio”，“ About”和“ Contact”应该在而不是-之间进行了更改，并且导航栏似乎在起作用。

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

Answer 1

您可以共享HTML代码吗？并检查一下https://jsfiddle.net/r3w7odav/。也许可以帮到你

<header>
 <h1 class="header-logo">
     Test
 </h1>
</header>

Answer 2

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

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

Answer 3

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

根据我的建议，

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

Answer 4

在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; }

我尝试这样做，它对我Answer to CSS font styles not showing up in website thread

有效

网站上未显示CSS字体样式

4 个答案: