CSS 笔记（3）

1：CSS背景

CSS允许允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS这方面的能力远远在HTML之上。

1：背景色

可以使用background-color属性为元素设置背景色，这个属性接受任何合法的颜色值。

例：

p {background-color: gray;}

可以为所有元素设置背景色，这包括body一直到em和a等行内元素。

background-color不能继承，其默认值是transparent，有透明的意思。如果一个元素没有指定背景色，那么背景就是透明的，这样其先祖的背景颜色才能可见。

2：背景图片

要把图像放入背景，需要使用background-image属性。background-image属性的默认值是none，表示背景上没有放置任何图像。

如果需要设置一个背景图像，必须为这个属性值设置一个URL值：

body{background-image: url(xx/xx.gif);}

3：背景重复

如果需要在页面上对背景图像进行平铺，可以使用background-repeat属性。属性值repeat导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许在任何方向上平铺。

4：背景定位

可以利用background-position属性改变图像在背景中的位置。为background-position属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right和center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如100px或5cm，最后也可以使用百分数值，不同类型的值对于背景图像的放置稍有差异。

根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字——一个队形水平方向，一个对应垂直方向。如果只出现一个关键字，则认为另一个关键字是center。

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中：background-position：50%，50%；

这会导致图像适当位置，其中心与其元素中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为50%，50%的点与元素中描述为50%，50%的点对齐。

长度值解释的是元素内边距区左上角的偏移量，偏移点是图像上的左上角。background-position: 50px 50px ;这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。

5：背景关联

如果文档比较长，那么文档向下滚动时，背景图像也随之滚动。当文档滚动超过图像位置时，图像就会消失。可以通过background-attachment属性防止这种滚动。通过这个属性，可以对声明图像相对可视区是固定的（fixed），不会受滚动的影响。background-attachment：fixed；

background-attachment属性的默认值是scroll,在默认的情况下，背景会随文档滚动。

2：CSS 文本

SCC文本属性可定义为文本外观。通过文本属性，您可以改变文本的颜色、字符间距、对齐文本，对文本进行缩进，等等。

1：缩进文本

把Web页面上的段落进行缩进，这是一种最常用的文本格式化效果。CSS提供了text-indent属性，该属性可以方便的实现文本缩进。通过text-indent属性，所有元素第一行都可以缩进一个给定长度，甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进。例：p {text-indent : 5px ;}

一般来说，可以为所有块级元素应用text-indent，但无法将该属性应用于行内元素。图像之类的替换元素上也无法应用text-indent属性。不过，如果一个块级元素的首行中有一个图像，它会随改行的其余文本移动。如果想把第一行内元素的第一行缩进，可以用左内边距或外边距创造这种效果。

2：使用百分比值

text-indent可以使用所有长度单位，包括百分比值。百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为20%，所影响元素的第一行会缩进其父元素的20%。

3：水平对齐

text-align是一个基本的属性，他会影响一个元素中的文本行相互之间的对齐方式。left：左对齐，右边呈锯齿状；right：右对齐，左边呈锯齿状；center：文本居中。

text-indent与<CENTER>元素大不相同。<CENTER>不仅影响文本，还会把整个元素居中。

水平对齐属性：justify。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。

4：字间隔

word-spacing属性可以改变字之间的标准间隔。其默认值normal与设置值为0 是一样的。

word-spacing属性接受一个正长度值或负长度值，那么字之间的间隔就会增加，为word-spacing设置一个负值，会把它拉近。

5：字母间隔

letter-spacing属性与word-spacing的区别在于，字母间隔修改的是字符或字母之间的间隔。

与word-spacing属性一样，letter-spacing属性的可取值包括所有长度。默认关键字是normal。

6：字符转换

text-transform属性处理文本的大小写，这个属性有四个值：none：对文本不做任何处理；uppercase：将文本变成大写；lowercase：将文本变成小写；capitalize：只对每个单词首字母进行大写。

7：文本装饰

text-decoration有5个值：none：去掉其他修饰，不做任何处理；underline：对元素加下划线；overline：在元素加上划线；link-through：在文本中加贯穿线；blink：让文本闪烁。

8：处理空白符

white-space属性会影响到用户代理对源文档中的空格、换行和tab字符的处理。

通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的XHTML处理已经完成了空白符处理：它会把所有空白符合并为一个空格，也会忽略回车。

p {white-space:normal;}

如果把white-spacing设置成pre，受这个属性影响的元素中，它不会忽略空白符，也不会忽略回车。

如果把white-spacing设置成nowrap，受这个属性影响的元素中，会忽略空白符，会忽略回车。禁止换行。

如果把white-spaceing设置成pre-wrap，受这个属性影响的元素中，会保留空白符，会保留回车，还会允许自动换行。

如果把white-spacing设置成pre-line，受这个属性影响的元素中，会忽略空白符，但是会保留回车，也会自动换行。