赵工的个人空间

CSS的文本控制

文本text内容，是网页中的主要内容之一，CSS属性中有很多是关于文本text的值，包括字体、字形、颜色、字符间距、对齐、装饰等多方面，以提供多种多样的外观呈现。

1. 字体：
字体相关属性有：

属性	说明
font-family	有很多种，包括汉字字体及拉丁字体，需要浏览器装载了相关字体才能呈现，如font-family:"宋体";
font-size	设置字体大小，如font-size:12px;
font-style	设置字体风格，包括normal、italic、oblique等，如font-style:italic
font-weight	设置字体粗细，包括normal、bold等，如font-style:bold
font	设置所有字体属性，顺序为字体风格、字体粗细、字体大小、字体类型，如font:italic bold 36px "宋体";

2. 颜色：
对于文本来说，有字体颜色与背景颜色，分别使用color和background-color属性来设置，属性值可以使用CSS的合法颜色表示方法，包括颜色名、十六进制的#RGB或#RRGGBB格式、rgb(R,G,B)方式、rgba(R,G,B,A)方式等。
而其中的颜色名，虽然浏览器可以支持100多种，但那些名称对以英语为母语的人比较常用，对国人来说很多都比较生疏，并不方便使用，一般常见的主要是red、green、blue、yellow、black、gray、white、gold、silver、brown、wheat、orange、olive、purple、cyan、lime、navy、pink、violet等，其中前面的知道的人多一些，后面的一些颜色很多人也不熟。全部颜色名及对应的十六进制表示可以参见网页
对于文本背景，一般可以使用background-color设置颜色，也可以用background-image属性设置为图像：
p.flower {background-image: url(/img/bk.gif);}
a.radio {background-image: url(/img/bk2.gif);}
但是背景图像往往都是有一定大小的，与网页元素大小未必一致，所以一般都需要指定background-repeat属性，取值范围为repeat、repeat-x、repeat-y、no-repeat。
如果需要改变背景图像的位置，可以设置background-position 属性，取值包括关键字top、bottom、left、right 和 center，有些关键字会成对出现。
p{
   background-image:url('bgimg.gif');
   background-repeat:no-repeat;
   background-position:top;
}
background-position 属性也可以使用长度值，如px、百分比：
background-position:66% 33%;
默认值是0% 0%，在功能上相当于top left，因此背景图像总是从元素内边距区的左上角开始平铺。
background-position:50px 100px;
设置值为50px 100px，图像的左上角将在元素内边距区左上角向右50像素、向下100像素的位置上。
还可以通过background-attachment属性声明图像相对于可视区是固定的（fixed），因此不会受到文档向下滚动的影响：
background-attachment:fixed;
背景颜色与背景图像及相关属性可以用一行描述：
background: #ff0000 url(/img/bk.gif) no-repeat fixed center;

3. 行高：
line-height属性设置行高，可选值包括：

属性	说明
normal	默认，设置合理的行间距
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距
length	设置固定的行间距
%	基于当前字体尺寸的百分比行间距
inherit	从父元素继承 line-height 属性的值

p.small {line-height:70%;}
p.big {line-height:200%;}

4. 缩进文本：
把Web页面上的段落的第一行缩进是最常用的文本格式化效果，可以通过text-indent属性方便地实现文本缩进。可以为所有块级元素应用text-indent，但行内元素、图像无效，如果想把一个行内元素的第一行缩进，可以用左内边距或外边距创造这种效果。
p {text-indent: 5em;}
text-indent还可以设置为负值，使第一行突出，但要注意有可能会使某些文本超出浏览器窗口的左边界，因此往往需要设置一个外边距或一些内边距。
p {text-indent: -5em; padding-left: 5em;}
text-indent可以使用所有长度单位，包括百分比，百分数是要相对于缩进元素父元素的宽度，也就是如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
注意，text-indent属性可以继承。

5. 水平对齐：
text-align属性会影响一个元素中的文本行互相之间的对齐方式，属性值包括 left、right、center、justify、inherit，默认left。其中left、right、center分别表示左对齐、右对齐和居中；而inherit表示继承父元素的对齐方式；justify表示两端对齐，文本行的左右两端都放在父元素的内边界上，然后调整单词和字母间的间隔，使各行的长度恰好相等，这种方式在打印领域很常见。

6. 垂直对齐：
vertical-align 属性设置一个元素的垂直对齐方式，可指定负长度值和百分比值，这会使元素降低。 img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}

属性	说明
baseline	默认，元素放置在父元素的基线上
sub	垂直对齐文本的下标
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部
bottom	使元素及其后代元素的底部与整行的底部对齐
text-bottom	把元素的底端与父元素字体的底端对齐
length	将元素升高或降低指定的高度，可以是负数
%	使用"line-height"属性的百分比值来排列此元素。允许使用负值
inherit	从父元素继承 vertical-align 属性的值

7. 字间距：对中文无效
使用word-spacing属性可以改变字母文字的单词之间的标准间隔，取值可以为normal、inherit或者一个长度值，长度值可以为负值。默认值为normal，这与设置值为0是一样的。对于非字母文字系统，未必可以达到预期效果。

8. 字母间隔：
使用letter-spacing属性可以改变字母文字的字母之间的标准间隔，取值可以为normal、inherit或者一个长度值，长度值可以为负值。默认值为normal，这与设置值为0是一样的。对于非字母文字系统，未必可以达到预期效果。

9. 字符转换：
使用text-transform属性可以改变字母文字的大小写，取值可以为属性有none、uppercase、lowercase、capitalize四个值。默认值none对文本不做任何改动，uppercase和lowercase将文本转换为全大写和全小写字符，而capitalize只对每个单词的首字母大写。

10. 文本装饰：
text-decoration属性有none、underline、overline、line-through、blink五个值。underline会对元素加下划线，overline会在文本的顶端画一个上划线，line-through 则在文本中间画一个贯穿线，blink 会让文本闪烁。
可以在一个规则中结合多种装饰。如果希望因为所有超链接默认就有下划线，可以既有下划线，又有上划线，则规则如下：
a:link a:visited {text-decoration: underline overline;}

11. 处理空白符：
white-space 属性会影响源文档中的空格、换行和tab字符的处理。默认的XHTML会把所有空白符合并为一个空格，同时忽略元素中的换行。
以下声明显式地设置这种默认行为：
p {white-space: normal;}
white-space 属性可能的值包括：

属性	说明
normal	默认，空白会被浏览器忽略
pre	空白会被浏览器保留，类似HTML中的<pre>标签
nowrap	文本不会换行，直到遇到<>标签为止
pre-wrap	保留空白符序列，但是正常地进行换行
pre-line	合并空白符序列，但是保留换行符
inherit	从父元素继承 white-space 属性的值

下面的表格总结了 white-space 属性的行为：

值	空白符	换行符	自动换行
normal	合并	忽略	允许
pre-line	合并	保留	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

12. 文本方向：
英文是左到右、从上到下地阅读，但并不是所有语言都如此。direction属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。注意对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有ltr和rtl两个值，可以使用inherit值，默认是ltr，显示从左到右的文本。如果要显示从右到左的文本，应使用值 rtl。

13. 文本阴影：
text-shadow属性设置文本阴影，指定的2个或3个长度值和一个可选的颜色值用逗号分隔开来。

属性值	说明
h-shadow	水平阴影的位置，允许负值，必需值
v-shadow	垂直阴影的位置，允许负值，必需值
blur	模糊距离，可选值
color	阴影的颜色，可使用CSS颜色各种描述方法，可选值

h1 {text-shadow:2px 2px #FF0000;}

14. 超界处理：
text-overflow属性设置当文本超出容器边界时的处理方式，有clip、ellipsis、string三个值，clip表示修剪文本，ellipsis是显示省略符号来代表被修剪的文本，string是使用给定的字符串来代表被修剪的文本。
容器CSS一般还会用到overflow属性，其属性值包括：

属性值	说明
visible	默认值，内容会呈现在元素框之外
hidden	内容会被修剪，其余内容是不可见的
scroll	内容会被修剪，浏览器会显示滚动条以便查看其余的内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit	从父元素继承 overflow 属性的值

有时，可以在容器CSS中设置overflow属性为hidden，但又设置一个对应的容器:hover伪类CSS的overflow属性为visible，这样内容超出部分平时不可见，但当鼠标放在容器上时就会超框显示出来。