在html中格式化标题

Question

我是这个社区的新手，也是编程新手。 我需要在我的网站中创建不同的标头，并且每个标头都应根据我的需要进行格式化。

我不知道我应该使用 id 来调用标题还是应该使用什么策略来进行良好和有效的练习？ 如果是，我应该如何实施？ 这是我的示例，请告诉我我犯的错误？ HTML：

<div class="jumbotron">
<div class="container">    
<h6 class="text-center"><a href="#"></a>PEOPLE-THINGS RECOMENDATION</h6>

    <h6><a href="#">Actors/movies</a></h6>
</div></div>

CSS 代码：

.jumbotron h6{
  position:relative;
  bottom:37px;
  color:#815cb8;
  font-weight:normal;
 }
.jumbotron h6 {
  position:relative;
  bottom:32px;
  font-weight:normal;}

我的标题根本没有改变，每当我尝试添加新标题时，它也表现出相同的功能。

非常感谢。

Answer 1

您正在设计两个相同的选择器，这就是为什么没有任何变化。您应该为h6 设置两个不同的选择器，以便为它们设置两种不同的样式。

这里是 HTML：

<div class="jumbotron">
    <div class="container">    
        <h6 class="text-center first-heading"><a href="#"></a>PEOPLE-THINGS RECOMENDATION</h6>
        <h6 class="second-heading"><a href="#">Actors/movies</a></h6>
    </div>
</div>

还有 CSS 代码：

.jumbotron h6{
    position:relative;
    color:#815cb8;
    font-weight:normal;
}

.first-heading {
    text-align: center;
}

.second-heading a {
    color:black;
    font-weight: bold;
}

这是一个 jsfiddle：https://jsfiddle.net/4d9jqxeu/

Answer 2

我认为如果您需要覆盖 h6 中的字体大小和其他内容，则不需要 h6，然后放入一个 div 并在其中写入您的 css，如下所示

.jumbotron .header1 {
  font-size: 20px;
  color: #815cb8;
  font-weight: normal;
}
.jumbotron .header2 {
  color: #f715aa;
  font-size: 12px;
  font-weight: normal;
}
.jumbotron a {
  text-decoration: none;
  color: #237bba;
}

<div class="jumbotron">
  <div class="container">

    <div class="header1">
      <a href="#"></a>PEOPLE-THINGS RECOMENDATION</div>

    <div class="header2"><a href="#">Actors/movies</a>PEOPLE-THINGS RECOMENDATION</div>

  </div>
</div>