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

Question

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

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

Answer 1

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

或者最好:

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

在样式表中定义"错误"的位置:

.error {
    color: red;
}

Answer 2

执行此操作的首选方法是使用层叠样式表(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"一个不应在文档中重复的唯一标识符.

例如:

<[tag] id="element1" class="red"> Content </[tag]>
<[tag] id="element2" class="red"> Content </[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是您要包含在文档中的外部文件.

使用"链接"标记的好处是您不必编辑内嵌CSS.因此,假设您有10个HTML文档,并且您想要更改外部CSS文件中只需要执行此操作的字体颜色.

这两种包含CSS的方式是最推荐的方式.但是,通过在线CSS调整还有一种方法,例如:

<[tag] style="<!-- CSS HERE -->"> Content </[tag]>

CSS一般结构

编写CSS代码时,首先需要知道的是什么是类,什么是id.既然我已经提到了他们上面做了什么,我将解释如何使用它们.

当你编写CSS时,首先需要告诉你要选择哪些元素,例如:

假设我们有一个"div"元素,类为 "basic",我们希望它有黑色背景颜色,白色字体和灰色边框.

要做到这一点,我们首先需要"选择"元素:

.[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"而不是一个类

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

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

记得:

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