在段落中途改变字体颜色的最佳方法是什么?

时间:2010-08-27 20:30:32

标签: html css

我想知道更改段落中途出现的某些文字的字体颜色的最佳方法是什么。

例如,我有一段白色文字,但是我想在段落中间的几个单词是橙色的,这样它们才能脱颖而出,但之后继续用白色文字,那将是什么实现这个目标的最好方法是什么?

提前致谢!

5 个答案:

答案 0 :(得分:46)

<span>将允许您设置文本样式,但不添加任何语义内容。

当您强调某些文字时,通过将文本包装在<em></em>中并使用CSS更改<em>元素的颜色,听起来更好。例如:

CSS

.description {
  color: #fff;
}

.description em {
  color: #ffa500;
}

标记

<p class="description">Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Sed hendrerit mollis varius. Etiam ornare placerat 
massa, <em>eget vulputate tellus fermentum.</em></p>

事实上,我会竭尽全力避免使用<span>元素,因为对于那些无法呈现样式表的内容(机器人,屏幕阅读器,禁用样式的luddites,解析器,等)或以意想不到的方式呈现(个人风格表)。在许多方面,它并不比使用<font>元素好。

.description {
  color: #000;
}

.description em {
  color: #ffa500;
}
<p class="description">Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Sed hendrerit mollis varius. Etiam ornare placerat 
massa, <em>eget vulputate tellus fermentum.</em></p>

答案 1 :(得分:15)

<span style="color:orange;">orange text</span>

我知道禁止字体标记的唯一方法。

答案 2 :(得分:6)

Nornally标签用于此,并改变了风格。

<p>This is my text <span class="highlight"> and these words are different</span></p>

您可以在标题中设置css(或者更确切地说,在单独的css文件中),使“高亮”文本采用您想要的颜色。

(例如: 与

<style type="text/css">
  .highlight {color: orange}

</style>
标题中的

。不惜一切代价避免使用标记<font />。 : - )

答案 3 :(得分:1)

使用适当的颜色

围绕这些单词和样式包裹<span>
now is the time for <span style='color:orange'>all good men</span> to come to the

答案 4 :(得分:1)

您也可以在 p 标记内添加 font 标记。

CSS表格:

<style type="text/css">
   p { font:15px Arial; color:white; }
</style>

并在HTML页面中:

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. 
    <font color="red"> 
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris     nisi ut aliquip ex ea commodo consequat. 
    </font>
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

它对我有用。 但是,如果您需要修改,请参阅w3schools了解更多用法:)