How to set the font color in HTML, you know several ways to do this?

color set font color

  • In the colorbefore setting font color, we need to know colorin CSSthe value of several ways, a total of four ways, if still incomplete Please advise Thank you in the comments section, the following four ways:
  • Hex, decimal, English words, abbreviations hex.
  • Now let's get into the font color practice, the author in the form of embedded, the classproperty value of .boxthe font color to red.
  • Hexadecimal as follows:
  • Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置字体颜色</title>
    <style>
        .box{
            color: #FF0000; 
        }
    </style>
</head>
<body>
    <h2 class="box">成功不是击败别人,而是改变自己</h2>
</body>
</html>
  • Results Figure

  • Decimal as follows:
  • Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置字体颜色</title>
    <style>
        .box{
            color: rgb(250,0, 0)
        }
    </style>
</head>
<body>
    <h2 class="box">成功不是击败别人,而是改变自己</h2>
</body>
</html>
  • Block

  • Decimal representation of color in a way CSSno browser compatibility issues.

  • The use of English words as follows:
  • Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置字体颜色</title>
    <style>
        .box{
            color:red;
        }
    </style>
</head>
<body>
    <h2 class="box">成功不是击败别人,而是改变自己</h2>
</body>
</html>
  • Results Figure

  • Use hexadecimal customized abbreviations
  • Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置字体颜色</title>
    <style>
        .box{
            color: #F00; 
        }
    </style>
</head>
<body>
    <h2 class="box">成功不是击败别人,而是改变自己</h2>
</body>
</html>
  • Results Figure

Guess you like

Origin www.cnblogs.com/lq0001/p/11863604.html