HTML/CSS中句子中多种颜色的最佳实践是什么？

Question

我知道我想保持我的风格和内容分开,所以假设我想显示:

<h1>ROYGBV</h1>

在一个页面上,每个字母也是它的匹配颜色,最佳做法是什么？

可不可能是:

<h1><font color="red">R</font><font color="orange">O</font>

等等？假设我在段落中有多个单词需要着色如下:

莎莉在黄色太阳下的蓝色海边发现了所有的RED贝壳......

是否可以在HTML上使用字体标记？我能想到的唯一选择是将它们放在span标签中并添加一个类.这将允许我在css文件中更改我对red的所有迭代的red定义.

Answer 1

<font>tag已弃用.MDN文档

最好的方法就是你自己的问题.使用span来包装特定单词.

.red {
  color: red;
}
.blue {
  color: blue;
}
.yellow {
  color: yellow;
}

<p>Sally found all the <span class="red">RED</span> seashells down by the <span class="blue">BLUE</span> seashore out in the <span class="yellow">YELLOW</span> sun ...</p>