专业汉语词典知识平台,分享汉字词语知识、历史文学知识解答!

励北网
励北网

css字体颜色代码怎么写,css字体颜色怎么设置

来源:小易整编  作者:小易  发布时间:2022-12-28 02:05
摘要:css字体颜色代码怎么写,css字体颜色怎么设置。今天我们接着说字体样式的内容。color字体颜色:语法:color:颜色值;颜色值可以是一个关键字,也可以是一个十六进制的RGB值。关键字的颜色值,其实就是比较常用的颜色的一种枚举值,比如b...
css字体颜色代码怎么写,css字体颜色怎么设置。今天我们接着说字体样式的内容。
color字体颜色:
语法:

color:颜色值;

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

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

black,黑色

white,白色

green,绿色

blue,蓝色

red,红色

gray,灰色

等等;

css字体颜色代码怎么写,css字体颜色怎么设置

示例代码:

<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,也就是当三原色都没有时,我们看到的就是黑色,当三原色都有时,我们看到的就是白色,这个十六进制颜色值,你可以自己修改修改,从而可以感知一下其中的奥秘,多使用,就能很方便的调整色彩了。

本文地址:百科问答频道 https://www.neebe.cn/wenda/886418.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!


百科问答
小编:小易整编
相关文章相关阅读
  • css布局技巧,css常见布局汇总

    css布局技巧,css常见布局汇总

    css布局技巧,css常见布局汇总要点速看网页开发基本思路:确定版心--》分析行模块--》分析列模块;如果一行当中有多个模块,一定要放在同一个父模块中;列模块首先可以先给宽高背景颜色,实例化盒子;常见布局:两栏/三栏/等高/粘带推荐flex...

  • css选择器有哪些,css选择器怎么用

    css选择器有哪些,css选择器怎么用

    css选择器有哪些,css选择器怎么用 CSS选择器又被称为CSS样式属性、CSS属性选择器,CSS中的“选择器”指明了“{}”中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素;常用选择器可分为标签名选择器、类选择器、id选择器...

  • CSS图片透明度怎么设置,CSS 透明度设置方法

    CSS图片透明度怎么设置,CSS 透明度设置方法

    CSS图片透明度怎么设置,CSS透明度设置方法怎样在CSS样式中设置背景的透明度怎样在CSS样式中设置背景的透明度,下面给出一个具体的实例。把类为box的层设为透明。 透明度设置 html...

  • css教程,0基础入门css教程

    css教程,0基础入门css教程

    通过使用CSS我们可以大大提升网页开发的工作效率!在我们的CSS教程中,您会学到如何使用CSS同时控制多重网页的样式和布局。1.CSS简介CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和显示的方式。CSS样...

  • csshover怎么用,csshover用法教程

    csshover怎么用,csshover用法教程

    csshover怎么用,csshover用法教程1.实现效果在这里插入图片描述2.实现步骤定义一个宽高为300px的父容器.box{position:relative;width:300px;height:300px;}父容器中添加...

  • css样式表有哪几种,css样式表介绍

    css样式表有哪几种,css样式表介绍

    css样式表有哪几种,css样式表介绍层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰...

  • css3渐变属性,css3渐变教程

    css3渐变属性,css3渐变教程

    css3渐变属性,css3渐变教程好程序员web前端教程之CSS3渐变,CSS3渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果,现在通过使用CSS3的渐变(gradients)即...

  • 如何设置滚动条样式,CSS设置自定义滚动条样式

    如何设置滚动条样式,CSS设置自定义滚动条样式

    如何设置滚动条样式,CSS设置自定义滚动条样式你见过自定义滚动条样式的网站吗?是不是很想知道它们是怎么实现的?读完这篇文章,你会了解到使用CSS自定义滚动条样式的所有知识。在本教程中,你将:-学习能用来自定义滚动条样式的原生CSS属性-使用...

  • 周排行
  • 月排行
  • 年排行

精彩推荐