关注联楷|返回首页 | 网站案例 | 帮助中心

合作共赢、快速高效、优质的网站建设提供商

上海网站建设 

服务热线:021-61394118

上海联楷科技

CSS实现网站内容首行缩进样式

作者:佚名   时间:2014-03-16   分享到:

如何让网站内容首行缩进

text-indent属性

尽管该属性现在已经不像以前那样通用了,但这仍然是缩进文本段落首行的标准做法。诸如定义这样的某些文本块能常要突出显示第一行,这复印件为悬挂缩进(hanging indent)。

CSS2的text-indent属性允许把这些特性应用到任何块标签上,由此来控制该块第一行的缩进量。使用长度和百分比值时:负值可以创建悬挂缩进,百分比值则确定了缩进量相对于父元素宽度的百分比。默认值为10.

要缩进文档中的所有段落,可以参考以下示例:

P{text-indent:3em}

当段落的字体大小随浏览器的不同而发生改变时,长度单位em会相应调整缩进量。

使用悬挂缩进需要一些技巧,因为必须要注意元素的边框。负缩进不会移动文本的左边界;它仅仅会向左移动元素的第一行,可能将其移动到边界、边框或父元素的补白部分。由于这个原因,只有把元素的左边界也向右移动,并且偏移量等于或大于悬挂缩进量时,县挂缩进才能你预期那样有效,例如:

p.wront{text-indent:-3em}

p.hang {text-indent:-3em;margin-left:3em}

p.large{text-indent:-3em;margin-left:6em}

上述代码创建了三种段落样式。第一种样式创建了一个向左边界延伸的悬挂缩进。第二种样式创建了一个常规悬挂缩进。第三种样式则创建了一个正文缩进量大于悬挂缩进量的段落样式。所有这三种样式的效果如下图所示:

CSS实面首行缩进悬挂效果



如没特殊注明,文章均为上海联楷网络原创,转载请注明来自:http://www.linksj.com/contact/20151229/n7337.html

上海联楷网络新闻