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>
结果图
image.PNG
使用十进制如下:
代码块
Copy
- <!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>
代码块
image
十进制表示颜色的方式在 CSS 中没有浏览器兼容性问题.
使用英文单词如下:
代码块
Copy
- <!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>
结果图
image
使用十六定制的缩写
代码块
Copy
- <!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>
结果图
image
如果大家对颜色的值不熟悉可以去 W3 school 官方文档看看哈.
年初整理了一批 web 前端教程, 帮助想要成为 Web 前端程序员的人. 从零基础到各种框架的教程都有. 只需要加入到 Web 前端学习 qun:296,212,562. 即可免费领取, 学习过程中有任何问题可以在里面问. 种一颗树最好的时间是十年前, 其次是现在. 只要想学习, 不存在早晚.
来源: http://www.jianshu.com/p/4b351203bdc7