CSS文本属性可定义文本的外观。

 

　　缩进文本

 

　　把Web页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。(推荐学习：CSS入门教程)

 

　　CSS提供了text-indent属性，该属性可以方便地实现文本缩进。

 

　　通过使用text-indent属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

 

　　这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进5em：

 

　　p{text-indent:5em;}

 

　　注意：一般来说，可以为所有块级元素应用text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用text-indent属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

 

　　提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

 

　　使用负值

 

　　text-indent还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：

 

　　p{text-indent:-5em;}

 

　　不过在为text-indent设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

 

　　p{text-indent:-5em;padding-left:5em;}

 

　　使用百分比值

 

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

 

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

 

　　在下例中，缩进值是父元素的20%，即100个像素：

 

　　div{width:500px;}

 

　　p{text-indent:20%;}

 

　　<div>

 

　　<p>thisisaparagragh</p>

 

　　</div>

 

　　继承

 

　　text-indent属性可以继承，请考虑如下标记：

 

　　div#outer{width:500px;}

 

　　div#inner{text-indent:10%;}

 

　　p{width:200px;}

 

　　<divid="outer">

 

　　<divid="inner">sometext.sometext.sometext.

 

　　<p>thisisaparagragh.</p>

 

　　</div>

 

　　</div>

 

　　以上标记中的段落也会缩进50像素，这是因为这个段落继承了id为inner的div元素的缩进值。






本文转载自中文网