如何为 Header 中的每个符号设置样式

Question

我正在尝试设计样式符号，并想通过为字母之间的每个点赋予实际 FRIENDS 徽标的颜色来尝试设计此 header 样式。我想知道什么是最好的方法。可以在 HTML 中更改符号颜色吗？如果是，制作具有不同 ID 的 p 标签是否是设置点样式的唯一方法？这是 header：

<header> F&#8226;R&#8226;I&#8226;E&#8226;N&#8226;D&#8226;S </header>

注意： 我只想使用 HTML 和 CSS 而不是 Javascript 或 JQuery

Answer 1

我建议您用  标记包围每个符号，并用 "id" 单独定位它。

它看起来像这样： <header> F•R•I&#8226;E•N•D•S </header>

您不希望使用  标签来设置符号样式，因为它们会在每个字母之间创建新行。

Answer 2

只需将每个后面的或需要的符号放入 span 标记中，并使用 class 或内联样式属性对其进行着色，如代码中最后两个后者所示。

.red{
color: red;
}
.blue{
color: blue;
}
.green{
color: green;
}
.brown{
color: brown;
}
.orange{
color: orange;
}

<header> <span class="red">F</span>&#8226;<span class="green">R</span>&#8226;<span class="brown">I</span>&#8226;<span class="blue">E</span>&#8226;<span style="color:yellow">D</span>&#8226;<span style="color:gray">S</span> </header>

Answer 3

您可以使用具有 class 属性的 span 标签，并根据 CSS 规则为类（可以重复使用）

.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}

.yellow {
  color: yellow;
}

.orange {
  color: orange;
}

.brown {
  color: brown;
}

<header> F<span class="red">&#8226;</span>R<span class="blue">&#8226;</span>I<span class="green">&#8226;</span>E<span class="yellow">&#8226;</span>N<span class="orange">&#8226;</span>D<span class="brown">&#8226;</span>S </header>

如何为 Header 中的每个符号设置样式

How to Style Each Symbol in Header

html

css

symbols