css怎么首行缩进

html-css025

css怎么首行缩进,第1张

text-indent: 2em

具体方法：

新建一个html代码文件，然后在这个html代码页面上创建一个<div>，同时给这个<div>设置一个class类；然后在这个<div>中创建几个<p>,并个<p>添加上内容。

代码：

<div class="cont">

<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>

<p>的顶顶顶顶顶的顶顶顶顶顶</p>

<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>

</div>

设置样式。在<title>标签后面新建一个<style>,在这个<style>设置cont类的宽为400px，然后设置p标签的首行缩进为两个字符。如图：

代码：

<style>

.cont{

width:400px

}

.cont p{

text-indent: 2em

}

</style>

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

所有代码。直接复制所有代码，粘贴到新建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>

扩展资料：

CSS text-indent属性规定文本块中首行文本的缩进。

注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

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

用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。

所有浏览器都支持 text-indent 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

参考资料来源：百度百科：CSS text-indent

一般用tab键进行缩进，占位4个字符，不要用空格。这个主要看个人习惯，统一即可。

各个编辑器的缩进方式

sublime里面用tab缩进，是默认的4个字符。

phpstorm中写代码可以设定4个字符的缩进，或者2个字符缩进。

例如，拿你说的话举例:

<p

class="demo">CSS中，我想设置，

全文:首行缩进2字符，段落左右各缩进2字符，应该怎样写?代码应该放在哪里?</p>

把它们放置在P标签中，然后在CSS中加入

.demo{text-indent:2em}这可以实现你要的首行缩进2字符。

剩下的就是你说的段落左右各缩进2字符，那推荐你用的就是margin或者是padding来实现。

.demo{text-indent:2empadding:0

2em}这样就可以实现左右的“缩进”

不讲太多了，按照上面就可以实现了。