How to set font color in HTML and how to get accurate font color in HTML using PS

1. HTML font color setting

In HTML, we use the font tag to set the color of the font content.

1.font syntax:

Copy code

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>font color online example</p></title>
</head>
<body>
<font color="#FF0000">I am red font</font>
<table width="300" border="1">
<tr>
<td><font color="#0000FF">Hello</font></td>
<td></p></td>
</tr>
</table>
</body>
</html>

First, font is a pair of regular tags. Put the font text content into the tag, and set the color color + corresponding color value in the font tag to set the font color in the font tag object.

2. HTML font setting font color example

2-1. Complete code of HTML font color example:

Copy code

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css font color online demonstration</p></title>
<style>
.</p>{color:#F00}
</style>

</head>
<body>
<div class="</p>">My font is red</div>
<div style="color:#00F">My font is blue</div>

</body>
</html>

The above examples set the color of the font separately and set the color of the font in the table

2-2. Font color example screenshot

HTML font color setting example screenshot

2-3. Online Demo: View Case Studies

To change the font color, just change the color value.

2. HTML p css font color setting

Set the font color in HTML using CSS style.

There are two ways to use CSS to set HTML font color, one is CSS within the tag and the other is external CSS.

1. Basic knowledge introduction

When using external CSS, you can put the CSS code separately in a CSS file and use html link to introduce CSS (html introduces css), or you can use the <style> tag in html to create CSS. You can also use the style attribute in the HTML tag to set the CSS color.

2. p+CSS example demonstration

Here we practice two methods to implement HTML font color settings, one is to use CSS in the tag, and the other is to use the style tag to implement font color settings.

3. Example complete HTML source code

Copy code

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML hyperlink font color setting online demonstration</p></title>
<style>
a{ color:#00F}
a:hover{ color:#F00}/* Font color when the mouse is hovering*/
/* CSS comment: The above code is to set the font color of the hyperlinks in HTML*/
.div a{ color:#090}
.div a:hover{ color:#090}
/* CSS comment: The above code is to set the font color of the hyperlink in the .div object in HTML*/
</style>
</head>
<body>
<p>I set the color of the test content to blue<a href="http://www.css.com">cSS</a></p>
<div class="div">I am inside a div object, the hyperlink color is <a href="#">I am a hyperlink green</a></div>
</body>
</html>

Use the <style> tag and the style attribute in the p tag to set the font color in HTML.

4. P CSS case screenshot

CSS font color setting example screenshot

5. CSS+P case online demonstration: View case

3. HTML hyperlink A font color setting

There are two ways to set the color of anchor text fonts in HTML. One is to set a unified font color for all HTML hyperlinks, and the other is to set a separate color for the anchor text hyperlink fonts in a specified object.

This article introduces the unified and individual settings of the font color of hyperlink anchor text in HTML through examples.

1. The complete p+css html code is as follows

 <!DOCTYPE html> <html>
 <head> <meta charset="utf-8" />
 <title>HTML hyperlink font color settings online demo </title> <style>
 a{ color:#00F} a:hover{ color:#F00}/* Font color when the mouse is hovering */
 /* CSS comment: The above code is to set the unified font color of the hyperlinks in HTML */ .p a{ color:#090}
 .p a:hover{ color:#090} /* CSS comment: The above code is to set the font color of the hyperlink in the .p object in HTML */
 </style> </head>
 <body> <p>I set the color of the test content to blue<a href="http://www..com"></a></p>
 <p class="p">I am inside the p object, the hyperlink color is <a href="#">I am a hyperlink green</a></p> </body>
 </html>

The blue font of the hyperlink is the uniform setting of HTML, while the green font is the individually set hyperlink font color.

2. Hyperlink font color example screenshot

CSS hyperlink font example screenshot

3. Online Demo: View Case Studies

The above three p+CSS cases are packaged for download:

Download now (2.928KB)

4. How to get the accurate font color required by HTML

To obtain accurate color values, Photoshop (ps) software is generally used. The following teaches you how to use PS to get the font color value of a certain place, and flexibly apply it to get the background, picture or border color value of a certain place by getting the font value.

Suppose we want to get the specific color value of blue in the above image "CSS"

1. Open this picture in PS

ps open this picture

2. Use the "Select Foreground Color" or "Select Background Color" tool of the PS tool

Here we click on the "foreground color" tool in the red box

3. The "Select Foreground Color" tab pops up

After the second step, the "Select Foreground Color" tab will pop up and the mouse pointer will become a straw-like icon "Color Picker". At this time, click where you need to get the color value. If the picture is small and it is not easy to click accurately, you can use "ctrl+++" to enlarge the picture continuously.

Get the exact color value "0000FF"

4. Set the color value obtained using the color

color:#0000FF

Tips: When using color values, it is usually better to copy the color values directly from PS to avoid manual input errors. At the same time, don’t forget to add the “#” sign before the color value.

5. Summary of HTML font colors

Here we introduce three font color settings including HTML font, CSS text color, and CSS hyperlink font color. We also introduce how to use PS to obtain accurate color values. You can flexibly expand the use of font and background color settings.

<<: Postman automated interface testing practice

>>: Detailed explanation of the process of using docker to build minio and java sdk