如何在同一句子中应用不同的文本样式？

Question

所以我有一个像这样的<h1>：

<h1>Hello my name is: (variable name)</>

我想要一个粗体的H1，但我希望变量名更轻。

我这样做的一个好方法是：

<h1>Hello my name is:</h1><h1 id="changeName">Variable Name</h1> 

然后分别设置样式。但是，这样做的话我无法在一句话中得到文字。

Answer 1

您可能要考虑在<h1>中使用其他元素。这样，您不必两次使用<h1>标签。

<h1>Hello my name is:<span class="changeName">Variable Name</span></h1> 

<span>元素的优点在于，除了您通过CSS明确提供的内容外，它不会更改样式。

此外，请优先使用类属性，而不是id属性，如果以后决定将相似的样式添加到其他元素中，它将使样式更加通用。

Answer 2

使用span标签，并相应地设置span的样式：

    <h1>Hello my name is: <span>Variable Name</span></h1>

Answer 3

您要做的是为要突出显示的文本添加一个内联元素。这可能是 <em> | <span> | <b> 任何对您有意义的。

然后在CSS中将元素定位为目标

h1 > em {font-weight: bold;}