最近更新时间: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的一个变量