如何改变一个单词的颜色与Span标签和CSS

与CSS，设置文档中文本的颜色很容易。如果希望页面上的段落以某种颜色呈现，只需在外部样式表中指定，浏览器就会以所选的颜色显示文本。当你想改变一段文字中一个单词(或者几个单词)的颜色时，会发生什么?为此，您需要使用像标签这样的内联元素。

最终，使用CSS可以很容易地改变句子中单个单词或一小组单词的颜色，而标签都是有效的HTML，所以不要担心这是某种hack。使用这种方法，还可以避免使用不受欢迎的标记和属性，如“font”，这是过去HTML时代的产物。

这篇文章是写给那些刚开始接触HTML和CSS的web开发人员的。它将帮助您学习如何使用HTML标记和CSS来更改页面上特定文本的颜色。话虽如此，这种方法也有一些缺点，我们将在本文的最后介绍这些缺点。现在，请继续阅读以了解更改文本颜色的步骤。这很容易，大约需要两分钟。

一步一步指导

1. 在您最喜欢的文本HTML编辑器中打开您想要更新的网页。这可能是一个程序Adobe Dreamweaver或一个简单的文本编辑器，如Notepad, notepad++， TextEdit等。
2. 在文档中，找到要在页面上以不同颜色显示的单词。为了本教程的目的，让我们使用一些位于较大文本段落中的单词。该文本将包含在标记对中。找到你想要编辑颜色的两个单词中的一个。
3. 将光标放在要改变颜色的单词或单词组的第一个字母前。记住，如果你用a所见即所得像Dreamweaver这样的编辑器，你现在正在“代码视图”中工作。
4. 让我们用一个标签括住我们想要改变颜色的文本，包括一个class属性。整个段落看起来是这样的:

   这是在一个句子中集中的文本。

5. 我们刚刚使用了一个内联元素，给这个特定的文本一个我们可以在CSS中使用的“钩子”。我们的下一步是跳转到外部CSS文件来添加一个新规则。
6. 在我们的CSS文件中，让我们添加:

7. .focus-text {

8. 颜色:# F00;

9. }

10. 该规则将设置内联元素，以红色显示。如果我们之前的样式将文档的文本设置为黑色，那么这个内联样式将导致span文本被关注，并以不同的颜色突出。我们还可以在此规则中添加其他样式，比如使文本更加突出斜体或粗体?
11. 保存页面。
12. 测试页面在您最喜欢的web浏览器中查看更改的效果。
13. 请注意，除了使用，一些web专业人员选择使用其他元素，如或标记对。这些标记过去专门用于粗体和斜体，但已被弃用，代之以和。标签仍然可以在现代浏览器中工作，但是，许多web开发人员使用它们作为内联样式钩子。这并不是最糟糕的方法，但是如果您想避免任何已弃用的元素，我们建议针对这种样式需求坚持使用标记。

提示和要注意的事情

虽然这种方法适用于较小的样式化需求，比如只需要更改文档中的一小段文本，但它可能很快就会失去控制。如果你发现你的页面到处都是内联元素,都有独特的类,您使用的是在你的CSS文件,你可能会做错了,请记住,这些标签的更多页面,难度可能是维持这个页面。此外,好的网页排版很少有那么多的颜色变化，等等在整个页面。