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 ...
随机推荐
- Java 画一个5X5的方形矩阵
效果图如下: 思路:创建一个窗口,使其居中于屏幕中央,使用drawRect(x, y, width, height)画正方形. import java.awt.Graphics; import jav ...
- C++ 关于ShowWindow()的疑问
IDE: Code::Blocks 16.01 操作系统:Windows 7 x64 最初的代码,目的是为了隐藏窗口出现在任务栏上的图标. #include <windows.h> usi ...
- vue指令问题
挂载点:最外层标签就是vue实例的挂载点,即id或者类对应的 dom节点 模板:指挂载点内部的内容,在实例里使用template标签来构 建 h1标签放在body里面不使用 “template”是一样 ...
- AI-视图组件-五个接口的最终简化版
五个接口最终版 #url.py # 序列化最贱版本 url(r'^customer/$', views.CustomerView.as_view({"get":"list ...
- 论文阅读笔记三十四:DSSD: Deconvolutiona lSingle Shot Detector(CVPR2017)
论文源址:https://arxiv.org/abs/1701.06659 开源代码:https://github.com/MTCloudVision/mxnet-dssd 摘要 DSSD主要是向目标 ...
- Ajax增删改查-----------查
查询所有 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 笔记本如何设置插入USB鼠标自动禁用触摸板
Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Synaptics\SynTPEnh] [HKEY_LOCAL_MAC ...
- 提高VS项目的压缩文件大小
对于.NET项目,如果将编译方式由Debug改为Release,使用压缩软件压缩项目文件时可以大大减少压缩文件的大小,具体原因待查.
- [转] JavaScript 之 ArrayBuffer
JS里的ArrayBuffer 还记得某个晚上在做 canvas 像素级操作,发现存储像素的数据格式并不是Array类型,而是ArrayBuffer,心想这是什么鬼?后来查了一些资料,发现自己这半年来 ...
- bzoj 2832
题解: 首先有一个比较显然的事情是如果我们确定了买的次数这道题就可以简单的贪心了 但是答案和买的次数是什么关系呢.. 好像是可以三分的 所以应该是单峰的 这里用了模拟退火,而且是没有处理失败情况的模拟 ...