CSS 不适用于我的 html 并且不显示答案

【问题标题】：CSS is not working with my html and not displayingCSS 不适用于我的 html 并且不显示
【发布时间】：2022-01-30 04:34:54
【问题描述】：

我设置了导航栏的样式，但它没有显示在 html 或网站上。我也想更改字体并为导航栏的每个部分添加颜色。这是我的 css，这也是我的 html 代码。

.header_area .main-menu .navbar .navbar-brand{
padding: 0 2rem 0 5rem;
}

.header_area .main-menu .navbar{
padding: 1rem 20rem;
}

.header_area .main-menu .nav-item .nav-link{
font-family: "Lato", cursive;
text-transform: uppercase;
font-weight: 500;
padding: 1.7rem;
color: black;
}

这也是我的 html 代码

  <header class="header_area">
    <div class="main-menu">
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container-fluid">
              <a class="navbar-brand" href="#"><img src="/img/logos.png" alt="logo" width="40" height="40"></a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse justify-content-end" id="navbarNav"></div>
                <div class="mr-auto"></div>
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link " aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">About Me</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Projects</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Skills</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Contigency Plans</a>
                  </li>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

首先你的 HTML 代码不完整，是的，如果你的 css 在另一个文件夹中，你必须像这样链接它

<link rel="stylesheet" href="style.css" />

你的html代码可能是这样的

这是完整的代码

In style.css file, add your upper css

in index.html file, add the below codes

<head>
<title>My codes</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="header_area">
    <div class="main-menu">
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container-fluid">
              <a class="navbar-brand" href="#"><img src="/img/logos.png" alt="logo" width="40" height="40"></a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse justify-content-end" id="navbarNav"></div>
                <div class="mr-auto"></div>
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link " aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">About Me</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Projects</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Skills</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Contigency Plans</a>
                  </li>
</ul>
</div>
</nav>
</div>
</header>
</body>
</html>

【讨论】：

你想说的是不可能的。
在什么意义上不是？
它已经完成了，我只是粘贴了一个 sn-p 但我可以试试你的版本

【解决方案2】：

您的代码运行良好。您定义的所有属性都运行良好。

我也想更改字体并为每个部分添加颜色导航栏。

首先，您必须从 google fonts 下载字体。通常，链接是蓝色的，但您可以更改它们[如果您是这个意思]

.header_area .main-menu .navbar .navbar-brand{
padding: 0 2rem 0 5rem;
}

.header_area .main-menu .navbar{
padding: 1rem 20rem;
}

.header_area .main-menu .nav-item .nav-link{
font-family: "Lato";
text-transform: uppercase;
font-weight: 500;
padding: 1.7rem;
color: black;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">

<header class="header_area">
    <div class="main-menu">
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container-fluid">
              <a class="navbar-brand" href="#"><img src="/img/logos.png" alt="logo" width="40" height="40"></a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse justify-content-end" id="navbarNav"></div>
                <div class="mr-auto"></div>
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link " aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#" style="color:red">About Me</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Projects</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Skills</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Contigency Plans</a>
                  </li>

【讨论】：