css怎么首行缩进

html-css058

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

欢迎大家在这里学习如何让divcss利用缩进这里是我们给大家整理出来的精彩内容。希望大家在这里学习!为了让你的代码给人感觉更为直观,你可以使用一行来定义大纲元素的样式。当指定的选择器里的属性超过三个的时候,这种方式将带来混乱。但是,适度的使用这种方式,你可以很清楚的区分相同类的不同点。

#main-column { display: inlinefloat: leftwidth: 300px}

#main-column h1 { margin-bottom: 20px}

#main-column p { color: #333}

同时,样式修改的维护也是个比较麻烦的问题。很多人修改样式之后就忘记了,结果后来又发现修改的样式导致了页面出错,不得不苦苦寻找。因此,为修改的样式构建一个特殊的格式就很必要了。一种很简单的方式是,给修改过的样式缩进,同时,也可以使用一些注释(比如"@new")来做一个标识。

#sidebar ul li a {

display: block

background-color: #ccc

border-bottom: 1px solid #999/* @new */

margin: 3px 0 3px 0

padding: 3px/* @new */

}

好了,如何让divcss利用缩进内容就给大家介绍到这里了。希望大家继续关注我们的网站!