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 ...
随机推荐
- 对象存储服务(Object Storage Service,简称 OSS)
阿里云对象存储服务(Object Storage Service,简称 OSS),是阿里云提供的海量.安全.低成本.高可靠的云存储服务.它具有与平台无关的RESTful API接口,能够提供99.99 ...
- labelme连续将文件夹中的json文件进行可视化的指令
for /r C:\Users\Fourmi\Desktop\ZP0 %i in (*.json) do labelme_json_to_dataset %i
- Asp.Net MVC Ajax轮训解决Session失效时间
这种方法不是太好,对服务器得压力大,由于系统是内部人员使用,业务有比较复杂,所以有些值得需要Session去保存,但是,Session有失效时间. 代码如下: $(function () { func ...
- 小甲鱼python基础教程飞机大战源码及素材
百度了半天小甲鱼python飞机大战的源码和素材,搜出一堆不知道是什么玩意儿的玩意儿. 最终还是自己对着视频一行行代码敲出来. 需要的同学点下面的链接自取. 下载
- [转]Linux下is not in the sudoers file解决方法
来源: http://jingyan.baidu.com/article/2a1383284bb3e8074a134f2d.html 当我们使用sudo命令切换用户的时候可能会遇到提示以下错误:xxx ...
- C# 之 反射性能优化2
问题回顾 在上篇博客中,我介绍了优化反射的第一个步骤:用委托调用代替直接反射调用. 然而,那只是反射优化过程的开始,因为新的问题出现了:如何保存大量的委托? 如果我们将委托保存在字典集合中,会发现这种 ...
- centos的基本操作
1.ssh连接阿里云一段时间不操作自动断开打开/etc/ssh/sshd_config添加或修改: ClientAliveInterval 120ClientAliveCountMax 0 2.挂载数 ...
- Android SDK离线安装更新方法
直接使用Android SDK Manager进行下载.更新速度很慢,有时候会出现错误.网上查找了不少网友的方法,做个总结. 1.启动Android SDK Manager,并等待reposity加载 ...
- Python_configparser模块
configparser : 用于处理ini结构相似的文件,格式类似于: [DEFAULT] # 相当于一个分组 # option # 注释,说明性文字 ,默认以# 或‘:’开头的行 option1 ...
- du -h排序
du -sh * du -s /tmp/*|sort -nr|head -3