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

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>
<!-- HTML comment: Use the style tag to set the font color -->
</head>
<body>
<div class="</p>">My font is red</div>
<div style="color:#00F">My font is blue</div>
<!-- Use the style attribute in the div tag to set the font color -->
</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

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

Recommend

Detailed explanation of the update command for software (library) under Linux

When installing packages on an Ubuntu server, you...

How to use the HTML form attributes readonly and disabled

1. readonly read-only attribute, so you can get th...

The IE environment stipulates that the div height must be greater than the font height

Copy code The code is as follows: <div class=&...

A simple way to restart QT application in embedded Linux (based on QT4.8 qws)

Application software generally has such business ...

JavaScript to implement simple tab bar switching content bar

This article shares the specific code of JavaScri...

Uniapp realizes sliding scoring effect

This article shares the specific code of uniapp t...

Complete steps to upgrade Nginx http to https

The difference between http and https is For some...

Bootstrap 3.0 study notes grid system case

Preface In the previous article, we mainly learne...

Introduction to CSS3 color value RGBA and gradient color usage

Before CSS3, gradient images could only be used a...

Method of building redis cluster based on docker

Download the redis image docker pull yyyyttttwwww...

How to use webpack and rollup to package component libraries

Preface I made a loading style component before. ...

Teach you how to install docker on windows 10 home edition

When I wrote the Redis book and the Spring Cloud ...

Improvement experience and sharing of 163 mailbox login box interactive design

I saw in the LOFTER competition that it was mentio...

Detailed explanation of nginx's default_server definition and matching rules

The default_server directive of nginx can define ...

How to implement navigation function in WeChat Mini Program

1. Rendering2. Operation steps 1. Apply for Tence...