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

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

html css bootstrap-4

HTML H[1-6]从_type.scss获取默认值,html,css,bootstrap-4,Html,Css,Bootstrap 4,我有一个非常直接的HTML-CSS代码。但是，某些CSS属性正在被覆盖。这里我有h1标记的自定义属性，但检查后，我看到我定义的属性被_type.scss中的一些设置覆盖取消选中字体系列时：继承；使用我定义的字体族值。我是CSS新手，但我怀疑这是CSS继承的情况 CSS文件： #title{ background-color: #F4C2C2; color: #fff; padding: 3% 15%; } #features{ text-align: center;

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

取消选中字体系列时：继承；使用我定义的字体族值。

我是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%;
}

<!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代码：

#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%;
}

<!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>


马口铁








在附近遇见新的有趣的狗。
下载
下载
©版权所有2018 TinDog

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

您首先要加载CSS样式：

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

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

并使用谷歌字体的一个请求

锡狗

<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>


#头衔{
背景色：#F4C2C2；
颜色：#fff；
填充物：3%15%；
}
#特征{
文本对齐：居中；
填充物：3%15%；
背景色：白色；
位置：相对位置；
z指数：1；
}
.身体{
字体系列：“蒙特塞拉特”，无衬线；
}
h1{
颜色：黑色；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：4.5rem；
线高：1.5；
}
氢{
字体系列：“蒙特塞拉特”，无衬线；
字体大小：3rem；
线高：1.5；
字号：700；
}
h3{
字体大小：1.3rem；
线高：2；
}
p{
线高：2；
颜色：#8F8F；
}
navbar先生{
垫底：4.5rem；
}
.navbar品牌{
字体系列：“Ubuntu”；
字体大小：2.5rem；
}
.导航项目{
填充：0 18px；
}
.导航链路{
字号：1.2rem；
}
.下载按钮{
利润率：5%3%5%0；
}
.标题图像{
宽度：50%；
变换：旋转（25度）；
位置：绝对位置；
右：30%；
}
@介质（最大宽度：1028px）{
.标题图像{
位置：静态；
变换：旋转（0）；
}
}
.功能盒{
填充：5%；
}
.内向{
颜色：#F4C2C2；
边缘底部：1rem；
}
.内向型：悬停{
颜色：#ff4c68；
}
#推荐书{
文本对齐：居中；
背景色：#F4C2C2；
颜色：#fff；
}
.testpic{
边界半径：50%；
宽度：15%；
利润率：20px；
}
.测试幻灯片{
透视图：500px；
}
#压榨{
背景色：#F4C2C2；
垫底：3%；
文本对齐：居中；
}
.新闻标志{
宽度：15%；
利润率：20px 20px 50px；
}
.传送带项目{
高度：自动；
填充物：7%15%；
}
#定价{
填充：100px；
文本对齐：居中；
}
.定价{
填充：3%；
}
.卡片{
利润率：0.3%；
}

马口铁接触定价下载


在附近遇见新的有趣的狗。
下载
下载
©版权所有2018 TinDog

    <!-- 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>
-->