HTML H[1-6] 从 _type.scss 中获取默认值

【问题标题】：HTML H[1-6] taking default values from _type.scssHTML H[1-6] 从 _type.scss 中获取默认值
【发布时间】：2021-04-18 19:18:38
【问题描述】：

我有一个非常直接的 HTML-CSS 代码。但是，一些 CSS 属性正在被覆盖。 在这里，我有 h1 标记的自定义属性，但在检查时，我看到我定义的属性被 _type.scss

中的一些设置覆盖

当我取消选中 font-family: inherit;使用我定义的字体系列值。

我是 CSS 新手，但我怀疑这是 CSS 继承的情况。

CSS 文件：

#title{
  background-color: #F4C2C2;
  color: #fff;
  padding: 3% 15%;
}
#features{
  text-align: center;
  padding: 3% 15%;
  background-color: white;
  position: relative;
  z-index: 1;
}
.body{
  font-family: 'Montserrat', sans-serif;
}

h1{
  color: black;
  font-family: 'Montserrat', sans-serif;
  font-size: 4.5rem;
  line-height: 1.5;
}

h2{
  font-family: 'Montserrat', sans-serif;
  font-size: 3rem;
  line-height: 1.5;
  font-weight: 700;
}
h3{
  font-size: 1.3rem;
  line-height: 2;
}
p{
  line-height: 2;
  color: #8F8F8F;
}
.navbar{
  padding-bottom: 4.5rem;
}

.navbar-brand{
  font-family: 'Ubuntu';
  font-size: 2.5rem;
}
.nav-item{
  padding: 0 18px;
}
.nav-link{
  font-size: 1.2rem;
}
.download-button{
  margin: 5% 3% 5% 0;
}
.title-image{
  width: 50%;
  transform: rotate(25deg);
  position: absolute;
  right: 30%;
}
@media (max-width:1028px){
  .title-image{
    position: static;
    transform: rotate(0);
  }
}

.featurebox{
  padding: 5%;
}
.intropic{
  color: #F4C2C2;
  margin-bottom: 1rem;
}
.intropic:hover{
  color: #ff4c68;
}


#testimonials{

  text-align: center;
  background-color:#F4C2C2;
  color: #fff;
}
.testpic{
  border-radius: 50%;
  width: 15%;
  margin: 20px;
}
.testslide{
  perspective: 500px;
}

#press{
  background-color:#F4C2C2;
  padding-bottom: 3%;
  text-align:center;


}
.press-logo{
  width: 15%;
  margin: 20px 20px 50px;
}



.carousel-item{
   height:auto;
   padding: 7% 15%;
}
#pricing{
  padding: 100px;
  text-align: center;
}
.pricing-col{
  padding: 3%;

}

.card{
  margin: 0 3%;
}

HTML 代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TinDog</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="SHA-KEY" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;500&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="SHA-KEY" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="SHA-KEY" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="SHA-KEY" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="SHA-KEY" crossorigin="anonymous"></script>
  <!-- Fontawesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">


</head>

<body>
  <section id="title">
    <!-- Nav Bar -->
    <nav class="navbar navbar-expand-lg navbar-light">
      <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 justify-content-end" 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">
        <h1>Meet new and interesting dogs nearby.</h1>
        <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i>Download</button>
        <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-app-store-ios"></i>Download</button>
      </div>
      <div class="col-lg-6">
        <img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
      </div>
    </div>



  </section>


  <!-- Footer -->

  <footer id="footer">

    <p>© Copyright 2018 TinDog</p>

  </footer>




</body>

</html>

【问题讨论】：

    标签： html css bootstrap-4


    【解决方案1】：

    加载样式的顺序非常重要。通常最后一条规则优先。 CSS 文件按照它们在页面中出现的顺序加载。如果在 CSS 文件中重新定义了一个类，它将覆盖之前的类语句。

    你首先加载你的 CSS 样式：

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

    尝试将样式加载移到最后一个位置：

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="SHA-KEY" crossorigin="anonymous">  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<!-- Other code is omitted for the brevity --!>                  
<!-- Your styles should be loaded at the last place --!>
<link rel="stylesheet" href="css/styles.css">

    如果不应用所需的样式，则应用the rule of specificity。因此，请尝试为您的 h1 元素添加更多特异性：

    .row > .col-lg-6 > h1 {
    color: black;
    font-family: 'Montserrat', sans-serif;
    font-size: 4.5rem;
    line-height: 1.5;    
}

    【讨论】：

      【解决方案2】：

      您有用于 Bootstrap 4 和 5 的 CSS 文件以及您自己的 CSS 文件。在你的 head 部分，你正在加载 bootstrap/4.0.0 和 bootstrap@5.0.0-beta3。你只需要一个。尝试从 Bootstrap-4 推荐的template开始尝试

      并使用一个对 Google 字体的请求。

      锡狗 

      <link rel="preconnect" href="https://fonts.gstatic.com">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;500;700&family=Ubuntu:wght@300&display=swap" rel="stylesheet">

<!--<link rel="stylesheet" href="css/styles.css">-->
<style>
    #title {
        background-color: #F4C2C2;
        color: #fff;
        padding: 3% 15%;
    }

    #features {
        text-align: center;
        padding: 3% 15%;
        background-color: white;
        position: relative;
        z-index: 1;
    }

    .body {
        font-family: 'Montserrat', sans-serif;
    }

    h1 {
        color: black;
        font-family: 'Montserrat', sans-serif;
        font-size: 4.5rem;
        line-height: 1.5;
    }

    h2 {
        font-family: 'Montserrat', sans-serif;
        font-size: 3rem;
        line-height: 1.5;
        font-weight: 700;
    }

    h3 {
        font-size: 1.3rem;
        line-height: 2;
    }

    p {
        line-height: 2;
        color: #8F8F8F;
    }

    .navbar {
        padding-bottom: 4.5rem;
    }

    .navbar-brand {
        font-family: 'Ubuntu';
        font-size: 2.5rem;
    }

    .nav-item {
        padding: 0 18px;
    }

    .nav-link {
        font-size: 1.2rem;
    }

    .download-button {
        margin: 5% 3% 5% 0;
    }

    .title-image {
        width: 50%;
        transform: rotate(25deg);
        position: absolute;
        right: 30%;
    }

    @media (max-width:1028px) {
        .title-image {
            position: static;
            transform: rotate(0);
        }
    }

    .featurebox {
        padding: 5%;
    }

    .intropic {
        color: #F4C2C2;
        margin-bottom: 1rem;
    }

    .intropic:hover {
        color: #ff4c68;
    }


    #testimonials {

        text-align: center;
        background-color: #F4C2C2;
        color: #fff;
    }

    .testpic {
        border-radius: 50%;
        width: 15%;
        margin: 20px;
    }

    .testslide {
        perspective: 500px;
    }

    #press {
        background-color: #F4C2C2;
        padding-bottom: 3%;
        text-align: center;


    }

    .press-logo {
        width: 15%;
        margin: 20px 20px 50px;
    }



    .carousel-item {
        height: auto;
        padding: 7% 15%;
    }

    #pricing {
        padding: 100px;
        text-align: center;
    }

    .pricing-col {
        padding: 3%;

    }

    .card {
        margin: 0 3%;
    }
</style>
      廷多 接触 价钱 下载 
          <!-- Title -->
    <div class="row">
        <div class="col-lg-6">
            <h1>Meet new and interesting dogs nearby.</h1>
            <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i>Download</button>
            <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-app-store-ios"></i>Download</button>
        </div>
        <div class="col-lg-6">
            <img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
        </div>
    </div>



</section>


<!-- Footer -->

<footer id="footer">

    <p>© Copyright 2018 TinDog</p>

</footer>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
-->

      【讨论】：

        猜你喜欢
        • 2016-09-10
        • 1970-01-01
        • 1970-01-01
        • 2013-11-21
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-12-05
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode