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 ...
随机推荐
- jenkins上节点显示swap空间不足解决方案
查看内存占用情况:free -m 1.swap分区原理: swap分区在系统的物理内存不够用的时候,把物理内存中的一部分空间释放出来,以供当前运行的程序使用.那些被释放的空间可能来自一些很长时 ...
- 在th中显示图片
从DataTable中获取值: foreach (DataRow dr in ((DataTable)ViewBag.bookInfoList).Rows) { <tr> <th c ...
- C#获取一周的工作日显示(星期几)
代码如下: gridBandW1.Caption = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetDayName ...
- ExceptionLess的webAPI调用
引用 <package id="bootstrap" version="3.0.0" targetFramework="net461" ...
- Linux系统监控命令及定位Java线程
1.PID.TID的区分 uid是user id,即用户id,root用户的uid是0,0为最高权限,gid是group id,用户组id,使用 id 命令可以很简单的通过用户名查看UID.GID:~ ...
- codeforces 1037
题解: E-trips 哎哎哎好傻逼啊 没有想到算不能的一直在想怎么算能的 太傻逼了 其实很简单 我们只需要对好友<=k的首先dfs一下给他连接着的朋友-1 然后如果小于了就递归下去 这个正确性 ...
- PHP页面间传值的几种方法
方法一:require_once //Page a: <?php $a = "hello"; ?> //Page b: <?php require_once &q ...
- P1030 求先序排列 P1305 新二叉树
题目描述 给出一棵二叉树的中序与后序排列.求出它的先序排列.(约定树结点用不同的大写字母表示,长度\le 8≤8). 输入输出格式 输入格式: 22行,均为大写字母组成的字符串,表示一棵二叉树的中序与 ...
- P1118 [USACO06FEB]数字三角形`Backward Digit Su`… 回溯法
有这么一个游戏: 写出一个11至NN的排列a_iai,然后每次将相邻两个数相加,构成新的序列,再对新序列进行这样的操作,显然每次构成的序列都比上一次的序列长度少11,直到只剩下一个数字位置.下面是一 ...
- 解决UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position
最近用Python写了些爬虫,在爬取一个gb2312的页面时,抛出异常: UnicodeEncodeError: 'ascii' codec can't encode characters in po ...