1.text-decoration
定义什么请移步：w3school
说明
这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。
| 默认值： | none |
|---|---|
| 继承性： | no |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.textDecoration="overline" |
可能的值
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| blink | 定义闪烁的文本。 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本实例-设置文本字体效果</title> <style type="text/css"> h2 { text-decoration: underline; } .p1 { text-decoration: overline; } .p2 { text-decoration: line-through; } .sp1 { text-decoration: blink; } .decoration { text-decoration: underline; padding: 10px; } </style> </head> <body> <h1>none默认。定义标准的文本</h1> <h2>underline定义文本下的一条线。</h2> <p class="p1">overline定义文本上的一条线。</p> <p class="p2">line-through定义穿过文本下的一条线。</p> <span class="sp1">blink定义闪烁的文本。</span> <div class="decoration"> <span class="sp2">inherit规定应该从父元素继承 text-decoration 属性的值。</span> </div> </body> </html>
注释：IE、Chrome 或 Safari 不支持 "blink" 属性值。
效果图
2.text-indent
定义什么请移步：w3school
说明
用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。
| 默认值： | not specified |
|---|---|
| 继承性： | yes |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.textIndent="50px" |
可能的值
| 值 | 描述 |
|---|---|
| length | 定义固定的缩进。默认值：0。 |
| % | 定义基于父元素宽度的百分比的缩进。 |
| inherit | 规定应该从父元素继承 text-indent 属性的值。 |
示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .indent{ width: 300px; margin: 0 auto; } .text1{ text-indent: 20px; } .text2{ text-indent: 20%; } </style> </head> <body> <div class="indent"> <div class="text1">测试测试测试</div> <div class="text2">测试测试测试</div> </div> </body> </html>