如何设置标题中每个符号的样式

Question

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

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

注意：我只想使用 HTML 和 CSS 来完成此操作，而不是 Javascript 或 JQuery

Answer 1

您可以使用span具有class属性并符合类的 CSS 规则的标签（可以重用）.red {&nbsp; color: red;}.blue {&nbsp; color: blue;}.green {&nbsp; color: green;}.yellow {&nbsp; color: yellow;}.orange {&nbsp; color: orange;}.brown {&nbsp; 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>

Answer 2

只需将每个后续或所需的符号放入 span 标记中，并使用类或内联样式属性对其进行着色，如代码中最后两个后者所示。.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

我建议您用标签包围每个符号<span>，并使用“id”单独定位它。它看起来像这样：&nbsp;<header> F<span id="red">&#8226;</span>R<span id="blue">&#8226;</span>I&<span id="green">#8226;</span>E<span id="yellow">&#8226;</span>N<span id="orange">&#8226;</span>D<span id="brown">&#8226;</span>S </header>您不想使用<p>标签来设置符号的样式，因为它们会在每个字母之间创建新行。