color设置字体颜色

  • 在color设置字体颜色之前，我们首先了解color在CSS中有几种取值方式，一共有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>

  • 结果图

如何在HTML中设置字体颜色，你知道这几种方式吗？的更多相关文章

  1. android 在代码中设置字体颜色 问题

    项目中需要在代码中控制字体颜色 之前是直接引用资源文件  但是不行 tv.setTextColor(R.color.textColor_black); 无效果   后来在网上找了资料发现 要从reso ...

  2. 【转】Android中设置TextView的颜色setTextColor--代码中设置字体颜色

    原文网址:http://www.cnblogs.com/myphoebe/archive/2012/01/06/2314728.html android中设置TextView的颜色有方法setText ...

  3. Latex中设置字体颜色

    在用Latex时,想要使用不同颜色来突出某些关键点,有以下三种方案: 1.组合red.green和blue的值合成我们想要的颜色 \usepackage{color} \textcolor[rgb]{ ...

  4. 【转】asp.net中设置弹出谈话框的几种方式详解

    源地址:https://blog.csdn.net/zou15093087438/article/details/79637114 注:可用winform的MessageBox的方法,只需引用Syst ...

  5. Python中print字体颜色的设置

    Python中print字体颜色的设置 实现过程:       终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关.       转义序列是以ESC开头,即用\033来完成 ...

  6. Latex中如何设置字体颜色（3种方式）

    Latex中如何设置字体颜色(三种方式)   1.直接使用定义好的颜色 \usepackage{color} \textcolor{red/blue/green/black/white/cyan/ma ...

  7. Android代码中设置字体大小，字体颜色，显示两种颜色.倒计时效果

    Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...

  8. 使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...

  9. 如何在 apache 中设置缓存有效时间

    今天学习了下如何在 apache 中设置缓存时间,记之以备忘. 在 http 报文头中,与缓存时间有关的两个字段是 Expires 以及 Cache-Control 中的 max-age,Expire ...

随机推荐

  1. 转：python2.x 和 python3.x的区别

    注:本文的原文地址为Key differences between Python 2.7.x and Python 3.x 许多 Python 初学者想知道他们应该从 Python 的哪个版本开始学习 ...

  2. 我眼中的如何成为一名合格的PHP高级开发工程师

    转眼间搞PHP已超过10年准确的说12年,混在帝都,也经历过大公司小公司,有个同行朋友问我,我就思考下,如何成为一名合格的PHP高级开发 所有的所有仅限综合知识,因为PHP其实内容也很多,有的人专门研 ...

  3. Python3入门机器学习经典算法与应用☝☝☝

    Python3入门机器学习经典算法与应用 (一个人学习或许会很枯燥,但是寻找更多志同道合的朋友一起,学习将会变得更加有意义✌✌) 使用新版python3语言和流行的scikit-learn框架,算法与 ...

  4. python 报错TypeError: 'range' object does not support item assignment，解决方法

    贴问题 nums = range(5)#range is a built-in function that creates a list of integers print(nums)#prints ...

  5. Web安全 --Wfuzz 使用大全

    前言:  做web渗透大多数时候bp来fuzz   偶尔会有觉得要求达不到的时候 wfuzz就很有用了这时候 用了很久了这点来整理一次 wfuzz 是一款Python开发的Web安全模糊测试工具. 下 ...

  6. 高精度运算略解 在struct中重载运算符

    高精度 高精度,即高精度算法,属于处理大数字的数学计算方法.在一般的科学计算中,会经常算到小数点后几百位或者更多,当然也可能是几千亿几百亿的大数字. 重载运算符 运算符重载,就是对已有的运算符重新进行 ...

  7. [Luogu3065][USACO12DEC]第一!First!

    题目描述 Bessie has been playing with strings again. She found that by changing the order of the alphabe ...

  8. MyBatis 示例-类型处理器

    MyBatis 提供了很多默认类型处理器,参考官网地址:链接,除了官网提供的类型处理器,我们也可以自定义类型处理器. 具体做法为:实现 org.apache.ibatis.type.TypeHandl ...

  9. jquery a标签的锚点点击的时候页面上缓慢滚动

    a标签增加一个名字触发效果: $(".transition").click(function(){ if (location.pathname.replace(/^\//, '') ...

  10. SQL 方面基础操作，主要针对数据库方面的操作步骤

    SQL 结构化查询语言  适用于所有的SQL数据库 SQL  要求每条指令后末端 都要有分号(;),分号是标准方法,对服务器相同请求中执行一条以上的sql语句. 最终目的: 实现对数据库数据的  增 ...