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

  • 相关阅读:
    程序员移居国外指南(1)-父母怎么办?
    【广州.NET社区线下活动】云定未来
    TDD/BDD和接口、基类、继承、依赖注入DI
    德国慕尼黑.NET俱乐部VS2019发布活动
    大湾区联动:广州深圳助力东莞.NET俱乐部首次线下活动
    .NET的未来-广州.NET俱乐部学生分会
    Belgrade Azure 2019-2-11活动感悟
    参观微软Serbia开发中心和Office365 2019-01-31活动感悟
    MySQL复制(二)--基于二进制日志文件(binlog)配置复制
    MySQL复制(一)--复制概述
  • 原文地址:https://www.cnblogs.com/lq0001/p/11863604.html
Copyright © 2011-2022 走看看