在HTML/CSS中一个句子中使用多种颜色的最佳实践是什么?

I know I want to keep my style and my content separate, so assuming I want to display:

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

<h1>ROYGBV</h1>

on a page, where each letter is also its matching color, what would be the best practice for this?

在一个页面上，如果每个字母都是它匹配的颜色，那么最好的做法是什么呢?

Would it be:

会:

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

and so on? And assuming that I have multiple words in a paragraph that needed to be colored like:

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

Sally found all the RED seashells down by the BLUE seashore out in the YELLOW sun ...

莎莉在黄色的阳光下发现了蓝色海边的所有红色贝壳。

Is it ok to have font tags all over your HTML? The only alternative I can think of is putting it them in span tags and adding a class. This would allow me to change my definition of red in the css file for all iterations of red.

在HTML中使用字体标签可以吗?我能想到的唯一选择是将它们放入span标记并添加一个类。这将允许我在css文件中对所有红色迭代修改红色的定义。

3 个解决方案

#1

<font> tag is deprecated. MDN Docs

<字体> 标记是弃用。MDN文档

Best way is in your question itself. Using span to wrap a particular word.

最好的办法就在于你的问题本身。使用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>

#2

Use:

使用:

<style type="text/css">
.classForColor {
color: red;
}
</style>

...

<body>
<span class="classForColor">txt</span>
</body>

#3

You can always do this..

你可以一直这样做。

Here is the fiddle.

这是小提琴。

Here is the snippet.

这是代码片段。

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

<div>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</div>

#1