字体颜色的使用-CSS入门基础（006）

今天我们接着说字体样式的内容。

color字体颜色：

语法：

color:颜色值；

颜色值可以是一个关键字，也可以是一个十六进制的RGB值。

关键字的颜色值，其实就是比较常用的颜色的一种枚举值，比如

black，黑色

white，白色

green，绿色

blue，蓝色

red，红色

gray，灰色

等等；

示例代码：

<html>  <head>    <title>字体颜色关键字</title>    <style type="text/css">      div      {        width:100px;        height:40px;        margin-top:10px;      }      #area1 { background-color:black;}      #area2 { background-color:red;}      #area3 { background-color:blue;}      #area4 { background-color:gray;}    </style>  </head>  <body>    <div id="area1"></div>    <div id="area2"></div>    <div id="area3"></div>    <div id="area4"></div>  </body></html>

以上代码有个小技巧，就是四个分隔区域都是需要设置宽度高度的，所以把共同的代码提取出来，放在了元素选择器里，简化代码，另外，id选择器由于只有一行代码，我就不规范的缩写成了一行，这样便于观察代码的区别，但是不建议属性多时这么做。

关键字颜色由于和英文颜色的单词基本一致，所以对于熟悉英文的同学，使用关键字颜色会方便些，但是它没有十六进制颜色灵活，色彩选择多。

十六进制RGB颜色：

所谓十六进制RGB值指的是类似“#FFFFFF”这种形式的颜色值，对于初学者来说，需要掌握十六进制的颜色值，是有困难的。大家如果有使用Photoshop的经验，就会熟悉调色板功能，对十六进制的颜色值就不陌生。

示例代码：

<html>  <head>    <title>字体颜色十六进制</title>    <style type="text/css">      div      {        width:300px;        height:100px;        margin-top:20px;      }      #area1 {background-color:#ff0000;}      #area2 {background-color:#00ff00;}      #area3 {background-color:#0000ff;}    </style>  </head>  <body>    <div id="area1"></div>    <div id="area2"></div>    <div id="area3"></div>  </body></html>

以上代码，大家会发现，颜色值使用的是十六进制的，并且为了表示颜色值是十六进制的，需要在数值前加前缀“#”，表示其后跟着的数值是十六进制的颜色值。

在这里我插一句，给大家分享一些我自己学习十六进制颜色的经验，供大家参考学习。

要说到十六进制颜色值，我们得先说说什么是RGB颜色值？

在计算机中，我们需要表示一种颜色，需要用到三原色概念，也就是任何一种颜色都是可以由三原色构成的，三原色就是我们说的红、绿、蓝，英文名词就是red、green、blue，所以缩写起来就是RGB；

这里需要注意，我们说三原色时，或者说RGB色时，一定是按照红、绿、蓝的顺序来描述色彩的，不可以变动顺序，可以说这是一种规范吧，你记住就好了；

为了方便表示RGB色彩，我们通常这么写

rgb（数值，数值，数值）

数值的取值范围是0~255，也就是2的16次方，为了便于描述，我们暂时定义一下，0代表没有，255代表有，那么在1~254之间的数代表有的程度是多少。比如

红色，表述为rgb（255,0,0）绿色，表述为rgb（0,255,0）蓝色，表述为rgb（0,0,255）

也就是说，当R值取为最大值255，其他数值取0，说明只有红色有，绿色、蓝色没有，最终rgb颜色就是红色；

当G值取为最大值255，其他数值取0，说明只有绿色有，红色、蓝色没有，最终rgb颜色就是绿色；

当B值取为最大值255，其他数值取0，说明只有蓝色有，红色、绿色没有，最终rgb颜色就是蓝色；

（以上表述有点啰嗦，大家别见怪，我只是为了说的清楚明白些。）

但是使用rgb表述颜色时，多有不方便，因为数值有可能是两位数，有可能是三位数，数值与数值间还需要逗号分隔，如果不用逗号分隔，就无法准确的取得数值，比如rgb（1111111），没有逗号分隔时，你完全不知道这个表示什么颜色，它可以是rgb（11,111,11），也可以是rgb（111,11,11），或者rgb（11,11,111），以上这段是我自己的理解，也可能不是非常准确。

而使用十六进制数值表示颜色就方便些，也准确些，

红色，表述为#FF0000绿色，表述为#00FF00蓝色，表述为#0000FF

在十六进制中，10用字母A表示，依次类推，11是B，12是C，13是D，14是E，15是F，所以如果需要表述颜色时，都是需要两位数，就可以表示一个单色了。

黑色，可以表示为#000000，白色，可以表示为#FFFFFF，也就是当三原色都没有时，我们看到的就是黑色，当三原色都有时，我们看到的就是白色，这个十六进制颜色值，你可以自己修改修改，从而可以感知一下其中的奥秘，多使用，就能很方便的调整色彩了。

字体颜色的使用-CSS入门基础（006）相关推荐

CSS入门基础-目录
CSS简介-CSS入门基础(001) CSS选择器-CSS入门基础(002) id选择器的使用-CSS入门基础(003) 子选择器的使用-CSS入门基础(004) 字体样式-CSS入门基础(005) ...
CSS 文本字体颜色设置方法(CSS color)
转自:微点阅读 https://www.weidianyuedu.com 这篇文章主要介绍了CSS 文本字体颜色设置方法(CSS color),需要的朋友可以参考下一.认识CSS 颜色(CSS c ...
学起来 —— CSS 入门基础
Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一为"两个分离",二为语言遵循语义化, ...
html字体颜色代码属性,CSS文本字体颜色(CSS color)
一.认识CSS 颜色(CSS color) - TOP 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网页背景颜色.边框颜色 2.颜色规 ...
jsp页面字体颜色白色_CSS 文本字体颜色设置方法(CSS color)
一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网页背景颜色.边框颜色 2.颜色规范与颜色规定:网页使 ...
HTML添加style修改颜色,css字体颜色设置教程(CSS color)
CSS颜色样式篇目录认识CSS 颜色(color) 网页颜色基础两种方法设置对象颜色样式文字颜色控制color 网页背景颜色color 边框颜色color 网页color RGB设置网页colo ...
CSS入门基础详解——笔记、案例
CSS入门学习一.CSS简介 1.什么是css css:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记 ...
CSS入门基础（样式，css文件，选择器）
CSS入门学习 CSS的简介基本语法结构基本用法给元素添加样式行内样式内部样式外部样式定义样式css文件在html中引入css文档选择器标签选择类选择 id选择 CSS的简介层 ...
php链接字体颜色,通过html/css设置超链接字体颜色
超链接字体颜色设置是通过css来设置,a链接的颜色设置常用的有以下两种,1.超链接a的初始状态颜色,2.超链接字体的鼠标滑过颜色,还有两种病不常用:3.超链接字体的已访问颜色超链接字体颜色设置是通过 ...

字体颜色的使用-CSS入门基础（006）

字体颜色的使用-CSS入门基础（006）相关推荐

最新文章

热门文章