CSS-颜色属性+颜色函数+自定义变量

最近更新时间：2017年5月8日16:08:13

《我的博客地图》

离开校园踏入职场，不是到达人生巅峰，而是人生才刚刚开始。校园里学的知识远不足工作需求，而且校园里的学习深度也比较浅显。因此，对于刚毕业前三年的工程师来说，马不停蹄不分昼夜的学习和汲取工作中需要用到的知识，是一个硬功夫，需要练就。兴趣是第一老师，有了兴趣工作才有激情和动力，因此，选择自己喜欢的一份工作比任何选择条件都要优先，永远将喜欢放在首位。

1、CSS颜色属性的设置和表示方法

 <style type="text/css">#div{color: red;/*关键字表示法*/color: #f00;/*短-16进制表示法*/color: #ff0000;/*长-16进制表示法*/color: rgb(255, 0, 0);/*rgb基本表示法*/color: rgb(100%, 0, 0);/*rgb百分比表示法*/color: hsl(240, 0%, 50%);/*色彩三属性表示法表示法，下文具体解释hsl含义*/color: color(#29B4F0 a(50%) contrast(%10) h(10));/*颜色函数表示法，请看下文具体解释*/}</style>

2、CSS自定义变量

声明语法：--*，如--color-basis: red;

调用语法：var(--color-basis)，如color: var(--color-basis);

位置：可以放在根选择器中，也可以放在常规选择器中

引申：CSS3根选择器，:root选择器匹配文档根元素，在HTML中，根元素始终是html元素，语法如下：

:root{

--color-basis: red;//定义一个CSS变量

background: #f00;//设置html元素背景色

}

3、CSS颜色函数

CSS Color Module Level 4的颜色配置函数有：color()、gray()、hsl()、hwb()等，这些函数浏览器暂时不支持，实际开发需要引入第三方插件（postcss/cssnext）来做预处理。

color-mod()函数详解：

color-mod() = color(#29B4F0 a() s() h() l() tint() shade() w() b() contrast());

调用语法：

#div{background-color:color(#29B4F0 a() s() h() l() tint() shade() w() b() contrast() blend());}

第一个参数基准色值，必须设定；

第二个参数及后面的参数为可选参数，这些参数的详细含义如下：

a-alpha，透明度，值为百分比；

b-blackness，黑度，值为百分比；

blend，混合度，值为百分比;

contrast，对比度，值为百分比；

h-hue，色相-色彩的第一属性，色彩的相貌区别；0-360deg，0和360是红色，接近120的是绿色，240是蓝色；

l-lightness，明度，亮度-色彩的第二属性，表明色彩的明暗性质； 0%是最暗，50%均值，100%最亮。

s-saturation，纯度，饱和度-色彩的第三属性，表明色彩的鲜灰程度；0%是灰度，100%饱和度最高 ;

shade，暗度，值为百分比；

tint，色调，值为百分比；

w-whiteness，白度，值为百分比；

4、综合实例

 <style type="text/css">:root{--color-basis: red;--mytheme-p-color: var(--color-basis);}p{color:color(var(--mytheme-p-color) a(50%) hue(+30deg));//p元素dom数组集合中，每个元素的hue递增30deg，等同于hue += 30}</style>

5、扩展

CSS函数：

attr();返回选择元素的属性值

calc();计算CSS属性值

linear-gradient();创建一个线性渐变的图像
radial-gradient();用径向渐变创建图像
repeating-linear-gradient();用重复的线性渐变创建图像
repeating-radial-gradient();类似 radial-gradient()，用重复的径向渐变创建图像。

6、当前文字颜色属性

如：border: 1px solid currentColor;//currentColor是CSS3的一个变量

CSS-颜色属性+颜色函数+自定义变量相关推荐

CSS中调用JS函数和变量
在CSS来调用JS程序. 这个技术是网络安全里的,叫做CSS跨站. 我们知道CSS里是可以控制某些HTML元素的属性的,譬如background-image等等,而在URL里添加Javascript: ...
css input光标粗细,如何用CSS原生属性caret-color改变input输入框光标颜色
表单对大家来说并不陌生,当然,我也不是来和大家聊怎么做表单或者处理表单的样式网格,因为这些对于大家来说都是小儿科的东西.而是来聊聊怎么改变表单控件中光标的颜色.日常开发中我们可能会有改变input光标 ...
CSS中的颜色值与颜色属性
文章目录颜色模型 CSS颜色值的类型颜色名称 rgb[a] rgba的新写法 CSS元素的透明度 hex十六进制值 hsl[a] 颜色值关键字 transparent currentColor C ...
R语言编写自定义函数自定义ggplot图像中的图例（legend）的位置、图例标题、键值、文本字体大小（title、text、key）、颜色标识的大小、点形状pch的大小
R语言编写自定义函数自定义ggplot图像中的图例(legend)的位置.图例标题.键值.文本字体大小(title.text.key).颜色标识的大小.点形状pch的大小目录
R语言使用dplyr聚合统计分组数据、ggplot2可视化分组线图、使用geom_line函数自定义设置线条类型、粗细、颜色(Change line types + colors by groups)
R语言ggplot2可视化分组线图.使用geom_line函数自定义设置线条类型.宽度(粗细.).颜色(Change line types by groups.Change line types + ...
css常用属性总结：颜色和单位
在css代码编写中,估计颜色和单位是必不可少的,然而在css中关于颜色和单位值的写法有很多种写法,所以有必要把它弄清楚. 颜色当初我在初学前端的时候,就会冒出一个疑问"我该如何设置网页颜色 ...
前端如何设置背景颜色的透明度 css中的 rgba() 函数详解：background-color: rgba(255,192,203,0.3)
目录前言 rgba() 函数详解再分享一个小技巧哈哈哈前言今天在开发移动端的时候感觉没背景颜色有点丑,再加上自己做的是蛋糕app,觉得暖色应该会很好看,于是就用了这行代码 backgroun ...
W3school：CSS基础：CSS注释、颜色（颜色、RGB、HEX、HSL）、背景（背景、背景图像、背景重复、背景附着、简写背景属性）
W3school:CSS基础:CSS注释.颜色(颜色.RGB.HEX.HSL).背景(背景.背景图像.背景重复.背景附着.简写背景属性) 一.CSS注释 1.注释用于解释代码,以后在您编辑源代码时可能 ...
CSS颜色属性、文本文字属性、属性继承
html零基础必看--html入门,编程就是如此简单第六章:颜色属性.文本文字属性一.颜色样式(颜色取值法) 1.颜色属性值取值方法二.字体样式 1. color 文字颜色 2.font-siz ...

CSS-颜色属性+颜色函数+自定义变量

CSS-颜色属性+颜色函数+自定义变量相关推荐

最新文章

热门文章