Question

现在我的标题包含两个不同风格的p标签：

<p style="color:#FFF; font-size:34px; margin-bottom:10px;">First half</p>
<p style="color:#FFF; font-size:88px;">Second half</p>

是否可以将其转换为一个h1标签？或者我可以互相拥有两个h1吗？主要目的是它应该与seo一起使用。

Answer 1

SEO-wise - 每个网页应包含一个H1标签。我相信你想要实现的一个可能的解决方案是在你的H1中添加span标签，使你能够以不同的方式为H1的每个部分设置样式：

HTML：

<h1>
  <span class="smallerFont">First half</span>
  <span class="bigFont">Second half</span>
</h1>

CSS：

h1 {
  color: #fff;
}

.smallerFont {
  font-size: 34px;
  margin-bottom: 10px;
}

.bigFont {
  font-size: 88px;
}

Answer 2

1）您应该将样式移动到样式表。

2）您可以在一个h1中轻松拥有多种样式......就像这样：

HTML：

<h1>First <span class='A'>Second</span></h1>

CSS：

h1 { color:#F00; }
.A { color:#0F0; }

Answer 3

有点非典型的方法是使用::first-line和white-space: pre-line的组合。此组合非常有效，因为white=space: pre-line允许您确定第一行的确切位置。当然，和其他答案一样，这种方法可以让你只有一个h1标签，非常适合搜索引擎优化。

关于其工作原理的简单示例：

h1 {
  white-space: pre-line;
  color: #fff;
  font-size: 88px;
}
h1::first-line {
  font-size: 34px;
}
body {
  background: black;
}

<h1>First half
  Second half
</h1>

HTML看起来有点奇怪。那是因为我们用white-space: pre-line强制换行。它保留了代码中的任何换行符（显然，最后一个除外）。这使得新行很重要，如下所示。

h1 {
  white-space: pre-line;
  border: 1px black solid;
}

 <h1>First half
   
   Second half</h1>

<h1>
  First half
  Second half
</h1>

尽管如此，它使我们的第一行终结于我们想要的任何地方，允许我们使用::first-line伪元素来定位它。不幸的是，::first-line伪元素支持的样式是fairly limited，但你仍然可以做很多。可悲的是，这使得margin-bottom难以复制。我的closest attempt来自使用line-height，但有效，但在h1和下一个元素之间留下了更大的差距。不过，它可以通过一点负的利润来修复，但是你可能会遇到其他问题。

虽然这可能不是最好的方法，但这是解决问题的有趣而有趣的方法。

h1 {
  white-space: pre-line;
  color: #fff;
  font-size: 88px;
  line-height: 120px;
}
h1::first-line {
  font-size: 34px;
  line-height: normal;
}
/* Formatting styles */

* {
  margin: 0;
  padding: 0;
}
body {
  background: black;
  padding-top: 10%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
h1,
div {
  max-width: 475px;
  border: 1px white solid;
  flex: 1;
  /* Makes h1 the same font-weight
   of p for better comparison */
  font-weight: normal;
}

<h1>First half
      Second half
</h1>
<div>
  <p style="color:#FFF; font-size:34px; margin-bottom:10px;">First half</p>
  <p style="color:#FFF; font-size:88px;">Second half</p>
</div>

Answer 4

你可以使用

<h1>
<span >First half</span>
<span class='otherStyle' >Second half</span>
</h1>

Css风格：

h1{
color :red;
}

h1> span{ //all the span elements within h1 is applied this style
 color : blue;
font-size:34px; 
margin-bottom:10px;
 }
.otherStyle{  
color:yellow;
font-size:88px;
}

同一个h1标签中有两种不同的样式

4 个答案: