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，如下所示

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

格式化标题html

2 个答案: