转至:https://blog.csdn.net/CallMeQiuqiuqiu/article/details/54743459

http://www.w3school.com.cn/cssref/css_colors_legal.asp


在CSS中怎样修改文字颜色呢?

  1.通过英文单词来赋值
  2.通过rgb赋值
  3.通过rgba赋值
  4.通过十六进制赋值
  5.HSL 颜色
  6.HSLA 颜色

格式如下:

color:值;

几种常见的取值方式:

  1.通过英文单词来赋值

red(红色)等等,这些在W3Cschool可以找到,但是英文单词能够表达的颜色是有限制的,并不是所有的颜色都能够通过英文单词来表达。

  2.通过rgb赋值

rgb也就是三原色,r(red),g(green),b(blue)

格式:rgb(,,)其中每一个数字分别显示r,g,b的亮度,这其中每一个数字的取值都是0-255,0代表不发光,255代表发光,取值越大,该颜色越亮。

例如:rgb(255,0,0)代表红色。rgb(0,255,0)代表绿色,rgb(0,0,0)代表黑色,rgb(255,255,255)代表白色

其实在前端开发中并不常用黑色,反而偏偏常用灰色。因为黑色太刺眼了。

当红色和蓝色值是一样的时候就是灰色,三个值越小越偏黑色,三个值越大越偏白色。

  3.通过rgba赋值

其中a代表透明度,其取值为 0-1,1代表不透明,0代表透明。

  4.通过十六进制赋值

原理其实就是rgb

#FF0000,其中FF就是r也就是255,,00就是0

  5.HSL 颜色

HSL 颜色值得到以下浏览器的支持:IE9+、Firefox、Chrome、Safari 以及 Opera 10+。

HSL 指的是 hue(色调)、saturation(饱和度)、lightness(亮度) - 表示颜色柱面坐标表示法。

HSL 颜色值是这样规定的:hsl(hue, saturation, lightness)。

Hue 是色盘上的度数(从 0 到 360) - 0 (或 360) 是红色,120 是绿色,240 是蓝色。Saturation 是百分比值;0% 意味着灰色,而 100% 是全彩。Lightness 同样是百分比值;0% 是黑色,100% 是白色。

  6.HSLA 颜色

HSLA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

HSLA 颜色值是 HSL 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。

HSLA 颜色值是这样规定的:hsla(hue, saturation, lightness, alpha),其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

How to show color in CSS的更多相关文章

  1. [HTML] Change an HTML5 input's placeholder color with CSS

    We will look at what CSS selectors to use to change an HTML5 inputs placeholder color. This can diff ...

  2. CSS : color and unit

    Color: CSS中定义颜色使用十六进制(hex)表示法为红,绿,蓝的颜色值结合.可以是最低值是0(十六进制00)到最高值是 255(十六进制FF).3个双位数字的十六进制值写法,以#符号开始部分颜 ...

  3. CSS COLOR

    CSS COLOR Color Review We've completed our extensive tour of the colors in CSS! Let's review the key ...

  4. CSS 文本字体颜色设置方法(CSS color)

    CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...

  5. HTML&CSS日常知识点总结

    HTML 标签 meta 标签永远位于文档的头部,即head元素内部 可提供有关页面的元信息,如针对搜索引擎和更新频度的描述和关键词 charset 这个属性规定在外部脚本文件中使用的字符编码 如果外 ...

  6. jQuery代码节选(css)

    CSS 1.css<p class="p1">1</p> $("p").css("color");获取css属性值$ ...

  7. 常用[js,css,jquery,html]

    目录: 一.javascript事件和属性 二.jquery事件和方法 三.js 四.css 五.html 六.js操作cookies 七.插件 javascript事件和属性 事件 onblur   ...

  8. CSS 概念 & 作用

    http://www.cnblogs.com/moveofgod/archive/2012/09/18/2691101.html 式样定义   如何显示 HTML内容 通常存储在式样表中 作用 : 解 ...

  9. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

随机推荐

  1. php 常用字符函数学习

    1.addcslashes 要向字符串中的特定字符添加反斜杠 <?php header('Content-type:text/html;charset=utf8'); $str='are you ...

  2. mysql登录报错:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)

    在MySQL登录时出现Access denied for user 'root'@'localhost' (using password: YES) 拒绝访问 对于出现拒绝访问root用户的解决方案错 ...

  3. Centos系统压力测试 ab 命令安装与使用

    Apache安装包中自带的压力测试工具 Apache Benchmark(简称ab) 简单易用,这里就采用 ab作为压力测试工具了. 1.独立安装 ab运行需要依赖apr-util包,安装命令为: y ...

  4. 51 nod 1181 质数中的质数(质数筛法)

    1181 质数中的质数(质数筛法) 如果一个质数,在质数列表中的编号也是质数,那么就称之为质数中的质数.例如:3 5分别是排第2和第3的质数,所以他们是质数中的质数.现在给出一个数N,求>=N的 ...

  5. Html中,id、name、class、type的区别

    <input type="text" name="name" id="name" class="txt"> ...

  6. axios简单使用

    介绍 我在使用vue的时候使用到了axios,vue 1.0的版本作者推荐使用vue-resource,到了vue 2.0作者建议使用axios,此篇文章只是我在使用axios时候做的笔记,我遇到的一 ...

  7. jenkins X实践系列(3) —— jenkins X 安装拾遗

    jx是云原生CICD,devops的一个最佳实践之一,目前在快速的发展成熟中.最近调研了JX,这里为第3篇,介绍下如何安装jenkins x. 前置条件 安装K8S 安装ceph集群(jx需要stor ...

  8. 2016-06-18 exshop第四天

    昨天本来想完成用asset-pipeline替换掉resource插件的工作,但由于进行了对spring security插件的文档解读,同时面试了4个人,每个人耗费了30分钟,并且公司下午4:30组 ...

  9. mysql-索引-日志

    索引:基于元数据之上的在某个字段或多个字段取出来,索引是加速读操作的,但对写操作时有副作用的 BTree 索引:抽取出来重新排序,是左前缀索引每一个叶子结点到根结点的距离相同: 哈希索引:基于键查找值 ...

  10. liunx命令简介

    图形界面和命令行要达到的目的是一样的,都是让用户控制计算机.然而,真正能够控制计算机硬件(CPU.内存.显示器等)的只有操作系统内核(Kernel),图形界面和命令行只是架设在用户和内核之间的一座桥梁 ...