CSS干货系列（二）CSS背景与文本

1.背景

1.1背景色，属性background-color，指定元素的背景色，不能被继承，默认值是transparent。

1.2背景图像，属性background-image，默认值是none，不能被继承。如果需要指定背景图像，则必须为这个属性设置一个url值，比如：body {background-image:url(/ex.jpg);}。

1.3背景重复，background-repeat 属性。属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

默认地，背景图像将从一个元素的左上角开始。

比如：background-repeat: repeat-y; 或 background-repeat: no-repeat;

1.4背景定位，background-position 属性改变图像在背景中的位置。比如，background-position:center;   

属性值可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。

1.5关键字

top right 使图像放置在元素内边距区的右上角。

位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。

如果只出现一个关键字，则认为另一个关键字是 center。

1.6百分数值

如果希望用百分数值将图像在其元素中居中，background-position:50%（水平） 50%（垂直）;这会导致图像适当放置，其中心与其元素的中心对齐。百分数值同时应用于元素和图像。图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。

如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

如果想把一个图像放在水平方向 2/3、垂直方向 1/3 处，background-position:66% 33%;

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。

background-position 的默认值是 0% 0%，在功能上相当于 topleft。

1.7长度值（图像左上角的偏移）

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：background-position:50px 100px;

1.8背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响；比如background-attachment:fixed。background-attachment属性的默认值是 scroll，在默认的情况下，背景会随文档滚动。

2.文本

2.1缩进

text-indent 属性，该属性可以方便地实现文本缩进，可以继承。比如：text-indent: 5em;。应用所有块级元素 text-indent，但无法将该属性应用于行内元素。还可以使用负值。

使用百分比值

text-indent 可以使用所有长度单位，包括百分比值。

百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。

2.2水平对齐

text-align值 left、right 、 center 和justify会导致元素中的文本分别左对齐、右对齐、居中和两端对齐。

将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

2.3字间隔

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

2.4字母间隔

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

2.5字符转换

text-transform 属性处理文本的大小写。这个属性有 4 个值：none（默认值）、uppercase、lowercase、capitalize（首字母大写）

2.6文本装饰

text-decoration 属性none、underline、overline、line-through、blink

underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁。none 值会关闭原本应用到一个元素上的所有装饰。比如，去掉超链接的下划线a {text-decoration: none;}。

2.7处理空白符

white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。比如，white-space: normal; 丢掉多余的空白符

2.8文本方向

direction 属性有两个值：ltr（默认值，从左向右） 和 rtl

文本属性描述color设置文本颜色direction设置文本方向。line-height设置行高。letter-spacing设置字符间距。text-align对齐元素中的文本。text-decoration向文本添加修饰。text-indent缩进元素中文本的首行。text-shadow设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。text-transform控制元素中的字母。unicode-bidi设置文本方向。white-space设置元素中空白的处理方式。word-spacing设置字间距。

参考：w3cschool文档

一品好物

一品好物券