1.line-height
可以给某个元素指定一个不带单位的缩放因子，这样它的后代元素就会继承这个缩放因子，再根据自身的字号大小来计算自己的行高(line-height)值，

1. 
   
2. body {
   
3. font-size: 12px;
   
4. line-height: 1.5;
   
5. }
   
6. h1 {
   
7. font-size: 36px;
   
8. }

复制代码

这里，body 的 line-height 是 18px（12 * 1.5），而 h1 的 line-height 则是 54px（36 * 1.5）。
就算使用 em，百分比等相对单位，后代元素继承的仍然是计算后的行高(line-height)值，比如把上面的 body 行高改成 1.5em，那么 h1 的行高就会继承这个值 18px。
2.text-decoration
文本修饰是非继承类属性，给 body 元素设置为 none，并不会影响到后代中默认有文本修饰的元素，例如超链接，所以如果要去掉超链接的默认下划线还是需要单独进行设置，

1. 
   
2. a {
   
3. text-decoration: none;
   
4. }

复制代码

虽然该属性默认不继承，但是祖先元素上设置的修饰会“延伸”到后代元素中，

1. 
   
2. <DIV class=blockcode>
   
3. <BLOCKQUOTE>
   
4. <P>
   
5. <p>我有下划线 <span>我咋会有下划线呢?</span></p></P>
   
6. <DIV class=blockcode>
   
7. <BLOCKQUOTE>
   
8. p {
   
9. color: red;
   
10. text-decoration: underline;
    
11. }
    
12. p span {
    
13. color: green;
    
14. text-decoration: none;
    
15. }

复制代码

这里的下划线是 p 元素的。

1. 
   
2. p {
   
3. color: red;
   
4. text-decoration: underline;
   
5. }
   
6. p span {
   
7. color: green;
   
8. text-decoration: underline;
   
9. }

复制代码

由于文本修饰属性的延伸会造成一些兼容性的问题，所以
最好的做法就是给需要修饰的文本单独设置 text-decoration 属性。
3.text-indent
可以使用该属性给每个段落首行缩进2个字符，而不是使用空格，

1. 
   
2. <P><IMG border=0 alt="" src="http://bbs.itheima.com/forum.php?mod=image&aid=51005&size=300x300&key=a52701c0a647065e&nocache=yes&type=fixnone" aid="attachimg_51005"></P>
   
3. <P>也可以指定一个负数的值，产生首行悬挂的效果</P>
   
4. <P><IMG border=0 alt="" src="http://bbs.itheima.com/forum.php?mod=image&aid=51006&size=300x300&key=2b64dfd482fcd5e6&nocache=yes&type=fixnone" aid="attachimg_51006"></P>
   
5. <P>让引号悬挂也是一种常用做法，</P>
   
6. <P><IMG border=0 alt="" src="http://bbs.itheima.com/forum.php?mod=image&aid=51007&size=300x300&key=5338e5d42c6912dd&nocache=yes&type=fixnone" aid="attachimg_51007"></P>
   
7. <P>让文本缩进到一个足够远的地方，可以让文字消失，</P>
   
8. <P>text-indent: -9999px;</P>
   
9. <P> 因此，通常的图像替换文字常用方法，</P>
   
10. <DIV class=blockcode>
    
11. <BLOCKQUOTE>
    
12. .logo {
    
13. background: url(logo.png) no-repeat;
    
14. display: inline-block;
    
15. height: 36px;
    
16. text-indent: -9999px;
    
17. width: 72px;
    
18. }

复制代码

IE6/7 并不真正支持 inline-block，某些情况下可能会导致 .logo 消失不见，可以使用浮动或者 block 替代 inline-block，不过两者都会改变布局方式，也可以使用其它方法。
4.text-overflow
通常情况下，长串的URL地址，在超出容器时会溢出，我们可以设定当文本溢出包含容器时显示省略符号，

1. 
   
2. li {
   
3. overflow: hidden;
   
4. text-overflow: ellipsis;
   
5. }

复制代码

必须配合 overflow: hidden; 一起使用；有时候可能还得加上一个宽度，比如IE 6，
对于那些默认情况下并不会溢出的文本，需要强制其在一行内显示，这样才能产生效果，

1. 
   
2. li {
   
3. overflow: hidden;
   
4. text-overflow: ellipsis;
   
5. white-space: nowrap;
   
6. width: 100%; /* for IE 6 */
   
7. }

复制代码

使用 white-space: pre; 或者 word-break: keep-all; 也能强制文本在一行显示，不过各有各的问题。
在 IE 8/9 中，有时候会发现没有效果，那有可能是祖先元素中某个元素设置了word-wrap: break-word; 而该属性会表现得比 white-space: nowrap; 更强势，所以，有时候还得加上下面代码，
word-wrap: normal;
5.text-shadow
在非白色背景的深色文字上，可以实现漂亮的内嵌效果，

1. 
   
2. text-shadow: 0 1px 0 rgba(255,255,255,.75);

复制代码

可以给文本添加多个阴影，用逗号分隔，

1. text-shadow: 0 1px 0 #fff, 0 2px 0 #ddd, 0 3px 0 #ddd, 0 4px 0 #ddd;

复制代码

1.line-height
可以给某个元素指定一个不带单位的缩放因子，这样它的后代元素就会继承这个缩放因子，再根据自身的字号大小来计算自己的行高(line-height)值，

1. 
   
2. body {
   
3. font-size: 12px;
   
4. line-height: 1.5;
   
5. }
   
6. h1 {
   
7. font-size: 36px;
   
8. }

复制代码

这里，body 的 line-height 是 18px（12 * 1.5），而 h1 的 line-height 则是 54px（36 * 1.5）。
就算使用 em，百分比等相对单位，后代元素继承的仍然是计算后的行高(line-height)值，比如把上面的 body 行高改成 1.5em，那么 h1 的行高就会继承这个值 18px。
2.text-decoration
文本修饰是非继承类属性，给 body 元素设置为 none，并不会影响到后代中默认有文本修饰的元素，例如超链接，所以如果要去掉超链接的默认下划线还是需要单独进行设置，

1. 
   
2. a {
   
3. text-decoration: none;
   
4. }

复制代码

虽然该属性默认不继承，但是祖先元素上设置的修饰会“延伸”到后代元素中，

1. 
   
2. <DIV class=blockcode>
   
3. <BLOCKQUOTE>
   
4. <P>
   
5. <p>我有下划线 <span>我咋会有下划线呢?</span></p></P>
   
6. <DIV class=blockcode>
   
7. <BLOCKQUOTE>
   
8. p {
   
9. color: red;
   
10. text-decoration: underline;
    
11. }
    
12. p span {
    
13. color: green;
    
14. text-decoration: none;
    
15. }

复制代码

这里的下划线是 p 元素的。

1. 
   
2. p {
   
3. color: red;
   
4. text-decoration: underline;
   
5. }
   
6. p span {
   
7. color: green;
   
8. text-decoration: underline;
   
9. }

复制代码

由于文本修饰属性的延伸会造成一些兼容性的问题，所以
最好的做法就是给需要修饰的文本单独设置 text-decoration 属性。
3.text-indent
可以使用该属性给每个段落首行缩进2个字符，而不是使用空格，

1. 
   
2. <P><IMG border=0 alt="" src="http://bbs.itheima.com/forum.php?mod=image&aid=51005&size=300x300&key=a52701c0a647065e&nocache=yes&type=fixnone" aid="attachimg_51005"></P>
   
3. <P>也可以指定一个负数的值，产生首行悬挂的效果</P>
   
4. <P><IMG border=0 alt="" src="http://bbs.itheima.com/forum.php?mod=image&aid=51006&size=300x300&key=2b64dfd482fcd5e6&nocache=yes&type=fixnone" aid="attachimg_51006"></P>
   
5. <P>让引号悬挂也是一种常用做法，</P>
   
6. <P><IMG border=0 alt="" src="http://bbs.itheima.com/forum.php?mod=image&aid=51007&size=300x300&key=5338e5d42c6912dd&nocache=yes&type=fixnone" aid="attachimg_51007"></P>
   
7. <P>让文本缩进到一个足够远的地方，可以让文字消失，</P>
   
8. <P>text-indent: -9999px;</P>
   
9. <P> 因此，通常的图像替换文字常用方法，</P>
   
10. <DIV class=blockcode>
    
11. <BLOCKQUOTE>
    
12. .logo {
    
13. background: url(logo.png) no-repeat;
    
14. display: inline-block;
    
15. height: 36px;
    
16. text-indent: -9999px;
    
17. width: 72px;
    
18. }

复制代码

IE6/7 并不真正支持 inline-block，某些情况下可能会导致 .logo 消失不见，可以使用浮动或者 block 替代 inline-block，不过两者都会改变布局方式，也可以使用其它方法。
4.text-overflow
通常情况下，长串的URL地址，在超出容器时会溢出，我们可以设定当文本溢出包含容器时显示省略符号，

1. 
   
2. li {
   
3. overflow: hidden;
   
4. text-overflow: ellipsis;
   
5. }

复制代码

必须配合 overflow: hidden; 一起使用；有时候可能还得加上一个宽度，比如IE 6，
对于那些默认情况下并不会溢出的文本，需要强制其在一行内显示，这样才能产生效果，

1. 
   
2. li {
   
3. overflow: hidden;
   
4. text-overflow: ellipsis;
   
5. white-space: nowrap;
   
6. width: 100%; /* for IE 6 */
   
7. }

复制代码

使用 white-space: pre; 或者 word-break: keep-all; 也能强制文本在一行显示，不过各有各的问题。
在 IE 8/9 中，有时候会发现没有效果，那有可能是祖先元素中某个元素设置了word-wrap: break-word; 而该属性会表现得比 white-space: nowrap; 更强势，所以，有时候还得加上下面代码，
word-wrap: normal;
5.text-shadow
在非白色背景的深色文字上，可以实现漂亮的内嵌效果，

1. 
   
2. text-shadow: 0 1px 0 rgba(255,255,255,.75);

复制代码

可以给文本添加多个阴影，用逗号分隔，

1. text-shadow: 0 1px 0 #fff, 0 2px 0 #ddd, 0 3px 0 #ddd, 0 4px 0 #ddd;

复制代码