大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

css实现首行缩进效果的方法

这篇文章给大家分享的是有关css实现首行缩进效果的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

为奎屯等地区用户提供了全套网页设计制作服务,及奎屯网站建设行业解决方案。主营业务为成都网站制作、成都网站建设、奎屯网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

在css中,我们可以使用text-indent属性来实现首行缩进效果,

css实现首行缩进效果的方法

首先我们来了解一下有关于css text-indent属性的相关知识。

text-indent 属性可以设置文本块(块级元素)中首行文本的缩进;它允许使用负值,但如果使用了负值,那么首行会被缩进到左边。

注意:在 CSS 2.1 之前,text-indent 总是继承计算值,而不是声明值。

下面介绍一下text-indent属性可以通过下面的属性值来设置首行的缩进:

length:定义固定的缩进,默认值为0。

%:定义基于父元素宽度的百分比的缩进。

我们通过简单的代码示例来看看效果:



	
		
		首行缩进
		
	
	
		

demo盒子宽500px时:

这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。text-indent:36px;

这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。text-indent:10%;

效果图:

css实现首行缩进效果的方法

当我们把demo盒子的宽度设置为550px后,看看效果图:

css实现首行缩进效果的方法

第一个p标签内的段落文本缩进效果没有改变,但第二个p标签内的段落文本缩进长度变大了,可以看出用%设置的缩进是根据父元素的大小改变的。

下面我们就来看看css如何实现首行缩进2个字符效果:



	
		
		首行缩进
		
	
	
		

这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。

效果图:

css实现首行缩进效果的方法

在这里我们使用到了一种长度单位em,那么什么是em?

em是一种相对长度单位,相对于当前对象内文本的字体尺寸。而我们中文段落一般每段前空两个汉字,实际上,就是首行缩进了2em。

感谢各位的阅读!关于css实现首行缩进效果的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!


网站名称:css实现首行缩进效果的方法
本文网址:http://dzwzjz.com/article/joidpj.html
在线咨询
服务热线
服务热线:028-86922220
TOP