Question

我知道我希望将我的风格和内容分开，所以假设我要显示：

<h1>ROYGBV</h1>

页面上的

，每个字母也是匹配的颜色，最佳做法是什么？

是不是：

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

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

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

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

Answer 1

不推荐使用

<font>标记。 MDN Docs

最好的方法就是你自己的问题。使用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>

Answer 2

使用：

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

...

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

Answer 3

你可以随时这样做..

这是fiddle。

以下是摘录。

.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>

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

3 个答案: