html首行缩进在CSS中的代码,如何在div+css实现首行缩进

用word文档实现段落首行缩进是一件相当容易的事,你只需打开段落对话框,在里面进行相关设置即可。那么在div+css中该如何实现呢?今天我们一起来学习一下。

03f0349275e0740e76fa0d4302bd25a3.png

所谓首行缩进,就是每段前空两个汉字。所以在学习div+css之初,小编用了一个最简单粗暴的方法,就是在段落前面加四个小角空格。如果我们不使用空格呢?那要怎么办呢?解决之道非常简单就是使用text-indent属性,具体有两种方法:

第一种:直接对p进行定义

p{

text-indent:2em;/*em是相对单位,2em即现在一个字大小的两倍*/

}

注:div标签不要忘记起始符。text-indent只对p或div标签有效,对br标签不生效,原因是br标签是换行标签不是分段标签。

第二种:在style里定义

这种方法只需在style里定义如下缩进样式:.suojin{text-indent:2em} ,然后在需要缩进的地方使用class="suojin"即可。

比如用一个div定义一整块段落首行缩进, 凡在div区域里,浏览器一碰上p语句(即一个新段的开始),就会执行.suojin所定义的缩进。

代码如下:

段落一

段落二

段落三

当然也可以在正文中使用嵌入式CSS样式来定义:

段落一

段落二

段落三

以上就是在div+css中实现首行缩进的两种办法,非常简单!

大部分网站都会使用首行缩进让文章每个自然段的开头缩进两个文字以符合读者的正常阅读习惯,所以这是特别常用的一个样式。对于Web开发者来说,想必没什么属性比这个更重要了,初学者们一定要熟练掌握喔!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值