背景,颜色
1.在色相环上,相邻的颜色为类似色,相对的颜色为补色。
在配色时,使用相似色会使整体比较协调,使用补色可以起到突出重点的作用。
还有,前景色和背景色的对比关系,如果非常相近会阅读困难,对比太强烈又容易视觉疲劳。
高纯度,高亮度的颜色,如黄色,红色,蓝色,一般可以作为突出色使用,不适合大面积作为背景使用。
2.color:字体颜色,有4种表示方法:#RRGGBB,rgb(R,G,B),red,rgb(1%,1%,1%)。
使用缩写可以减少CSS文件的大小,更加容易阅读。16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#336699可以缩写为#369; #f2f2f2是不可以缩写的
2.表单内的替换元素,并不会继承form元素的color属性,要改变其内文字的颜色,需要单独定义 input {color:#09f}
3.背景
background-color:颜色值或transparent,默认值是transparent。
backgound-image:url("http://.../a.jpg") ,为了节省字节不要给背景图片路径加引号,因为引号不是必须的。如果加了引号反而会引起一些浏览器的错误。
background-repeat:no-repeat,repeat,repeat-x,repeat-y。默认是x,y方向都重复。
background-attachment:fixed,scroll ,默认为scroll,指定背景图像是固定在屏幕上、还是随着它所在的元素而滚动
background-position:要指定两个值,分别表示水平量,垂直量。可以是 left,center,right,top,bottom,20px。默认是top left,是图片在其容器中的位置,也可以理解为图片在容器中的偏移。例如:-10px指图片向上移动10px。
百分比值的定位与长度值的含义不同,它是将背景图片上尺寸对应百分比值的点,与元素补白框的尺寸对应百分比值的点对齐。
可以用background:包括所有以上的属性值。通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
background中包含的属性值不必全写,因为有默认值。注意background与独立属性的同时存在时的书写顺序。
例:在一个声明中设置所有背景属性:
body
{
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}
background:#ccc right url("http://.../a.jpg") 0 0 no-repeat; //两个0分别表示左上,和padding的简写方式上右不一样。
216网页安全颜色:网页安全色是由0 51 102 153 204 255 ,16进制表示分别是 0x00 33 66 99 CC FF,组合而成的颜色,6x6x6=216种颜色,
如果html元素的{background-color:transparent;background-image:none;},则会使用body元素的相关属性来代替html元素的属性,不再对body的背景进行绘制。推荐指定body元素的背景,而不是html元素的背景。并且浏览器的默认背景色不一定是白色。
5.在使用固定宽高背景图时,为了解决普通背景图和焦点背景图可能会由于延迟时间不一致的问题,可以将这两张图做在一张图片上,然后通过设置背景图片的定位来指定显示图片的哪一部分。
6.滑动门背景