如何在HTML中设置字体颜色,你知道这几种方式吗?
2019-11-14 23:40
966 查看
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>
结果图
- 如果大家对颜色的值不熟悉可以去W3 school 官方文档看看哈。
相关文章推荐
- 通过HTML方式设置文字颜色和字体
- Latex中如何设置字体颜色(3种方式)
- html颜色代码大全,二进制颜色代码大全,markdown 字体颜色设置
- 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体
- 有CCS的情况下,如何动态设置gridview的字体颜色
- 关于UGUI如何不用代码修改字体颜色两种方式介绍及其优缺点
- Jxl操作Excel设置背景、字体颜色、对齐方式、列的宽度(二)
- 如何设置输入框 input 中 placeholder的字体颜色、字号
- phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
- 在html中向table中动态添加内容,并设置cell字体颜色
- TextView设置字体颜色的几种方法简记
- Head First HTML & CSS chapter 8 ,9,10 :开始学习CSS, 字体和颜色设置, 盒模型
- sublime text3如何设置鼠标选中后字体的颜色
- HTML设置超链接字体颜色和点击后的字体颜色
- 为什么html中 设置了li的颜色样式,a标签内的字体颜色还是不变呢
- html设置背景色和字体颜色--兼容各浏览器
- [Android UI界面] 如何在activity中动态的设置TextView上字体的颜色
- listview.enable =false 如何设置行的字体颜色
- css颜色值设置方式有哪些?以及如何随机一个颜色?
- 如何设置static变量显示的颜色和字体大小???