Html 在段落中途更改字体颜色的最佳方法?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3587897/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 04:17:20  来源:igfitidea点击:

Best way to change font colour halfway through paragraph?

htmlcss

提问by MozazDesign

I was wondering what is the best way to change the font colour of some text that appears halfway through a paragraph.

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

For example, I have a paragraph of white text, but I want a couple of words in the middle of the paragraph to be orange so that they stand out, but then carry on with white text after that, what would be the best way of achieving this?

例如,我有一段白色文字,但我希望段落中间的几个单词是橙色的,以便它们脱颖而出,但是在那之后继续使用白色文字,最好的方法是什么?实现这个?

Thanks in advance!

提前致谢!

回答by

<span>will allow you to style text, but it adds no semantic content.

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

As you're emphasizing some text, it sounds like you'd be better served by wrapping the text in <em></em>and using CSS to change the color of the <em>element. For example:

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

CSS

CSS

.description {
  color: #fff;
}

.description em {
  color: #ffa500;
}

Markup

标记

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

In fact, I'd go to great pains to avoid the <span>element, as it's completely meaningless to everything that doesn't render your style sheet (bots, screen readers, luddites who disable styles, parsers, etc.) or renders it in unexpected ways (personal style sheets). In many ways, it's no better than using the <font>element.

事实上,我会<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>

回答by Novikov

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

Is the only way I know of barring the font tag.

是我所知道的禁止字体标签的唯一方法。

回答by jsbueno

Nornally the tag is used for that, with a change in style.

通常情况下,标签用于此目的,但风格有所变化。

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

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

You set the css in the header (or rather, in a separate css file) to make your "highlight" text assume the color you wish.

您可以在标题中(或者更确切地说,在单独的 css 文件中)设置 css,以使“突出显示”文本采用您希望的颜色。

(e.g.: with

(例如:与

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

</style>

in the header. Avoid using the tag <font />for that at all costs. :-)

在标题中。<font />不惜一切代价避免使用标签。:-)

回答by ask91

You can also simply add the fonttag inside the ptag.

您也可以简单地在p标签内添加字体标签。

CSS sheet:

CSS表:

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

and in HTML page:

并在 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>

It works for me. But, in case you need modification, see w3schoolsfor more usage :)

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

回答by Scott Evernden

wrap a <span>around those words and style with the appropriate color

包装一个<span>围绕这些词和风格用适当的颜色

now is the time for <span style='color:orange'>all good men</span> to come to the