zoukankan      html  css  js  c++  java
  • 如何在HTML中设置字体颜色,你知道这几种方式吗?

    color设置字体颜色

    • color设置字体颜色之前,我们首先了解colorCSS中有几种取值方式,一共有4种方式,若有不全还请在评论区告知谢谢,4种方式如下:
    • 十六进制、十进制、 英文单词、十六进制的缩写。
    • 现在让我们进入字体颜色实践,笔者以嵌入式的形式,将class属性值为.box中的字体颜色设置为红色。
    • 使用十六进制如下:
    • 代码块

    <!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>
    
    • 结果图

    • 使用十进制如下:
    • 代码块

    <!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>
    
    • 代码块

    • 十进制表示颜色的方式在CSS中没有浏览器兼容性问题。

    • 使用英文单词如下:

    • 代码块

    <!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>
    
    • 结果图

    • 使用十六定制的缩写
    • 代码块

    <!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>
    
    • 结果图

  • 相关阅读:
    [BZOJ2809][Apio2012]dispatching
    [BZOJ4584][Apio2016]赛艇
    [BZOJ3206][Apio2013]道路费用
    [codeforces551E]GukiZ and GukiZiana
    [BZOJ3809]Gty的二逼妹子序列
    [BZOJ3289]Mato的文件管理
    [BZOJ3052][UOJ#58][WC2013]糖果公园
    [SPOJ10707]Count on a tree II
    [BZOJ1086][SCOI2005]王室联邦
    python小知识
  • 原文地址:https://www.cnblogs.com/lq0001/p/11863604.html
Copyright © 2011-2022 走看看