段首缩进的格式指定

最新推荐文章于 2024-03-04 16:32:59 发布

gracexu

最新推荐文章于 2024-03-04 16:32:59 发布

阅读量1.7k

点赞数

分类专栏： Web 文章标签： div html input 脚本 button function

本文链接：https://blog.csdn.net/gracexu/article/details/2432026

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

据说，段首缩进在阅读体验上比段和段之间的空行要好。这种排版至少可以把空行保留下来用于更重要的分割。CSDN 博客在改版以前段落首行是不缩进的，改完了<p>元素全部段首缩进了，一下子还真不习惯，自己手工把很多文章的样式改了回去，本文也是为了记载这次修改而写的。

段首缩进是某些文本元素，比如段落(<p>)，还有 Div 等的一种样式，我们可以在三个地方指定 P 元素的这种样式：行内(用 HTML 属性 Style)，内部样式表(用 HTML 元素 Style)和外部样式表(用 HTML 元素 Link 把外部样式表链进来)。

段首缩进样式的名称在样式表里是 text-indent，在脚本语言里是 textIndent。这个属性把文本元素的第一行根据指定的值缩进。这个指定的值可以是负数，当值是负数的时候，段落的第一行是向前突出了，如果绝对值大的话，前面的内容在屏幕上显示时被截掉了。

text-indent 属性的值可以是一个具体的长度，也可以是一个百分比。

值	描述	示例
长度	定义一个固定的缩进值，单位可以是 em，px，cm 等。	P {text-indent: 20px}
%	定义的缩进值是父元素的百分比。	P {text-indent: 20%}

当用在脚本里时，段首缩进的表达式是这样的：

Object.style.textIndent=length | %

请看下面的例子：

<html>

<head>

<script type="text/javascript">

function setTextIndent() 

{ document.getElementById("div1").style.textIndent="50px"; } 

</script>

</head><body>

<div id="div1">

This is some text. This is some text. This is some text. This is 
some text. This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. This is 
some text. This is some text.

</div>
<input type="button" οnclick="setTextIndent()" value="Indent first line of text" />
</body> 
</html>

试验一下效果：

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

另外，有些浏览器，比如 Fedora，支持 Adjacent sibling selectors 的写法，比如 p + p {text-indent: 20px}。

这样第一个出现的段落第一行不会缩进，但紧跟在它后面的同级段落第一行就缩进了。但是 IE6 试验下来不支持这种选择器。