Html 我的CSS文件与所有元素连接良好，除了h1和类容器流体，我也在使用引导_Html_Css_Web Frontend

Html 我的CSS文件与所有元素连接良好，除了h1和类容器流体，我也在使用引导

html css

Html 我的CSS文件与所有元素连接良好，除了h1和类容器流体，我也在使用引导,html,css,web-frontend,Html,Css,Web Frontend,当我为类“container fluid”声明内联样式时，它工作正常，但当我将该样式转换为CSS时，它不工作，并且我也无法修改我的h1标记，但我的标题id工作正常，这意味着我的CSS连接正确。实际上，我正在修改引导类。这是我的主要HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TinDog</title&g

当我为类“container fluid”声明内联样式时，它工作正常，但当我将该样式转换为CSS时，它不工作，并且我也无法修改我的h1标记，但我的标题id工作正常，这意味着我的CSS连接正确。实际上，我正在修改引导类。 这是我的主要HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TinDog</title>

    <!-- CSS -->
    <link rel="stylesheet" href="css/styles.css">

    <!-- BOOTSTRAP -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&family=Ubuntu:wght@700&display=swap" rel="stylesheet">

    <!-- FONT-AWESOME -->
    <script src="https://kit.fontawesome.com/78e50f3289.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <section id="title">
      <!-- Nav Bar -->
      <div class="container-fluid">
        <nav class="navbar navbar-expand-lg navbar-dark">
          <a class="navbar-brand" href="">tindog</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="">Contact</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="">Download</a>
              </li>
            </ul>
          </div>
        </nav>
        <!-- Title -->
        <div class ='row'>
          <div class = "col-lg-6 col-md-12 col-sm-12">
            <h1>Meet new and interesting dogs nearby.</h1>
            <button type="button" class="btn btn-dark btn-lg"><i class="fab fa-app-store"></i> Download</button>
            <button type="button" class="btn btn-outline-light btn-lg">
              <i class="fab fa-google-play"></i> Download</button>
          </div>
          <div class = "col-lg-6 col-md-12 col-sm-12">
            <img src="images/iphone6.png" alt="iphone-mockup">
          </div>
        </div>
      </div>
    </section>

希望CSS出现在

样式表将覆盖styles.css中包含的h1标记的样式

要解决这个问题：

1）您可以使用

！重要信息

，以应用您的特定样式。它赋予该属性较高的权重，并忽略其他后续规则。

#标题{
背景色：#ff4c68；
}
h1{
字体系列：“蒙特塞拉特”，无衬线！重要；
字体大小：3rem！重要；
线高：1.5！重要；
颜色：#fff！重要；
}
.容器液体{
填充物：3%15%；
}
.navbar品牌{
字体系列：“Ubuntu”；
字体大小：2.3rem；
线高底部：5；
}


马口铁








在附近遇见新的有趣的狗。
下载
下载

我通过阅读一些文档来纠正它，如果您想使用引导CSS或编辑它，您只需将引导链接放在自定义CSS上方。

使用浏览器检查器工具检查h1是否被引导覆盖。提供h1标记一些类，然后您可以轻松修改h1属性。但是容器流体类呢，为什么不进行填充？？

#title{
    background-color:#ff4c68;
}

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    line-height: 1.5;
    color: #fff;
}

.container-fluid{
    padding:3% 15%;
}

.navbar-brand{
    font-family: 'Ubuntu';
    font-size: 2.3rem;
    line-height-bottom: 5;
}