How to show color in CSS
转至: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的更多相关文章
- [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 ...
- CSS : color and unit
Color: CSS中定义颜色使用十六进制(hex)表示法为红,绿,蓝的颜色值结合.可以是最低值是0(十六进制00)到最高值是 255(十六进制FF).3个双位数字的十六进制值写法,以#符号开始部分颜 ...
- CSS COLOR
CSS COLOR Color Review We've completed our extensive tour of the colors in CSS! Let's review the key ...
- CSS 文本字体颜色设置方法(CSS color)
CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...
- HTML&CSS日常知识点总结
HTML 标签 meta 标签永远位于文档的头部,即head元素内部 可提供有关页面的元信息,如针对搜索引擎和更新频度的描述和关键词 charset 这个属性规定在外部脚本文件中使用的字符编码 如果外 ...
- jQuery代码节选(css)
CSS 1.css<p class="p1">1</p> $("p").css("color");获取css属性值$ ...
- 常用[js,css,jquery,html]
目录: 一.javascript事件和属性 二.jquery事件和方法 三.js 四.css 五.html 六.js操作cookies 七.插件 javascript事件和属性 事件 onblur ...
- CSS 概念 & 作用
http://www.cnblogs.com/moveofgod/archive/2012/09/18/2691101.html 式样定义 如何显示 HTML内容 通常存储在式样表中 作用 : 解 ...
- css 基础---选择器
1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...
随机推荐
- php 常用字符函数学习
1.addcslashes 要向字符串中的特定字符添加反斜杠 <?php header('Content-type:text/html;charset=utf8'); $str='are you ...
- mysql登录报错:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
在MySQL登录时出现Access denied for user 'root'@'localhost' (using password: YES) 拒绝访问 对于出现拒绝访问root用户的解决方案错 ...
- Centos系统压力测试 ab 命令安装与使用
Apache安装包中自带的压力测试工具 Apache Benchmark(简称ab) 简单易用,这里就采用 ab作为压力测试工具了. 1.独立安装 ab运行需要依赖apr-util包,安装命令为: y ...
- 51 nod 1181 质数中的质数(质数筛法)
1181 质数中的质数(质数筛法) 如果一个质数,在质数列表中的编号也是质数,那么就称之为质数中的质数.例如:3 5分别是排第2和第3的质数,所以他们是质数中的质数.现在给出一个数N,求>=N的 ...
- Html中,id、name、class、type的区别
<input type="text" name="name" id="name" class="txt"> ...
- axios简单使用
介绍 我在使用vue的时候使用到了axios,vue 1.0的版本作者推荐使用vue-resource,到了vue 2.0作者建议使用axios,此篇文章只是我在使用axios时候做的笔记,我遇到的一 ...
- jenkins X实践系列(3) —— jenkins X 安装拾遗
jx是云原生CICD,devops的一个最佳实践之一,目前在快速的发展成熟中.最近调研了JX,这里为第3篇,介绍下如何安装jenkins x. 前置条件 安装K8S 安装ceph集群(jx需要stor ...
- 2016-06-18 exshop第四天
昨天本来想完成用asset-pipeline替换掉resource插件的工作,但由于进行了对spring security插件的文档解读,同时面试了4个人,每个人耗费了30分钟,并且公司下午4:30组 ...
- mysql-索引-日志
索引:基于元数据之上的在某个字段或多个字段取出来,索引是加速读操作的,但对写操作时有副作用的 BTree 索引:抽取出来重新排序,是左前缀索引每一个叶子结点到根结点的距离相同: 哈希索引:基于键查找值 ...
- liunx命令简介
图形界面和命令行要达到的目的是一样的,都是让用户控制计算机.然而,真正能够控制计算机硬件(CPU.内存.显示器等)的只有操作系统内核(Kernel),图形界面和命令行只是架设在用户和内核之间的一座桥梁 ...