《CSS权威指南》读书笔记5

第九章 颜色与背景

---

1.颜色

CSS中，可以为任何元素设置前景和背景色。一般来说，前景是元素的文本，不过前景还包括元素周围的边框。

---

2.前景色

利用属性color

1.替换属性

---

2.影响边框

默认前景色会应用到边框，例如：

p.aside{color:gary;border-style:solid;}

若想覆盖这种行为，最基本的方法是使用属性border-color。
有时，利用边框可以影响图像的前景色，即改变图像周围边框的颜色。

---

3.影响表单元素

可以设置input元素周围边框的颜色，例如;

select{color:rgb(33%,33%,33%);}
input{color:gray;}

从文本框到单选钮再到复选框都会使用灰色。

---

4.继承颜色

color可以继承，不过锚是个例外，它有自己的颜色样式。

---

3.背景

元素背景区包括前景之下直到边框外边界的所有空间，因此，内容框和内边距都是元素背景的一部分，且边框画在背景上。

---

1.背景色

background-color：接受透明色且其为默认值，如果希望背景色从元素中的文本向外稍有延伸，可以设置内边距padding

举例：假设一个用户将其浏览器的所有连接都设置为白色背景，在你设计页面时，将锚设置为有一个白色前景且不希望其有背景，那么

a{color:white;background-color:transparent;}

如果没有背景色，白色前景和用户指定的白色背景就会混在一起，这样链接将变得不可读。

---

2.背景图像

1)背景重复

---

2)背景定位

①关于关键字：

p{background-image:url(yinyang.gif);background-repeat:n-repeat;background-position:top  right;}

右上角放置图像。
不能超过两个关键字—-一个对应水平方向，一个对应垂直方向。如果只出现了一个关键字，则默认另一个为center

②关于百分数值：

p{background-image:url(yinyang.gif);background-repeat:n-repeat;background-position:50%  50%;}

百分数值设置位置，水平值总是先出现。如果只指定了一个百分数值，那么另一个假设为center。

③关于长度值：
长度值解释为从元素内边距区左上角的偏移，偏移点为原图像的左上角。
如果设置值为20px 30px，原图像的左上角将在元素内边距区左上角向右20像素，从顶端向下30像素的位置上。

---

3.有方向的重复（深入）

background-position 确定平铺从哪里开始。例如：

---

4.关联

fixed：首先，原图像不会随文档滚动，其次，原图像的放置由可视区的大小确定，而不是由包含该图像的元素的大小决定。

scroll：背景随其余文档滚动，而且当窗口大小调整时，不一定改变原图像的位置。

---

5.汇总

如果background-position有两个值，它们必须一起出现，而且如果这两个值是长度或者百分数值，必须按水平值在前垂直值在后的顺序。
background没有必不可少的元素——至少出现一个即可。并且其为一个简写属性，其默认值会覆盖先前为给定元素指定的值。