来源:自学PHP网 时间:2018-02-08 10:48 作者: 阅读:次
[导读] CSS数据类型color用于表示标准色彩空间的颜色值。...
CSS数据类型<color>用于表示标准色彩空间的颜色值。 一个<color>的值可以是一个关键字,也可以是某种数值规范(十六进制数值)。一种颜色可以用以下任意的方式来描述: 颜色关键字颜色关键字是不区分大小写的标识符,它表示一个具体的颜色,例如 red, white, brown 。 在使用关键字时有几个需要留意的注意事项:
在CSS1规范中有16个颜色关键字。在CSS2规范中,增加了orange关键字,有17个标准的颜色关键字,它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, 和 yellow。下面是这17种颜色在页面中的样本: black(黑) #000000
silver(银) #c0c0c0
gray(灰) #808080
white(白) #ffffff
maroon(褐) #800000
red(红) #ff0000
purple(紫) #800080
fuchsia(紫红) #ff00ff
green(绿) #008000
lime(绿黄) #00ff00
olive(橄榄绿) #808000
yellow(黄) #ffff00
navy(藏青) #000080
blue(蓝) #0000ff
teal(青) #008080
aqua(水绿) #00ffff
orange(橙) #ffa500
在CSS3规范中,支持的颜色关键字达到147个,这147种颜色关键字包括17种标准颜色和130种扩展颜色。下表是这些颜色的样本:
transparent关键字
.el{ border-color: transparent; } currentColor关键字
例如,你在一个父元素上设置了一个背景色为蓝色,你还想为该元素的子元素设置相同的背景颜色。此时就可以将子元素的 .parent { color: blue; } .child { background-color: currentColor; } rgb()颜色颜色可以使用红绿蓝(red-green-blue (RGB))模式的两种方式来定义颜色: 第一种使用16进制表示方法:
三位数的 RGB 符号(#RGB)和六位数的形式(#RRGGBB)是相等的。例如, #f03 和 #ff0033 代表同样的颜色。 第二种是通过函数 #f03 #F03 #ff0033 #FF0033 rgb(255,0,51) rgb(255, 0, 51) rgb(255, 0, 51.2) /* 错误的写法,不能是浮点数 */ rgb(100%,0%,20%) rgb(100%, 0%, 20%) rgb(100%, 0, 20%) /* 错误的写法,不能混合使用整数和百分比值 */ 下面的例子通过 rgb(30,130,76)
rgb(4,147,114)
rgb(38,194,129)
rgb(102,204,153)
rgb(134,226,213)
rgba()颜色颜色也可以使用 例如下面的代码通过 rgba(255,0,0,0.1) /* 10%透明度的红色 */ rgba(255,0,0,0.4) /* 40%透明度的红色 */ rgba(255,0,0,0.7) /* 70%透明度的红色 */ rgba(255,0,0, 1) /* 红色 */ 下面的例子是通过 rgba(255, 102, 153, .1)
rgba(255, 102, 153, .3)
rgba(255, 102, 153, .5)
rgba(255, 102, 153, .7)
rgba(255, 102, 153, 1)
hsl()颜色可以使用hsl()函数来定义颜色,hsl是指色相、饱和度和明度模式(Hue-saturation-lightness)。 要理解HSL颜色,你首先需要从另一个角度来理解颜色。注意观察上面的色盘,你可以看到红、绿和蓝三种颜色。红色在最上面,被设置为0度,绿色是120度,蓝色是240度。它们将色盘分为三个部分。在它们的中间分别是黄色、青色和洋红(CMYK颜色系统)。它们的角度分别为60度、180度和300度。 从色盘的顶部开始顺时针方向旋转,是彩虹的七彩颜色。从60度开始,分别是:黄色、绿色、青色、蓝色、洋红和红色。 HSL颜色就是指上面颜色色盘中的多少度的颜色值。 例如,紫色在蓝色(240°)和洋红(300°)之间,所以它的HSL颜色是 关于色相、饱和度和明度总结如下:
例如下面的例子中为元素的背景设置不同的饱和度值,色相和亮度值相等的效果。 hsl(45,0%,50%)
hsl(45,25%,50%)
hsl(45,50%,50%)
hsl(45,75%,50%)
hsl(45,100%,50%)
下面的例子是为元素的背景设置不同的亮度,色相和饱和度相等的效果。 hsl(45,0%,50%)
hsl(45,25%,50%)
hsl(45,50%,50%)
hsl(45,75%,50%)
hsl(45,100%,50%)
hsla()颜色颜色可以使用 下面的代码是使用 hsla(240,100%,50%,0.05) /* 5%透明度的蓝色 */ hsla(240,100%,50%, 0.4) /* 40%透明度的蓝色 */ hsla(240,100%,50%, 0.7) /* 70%透明度的蓝色 */ hsla(240,100%,50%, 1) /* 蓝色 */ 下面的例子是通过 hsla(200, 100%, 50%, .1)
hsla(200, 100%, 50%, .3)
hsla(200, 100%, 50%, .5)
hsla(200, 100%, 50%, .7)
hsla(200, 100%, 50%, 1)
浏览器支持所有的现代浏览器都支持颜色属性。包括:Chrome, Firefox, Safari, Opera, IE 和 Android 和 iOS。 在IE浏览器中,只有IE9+浏览器才支持 IE 8.0及以上的IE浏览器支持“e”版本的灰色关键字:grey, darkgrey, darkslategrey, dimgrey, lightgrey, lightslategrey。 IE3-IE6的IE浏览器仅支持“a”版本的灰色关键字:gray, darkgray, darkslategray, dimgray, lightgray, lightslategray。 IE7和IE8只有 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com