网页的里的颜色大致分为两种:1、前景色。color,在html中也就是元素的文本,border-color也属于前景色;2、背景色。
一、前景色
设置前景色最简单的办法就是利用color属性了,
This property describes the foreground color of an element's text content.这个属性值描述了一个元素文本的前景色;
1、value(属性值):color(合法的颜色值) | inherit;
2、initial(最初的默认值):depends on user agent 取决于用户代理就是浏览器;
3、inherited:yes 可继承 ,颜色可继承是有道理的,一般来说浏览器的默认颜色值是#000,如果你设置了body{color:#333;}你一定是希望在不特定设置的情况下,所有的body子元素颜色值都是#333;
4、percentage:N/A;color属性值不支持百分比
5、media:visual;w3上写的,不懂,大概是color是带来视觉效果吧或者color要应用到视觉媒体,感觉后者更靠谱,也是胡猜的 ==
6、computed value:as specified;计算值,按指定的来
w3到此结束;
border-color也属于前景色哦,而且在默认的情况下,border-color属性值取color的属性值;如过设置了border-color的值,则绝对能覆盖;知道这个,有时候能少些写代码==
能接受的合法颜色值:
1、inherit,继承父级;
2、color-name,颜色关键字(css1有16个,css版本2、3、4也都增加了一部分;如果当前浏览器不支持某个颜色关键,字,浏览器会使用默认的颜色值,<font color='rebeccapurple'>我是b元素</font>但是如果是html这种,则无法预测。
3、hex_number,十六进制的颜色,比如红色:#ff0000;
4、rgb_number,颜色值为rgb代码的颜色比如rgb(255,0 0),还有css3的rgba(255,0m0,0.5),ie9+支持
5、hsl_number,颜色值为hsl代码的颜色,Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360;S:Saturation(饱和度)。取值为:0.0% - 100.0%;L:Lightness(亮度)。取为:0.0% - 100.0%;css3属性,还有hsla();
二、背景色
终于吭哧到背景色了,背景色比前景复杂的太多,背景既可以是纯色,也可以是图片,图片是复杂的源泉;
概述下:
背景能触及到的区域包括:content,padding、border(如果是不是实线的边框,就发现了),margin则永远都是transparent。background属性是不能被继承的,能应用于所有的元素,剩下的不会翻译了
关于background的属性:background-color、background-image、background-repeat、background-attachment、background-position、还有css3的background-size以及他们的综合属性background;
1、background-color-略~
2、background-image片--略~~(tips:w3建议我们:当我们为一个元素设置背景图片的时候,最好再设置一个合理的背景色,因为当背景图片不能用的时候,还有背景色来抵挡,不至于内容区不方便阅读)背景图在背景色之上,所以背景色在背景图片透明的部分是可见的
3、background-repeat--略~
4、background-position:百分比是同时应用于图片和元素的,如果只设置一个值的话,另一个默认为50%;关键字是等同于百分数计算的,所以一样;
5、background-attachment-略~
6、background-origin:这是css3的属性,在2的时候我们的背景是在content+padding+border,这个属性则能控制背景相对于谁来定位,padding-box、border-box、content-box;padding-box是默认值。
7、background-size:在css3之前,背景图片的大小只能是它实际的大小,现在我们可以控制背景图片的尺寸,这样也方便我们在不同的环境中重复使用某个图片。
合法值:[ <length> | <percentage>
‘contain’
Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
缩放这个图片,在保存它原有比例的情况下,放大至最大尺寸以使其高度和宽度完全适应背景区域;这里的if any的意思应该是就算是如果不能保持它的原有宽高比例,也会尽力不让它变形;这里的and我是无法里理解的,实验显示应该是or ==、
‘cover’
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
在保证背景图片能完全覆盖背景区域情况下缩放至最小尺寸 ,并且保持它的原有宽高比(在不得不改变它的宽高比的情况下,也会尽力不让它变形);感觉自己翻译的还不错 =3=
















