简短CSS说明：

Question

我正在创建一个网页，我希望字体的颜色在段落中是红色的，但我不知道该怎么做。

我之前使用FrontPage构建网页，所以这个HTML内容对我来说真的很新。这样做的最佳方式是什么？

Answer 1

<p style="color:red">Foo</p>

或者最好：

<p class="error">Foo</p>

样式表中定义了“错误”：

.error {
    color: red;
}

Answer 2

首选方法是使用 Cascading Style Sheet (CSS) 。这使您可以编辑网站的可视方面，而无需处理HTML代码本身。

说明：

<[tag] style="[css]"> Content </[tag]>

[tag]可以是任何东西。例如“p”（段落），“span”，“div”，“ul”，“li”等等。

并且[css]是任何有效的CSS。例如“color：red; font-size：15px; font-weight：bold”

向html元素添加样式的推荐方法是为其分配一个“类”（可以在文档上重复的标识符）或“id”一个不应在文档中重复的唯一标识符。 / p>

例如：

<[tag] id="element1" class="red"> Content </[tag]>
<[tag] id="element2" class="red"> Content </[tag]>

其中tag是任何html有效标记。 id是唯一的任意名称，类是可以重复的任意名称。

然后在CSS中（在文档的标签内）：

<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时，首先需要告诉您要选择哪些元素，例如：

假设我们有一个“div”元素，其中类“基本”，我们希望它有黑色背景颜色，白色字体和灰色边框。

要做到这一点，我们首先需要“选择”元素：

.[identifier] { }

由于我们使用的是类，因此我们使用“。”在标识符前面，在这种情况下是：“basic”，所以看起来像这样：

.basic { }

这不是唯一的方法，因为我们告诉任何具有“基本”类的元素将被选中，所以我们说我们只需要“div”元素。为此，我们使用：

[html-tag].[identifier] { }

因此，对于我们的示例，它将如下所示：

div.basic { }

现在我们选择了“div”类和“body”。现在我们需要应用我们希望的视觉风格。我们在括号内执行此操作：

div.basic {
    background-color:black;
    color:white;
    border:1px solid gray;
}

有了这个，我们成功地将视觉样式应用于附加了“基本”类的所有“div”元素。

请记住，这不仅仅适用于“类”，它也适用于“id”，但略有改动，这里是最终代码的一个例子，但我们只是说它是一个“id”而不是一个类/ p>

#unique-basic {
    background-color:black;
    color:white;
    border:1px solid gray;
}

有关CSS的完整指南，您可以访问此链接： http://www.w3schools.com/css/

<强>记住：

保持HTML代码清洁并使用CSS修改所需的任何视觉样式。 CSS非常强大，它可以为您节省大量时间。

Answer 3

<p style="color:red">Your Text here</p>

但正如其他人现在用更多更好的词语说的：比上面更好的是使用类或ID并将CSS属性分配给它而不是使用内联样式。

Answer 4

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

如何用html更改我的字体颜色？

4 个答案:

简短CSS说明：

把CSS放在哪里

CSS一般结构