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

  • 相关阅读:
    0x00 Java 研习录
    0x00 Linux From Scratch 实战
    第一章:Java编程入门
    陈洋总结
    pthread_detach
    explicit用法
    Java动态加载DLL方法
    ToolHelp32 函数
    android根据子view里面的数量自动排版的一个ViewGroup
    安装CocoaPods学习
  • 原文地址:https://www.cnblogs.com/lq0001/p/11863604.html
Copyright © 2011-2022 走看看