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

I'm making a web page where I want the color of the font to be red in a paragraph but I'm not sure how to do this.

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

I was using FrontPage for building web pages before so this HTML stuff is really new to me. What is the best way to do this?

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

4 个解决方案

#1

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

Or preferrably:

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

Where "error" is defined in your stylesheet:

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

.error {
    color: red;
}

#2

The preferred way to do this is using Cascading Style Sheet (CSS). This allows you to edit the visual aspects of the site without having to deal much with the HTML code itself.

执行此操作的首选方法是使用层叠样式表(CSS)。这使您可以编辑网站的可视方面,而无需处理HTML代码本身。

Explanation :

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

Where [tag] can be anything. For example "p" (paragraph), "span", "div", "ul", "li".. etc.

哪里[tag]可以是任何东西。例如“p”(段落),“span”,“div”,“ul”,“li”等。

and where [css] is any valid CSS. For example "color:red; font-size:15px; font-weight:bold"

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

---

The recommended way to add style to a html element is by assigning it a "class" (a identifier that can be repeated on the document) or a "id" a unique identifier that shall not be repeated in the document.

向html元素添加样式的推荐方法是为其指定一个“类”(可以在文档上重复的标识符)或“id”一个不应在文档中重复的唯一标识符。

For example:

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

Where tag is any html valid tag. id is a unique arbitrary name and class is an arbitrary name that can be repeated.

标签是任何html有效标签。 id是唯一的任意名称,类是可以重复的任意名称。

Then in the CSS (inside the tags of your document):

然后在CSS中(在文档的标签内):

<style type="text/css">

.red {
    color:red;
}

#element1 {
    background-color:black;
}

</style>

For this example and to keep it simple to new users I named the class "red". However class="red" isn't the best example of how to name . Better to name CSS classes after their semantic meaning, rather than the style(s) they implement. So class="error" or class="hilight" might be more appropriate. ( Thanks to Grant Wagner for pointing that out )

对于这个示例,为了让新用户保持简单,我将类命名为“red”。但是class =“red”并不是如何命名的最好例子。最好在语义之后命名CSS类,而不是它们实现的样式。所以class =“error”或class =“hilight”可能更合适。 (感谢Grant Wagner指出这一点)

---

Brief CSS Explanation :

Since most of the answers you're getting are all mentioning CSS, I'll add a small guide on how it works:

由于您获得的大多数答案都提到了CSS,我将添加一个关于它如何工作的小指南:

Where to put CSS

First of all, you need to know that CSS should be added inside the tags of your document. The tags used to define where the CSS is going to be are:

首先,您需要知道应该在文档的标记内添加CSS。用于定义CSS的位置的标签是:

<style type="text/css"> <!-- Your CSS here --> </style>

This is called embedded CSS since it's inside the document. However, a better practice is to link "include it" directly from an external document by using the following tags:

这称为嵌入式CSS,因为它位于文档中。但是,更好的做法是使用以下标记直接从外部文档链接“包含它”:

<link href="file.css" media="all" rel="stylesheet" type="text/css"/> 

Where file.css is the external file you want to include into the document.

file.css是您要包含在文档中的外部文件。

The benefits of using the "link" tag is that you don't have to edit in-line CSS. So lets say if you have 10 HTML documents and you want to change the color of a font you just need to do it on the external CSS file.

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

This two ways of including CSS are the most recommended ways. However, there's one more way that's by doing in-line CSS adjustments, for example:

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

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

CSS General Structure

When you code write CSS, the first thing you need to know is what are classes and what are id's. Since I already mentioned what they do above I'm going to explain how to use them.

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

When you write CSS you first need to tell which elements you're going to "select", for example:

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

Lets say we have a "div" element with the class "basic" and we want it to have a black background color, a white font, and a gray border.

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

To do this we first need to "select" the element:

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

.[identifier] { }

Since we're using a class we use a "." in front of the identifier which in this case is: "basic", so it will look like this:

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

.basic { }

This is not the only way, because we're telling that ANY element that has the class "basic" will be selected, so lets say we JUST want the "div" elements. To do this we use:

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

[html-tag].[identifier] { }

So for our example it will look like this:

因此,对于我们的示例,它将如下所示:

div.basic { }

Now we've selected the "div" with the class "body". Now we need to apply the visual style we wish. We do this inside the brackets :

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

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

With this, we just applied successfully a visual style to all "div" elements that have the "basic" class attached.

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

Remember this doesn't just apply for "class" it also applies for "id" but with a slight change, here an example of the final code but instead of a class we'll just say it's a "id"

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

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

For a complete guide to CSS you can visit this link: http://www.w3schools.com/css/

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

Remember:

Keep your HTML Code clean and use CSS to modify ANY visual style that's needed. CSS is really powerful and it'll save you a lot of time.

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

#3

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

#4

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

But as others have by now said in more and better words: Even better than the above would be to use classes or IDs and assign the CSS-attributes to that instead of using the inline style.

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