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

时间:2009-07-21 15:13:52

标签: html

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

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

4 个答案:

答案 0 :(得分:13)

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

或者最好:

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

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

.error {
    color: red;
}

答案 1 :(得分:6)

首选方法是使用 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非常强大,它可以为您节省大量时间。

答案 2 :(得分:0)

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

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

答案 3 :(得分: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>