我正在制作一个网站页面，我想让其中一段文字的字体颜色变成红色，但是我不确定该如何实现。
之前我使用FrontPage来建立网页，所以这些HTML代码对我而言是非常新的东西。请问有什么最好的方法来实现这个效果呢？
4个回答
13
<p style="color:red">Foo</p>
或者更好的选择：
<p class="error">Foo</p>
在你的样式表中定义了 "error"：
.error {
color: red;
}
- Brian Moeskau
6
使用层叠样式表（CSS）是最好的方法。这样可以编辑网站的视觉效果，而不必过多地涉及HTML代码本身。
为了方便新用户，我将类名命名为“red”，但是class =“red”不是如何命名的最佳示例。更好的方法是根据它们的语义含义而不是它们实现的样式来命名CSS类。因此，class =“error”或class =“hilight”可能更合适。（感谢Grant Wagner指出）
所以对于我们的示例，它将如下所示：
现在我们已经选择了类名为"body"的"div"元素。现在我们需要应用所需的视觉样式。我们在括号内实现这一点：
<[tag] style="[css]"> Content </[tag]>
向HTML元素添加样式的推荐方法是为其分配一个“class”（可以在文档中重复使用的标识符）或“id”（不应在文档中重复使用的唯一标识符）。
例如：
<[tag] id="element1" class="red"> Content </[tag]>
<[tag] id="element2" class="red"> Content </[tag]>
其中tag是任何有效的html标签，id是唯一的任意名称，class是可以重复的任意名称。
然后在CSS中（在文档的<head>标签内）：
<style type="text/css">
.red {
color:red;
}
#element1 {
background-color:black;
}
</style>
为了方便新用户，我将类名命名为“red”，但是class =“red”不是如何命名的最佳示例。更好的方法是根据它们的语义含义而不是它们实现的样式来命名CSS类。因此，class =“error”或class =“hilight”可能更合适。（感谢Grant Wagner指出）
CSS简要说明：
由于你得到的大多数答案都提到了CSS，我将添加一个小指南，介绍它的工作原理：
CSS应该放在哪里
首先，您需要知道CSS应该添加在文档的标签内。用于定义CSS的标签是：
<style type="text/css"> <!-- Your CSS here --> </style>
这被称为内嵌CSS，因为它在文档内部。然而，更好的做法是使用以下标签直接从外部文档链接“包含它”：
<link href="file.css" media="all" rel="stylesheet" type="text/css"/>
将 file.css 替换为您想要包含到文档中的外部文件。
使用“link”标签的好处是您不必编辑内联CSS。所以，假设您有10个HTML文档，并且您想要更改字体的颜色，您只需要在外部CSS文件中进行更改即可。
这两种包含CSS的方式是最受推荐的方式。然而，还有一种方法是通过内联CSS调整，例如：
<[tag] style="<!-- CSS HERE -->"> Content </[tag]>
CSS常规结构
在编写CSS时，你需要首先了解什么是类和ID。因为我已经在上面提到了它们的作用，所以现在我将解释如何使用它们。
在编写CSS时，你首先需要告诉它你要“选择”哪些元素，例如：
假设我们有一个带有类“basic”的“div”元素，我们想让它具有黑色背景颜色、白色字体和灰色边框。
为此，我们首先需要“选择”该元素：
.[identifier] { }
由于我们正在使用一个类，因此在标识符前面加上“.”，在这种情况下是：“basic”，所以它将看起来像这样：
.basic { }
这不是唯一的方法，因为我们告诉您将选择任何具有“basic”类的元素，所以假设我们只想要“div”元素。为此，我们使用：
[html-tag].[identifier] { }
所以对于我们的示例，它将如下所示：
div.basic { }
现在我们已经选择了类名为"body"的"div"元素。现在我们需要应用所需的视觉样式。我们在括号内实现这一点：
div.basic {
background-color:black;
color:white;
border:1px solid gray;
}
我们刚刚成功地将视觉样式应用于所有带有“basic”类的“div”元素。
请记住，这不仅适用于“class”，也适用于“id”，但需要进行轻微更改。以下是最终代码的示例，但我们将使用“id”而不是“class”：
#unique-basic {
background-color:black;
color:white;
border:1px solid gray;
}
想要了解完整的CSS指南，可以访问这个链接：http://www.w3schools.com/css/
记住：
保持你的HTML代码干净整洁，使用CSS来修改任何需要的视觉样式。CSS非常强大，能够为你节省很多时间。
- MarioRicalde
3
0
<p style="color:red">Your Text here</p>
但是正如其他人已经用更好的措辞说过的那样：比上述方法更好的是使用类或ID，并将CSS属性分配给它，而不是使用内联样式。
- Oliver Giesen
0
<style type="text/css">
.myCSS
{
color:red
}
</style>
<div class="myCSS">text</div>
<span class="myCSS">text</span>
<p class="myCSS">text</p>
<!-- table elements..... -->
<td class="myCSS">text</td>
<tr class="myCSS">text</tr>
- Muad'Dib
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
class="red"可能不是最好的例子。最好根据它们的语义意义而不是它们实现的样式来命名CSS类。因此，class="error"或class="hilight"可能更适合。 - Grant Wagner