css设置首行缩进

前端开发过程中，为了让段落文本容易区分，页面美化，需要对段落进行首行缩进。css如何设置段落首行缩进呢？只需使用到 text-indent 属性即可。
案例代码：text-indent: 2em;

操作方法

  • 01

    新建一个html代码文件，然后在这个html代码页面上创建一个<div>，同时给这个<div>设置一个class类；然后在这个<div>中创建几个<p>,并个<p>添加上内容。如图： 代码： <div class="cont"> <p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p> <p>的顶顶顶顶顶的顶顶顶顶顶</p> <p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p> </div>

  • 02

    设置样式。在<title>标签后面新建一个<style>,在这个<style>设置cont类的宽为400px，然后设置p标签的首行缩进为两个字符。如图： 代码： <style> .cont{ width:400px; } .cont p{ text-indent: 2em; } </style>

  • 03

    使用浏览器打开，即可看到首行缩进的效果。如图：

  • 04

    所有代码。直接复制所有代码，粘贴到新建html文件上，保存后使用浏览器打开即可看到所有效果。 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首行缩进</title> <style> .cont{ width:400px; } .cont p{ text-indent: 2em; } </style> </head> <body> <div class="cont"> <p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p> <p>的顶顶顶顶顶的顶顶顶顶顶</p> <p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p> </div> </body> </html>

赞 (0)

相关推荐

  • Word2007文档怎么设置首行缩进

    Word2007文档怎么设置首行缩进 1.选中文档中需要设置首行缩进的段落,然后在其上单击鼠标右键,选择"段落"选项. 2.此时会弹出"段落"对话框,我们在&q ...

  • excel表格中的文字怎么设置首行缩进?

    excel表格中的文字可以进行首行缩进,该怎么设置呢?下面我们就来看看详细的教程. 1.在表格的文本框中输入文字后,文字默认显示方式就如图所示 2.选中文字,然后右键调出属性,再选择段落 3.在段落设 ...

  • 在Word文档中如何设置首行缩进呢?

    Word中编辑文件默认不会有缩进,如首行缩进.悬挂缩进等.WORD大文档排版一般也是在录入所有文字后再进行.但有的同学们对首行缩进竟然使用空格,这是明显不对的!在这里,首先需要理解的是,首行缩进是针对 ...

  • 电脑端excel表格如何对文本框中 文字内容设置首行缩进

    电脑端excel表格如何对文本框中 文字内容设置首行缩进

    Excel是我们现在经常使用的办公软件之一.今天小编跟大家分享的是电脑端excel表格如何对文本框中 文字内容设置首行缩进.具体如下:1. 首先我们需要在电脑中新建一份excel表格,进入主界面之后点 ...

  • 怎么在word文档中设置首行缩进2字符

    怎么在word文档中设置首行缩进2字符

       今天给大家介绍一下怎么在word文档中设置首行缩进2字符的具体操作步骤.1.打开电脑,小编这里选择新建一个空白Word文档,粘贴进去部分文字以便演示,大家可以直接将想要设置格式的Word文档打开 ...

  • 如何给Word文档设置首行缩进2字符

    如何给Word文档设置首行缩进2字符

    今天给大家介绍一下如何给Word文档设置首行缩进2字符的具体操作步骤.1. 打开电脑,进入桌面,找到Word文档打开2. 在打开的页面,选择新建一个空白文档3. 如图,进入主页面4. 然后点击页面上方 ...

  • 怎么给WPS文档设置首行缩进2字符

    怎么给WPS文档设置首行缩进2字符

    在WPS中编辑Word文档的时候想要设置首行缩进2字符,该怎么操作呢?今天就跟大家介绍一下怎么给WPS文档设置首行缩进2字符的具体操作步骤.1. 首先打开电脑,找到想要编辑的文档.双击打开或者右键选择 ...

  • WPS如何给Word文档段落设置首行缩进

    WPS如何给Word文档段落设置首行缩进

    WPS是现在十分常用的一款办公软件,有些新用户不知道如何给Word文档段落设置首行缩进,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先用WPS打开电脑中的Word文档,接着根据 ...

  • word自动编号怎么设置首行缩进

    本人最近处理一个文档,使用word自动编号功能时发现编好号后非常丑.那么,word自动编号怎么设置首行缩进呢?下面让我来给大家介绍下吧,希望对大家有所帮助. 操作方法 01 如图所示,是我使用word ...