CSS/HTML寻址多个标头

Question

因此，我仍然是HTML/CSS的新手，我导入了一个自定义字体。我有很多在我的网站上的一行标题和段落，但他们需要很多不同的风格。我不能每次使用"H1-6“或"header”或"p“。有什么更好的方法来处理标题/段落？谢谢!

<h1>Qualenist</h1>
<h2>Lorem ipsum dolor sit amet & consectetur adipisicing elit</h2>
<h3>Sign Up</h3>
<h4>learn more</h4>
<h6><span>already a member?</span> Sign in</h6>
<header>How it works</header>

Answer 1

欢迎来到HTML和CSS的有趣世界！这里的标准方法是向元素中添加类，以便对它们进行区分，以便您可以以不同的方式对它们进行样式设置：

<h1 class="success">Your subscription is processed</h1>
<h1 class="error">There was a problem processing your subscription</h1>

CSS中的...then：

h1.success { color: green; font-family: "Helvetica"; }
h1.error { color: red; font-family: "Courier"; }

然后，当你的老板改变主意，希望所有的成功头都是紫色漫画的时候，你可以相应地编辑h1.success的CSS规则。

Answer 2

只需给css类似的

<header class="newstyle">how it works</header>
<header class="other">how it works</header>

.newstyle{
 font-size:30px;
 }
.other{
 font-size:20px;
}

Answer 3

您可以很容易地将类添加到h1到h6中，比如main、sidebar等等。

这些定义具有更高的优先级，因为它们的specifity高于只使用标记的定义。

有关specifity的更多信息，请参阅以下链接：

1. Mozilla开发人员网络
2. HTMLDog