您的位置:内蒙古11选五开奖5号的 > DIV CSS基础 > 正文

扑克牌玩法大全:text-indent【css 缩进】段首文本文字缩进属性

css text-indentcss 缩进】段首行文本文字缩进属性

css属性样式单词之text-indent教程篇,text-indent有css缩进功能,一般用于文章中每个段落开始时文本文字缩进。这里内蒙古11选五开奖5号的为大家介绍text-indent从语法到应用小实例,让大家认识text-indent同时掌握text-indent缩进属性用法。

一、css text-indent语法结构

text-indent是用于首行文字缩进。

1、内蒙古11选五开奖5号的 text-indent语法
text-indent语法:
text-indent : length
设置对象中的文本的缩进。无论div、p、li都可以设置其文段开始时文字缩进效果。

text-indent参数:
length :  百分比数字|由浮点数字和html单位标识符组成的长度值,允许为负值。

2、text-indent语法示范

  1. div{text-indent:2em} 

设置div对象内文字开始时缩进2相对长度(em)距离。

  1. p{text-indent:25px} 

设置段落p对象内文字缩进25像素(px);

3、text-indent语法分析图

css text-indent用法语法分析图
css text-indent用法语法分析图

二、text-indent缩进实例

这里ThinkCSS通过text-indent缩进小实例,让大家掌握text-indent实际用法。

text-indent实例描述:
这里text-indent任意找一篇短文章,为了看到每段缩进效果,每段文字不一定是完整。同时我们设置布局css宽度固定,以便使用过多文字才能看到效果。无论加宽度width和减少文字使用象征文字,不影响text-indent效果与功能。

1、关键CSS代码

.exp{ text-indent:28px; width:300px} 

设置对象缩进样式。

2、text-indent实例完整CSS+HTML代码

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>缩进实例 ThinkCSS</title>
<style>
.exp{ text-indent:28px; width:300px}
</style>
</head>
<body>
<div class="exp">
<p>欢迎来到ThinkCSS网!ThinkCSS以通俗易懂知识讲解、案例分析、
实例示范让您轻松学习DIV+CSS布局技术、轻松实现xhtml标准网页重构开发。</p>
<p>进入ThinkCSS网站CSS学习指南:<br />HTML学习:进入HTML教程、
HTML入门栏目学习CSS技术必备的HTML知识;CSS基础学习:进入CSS属性教程、CSS入门
栏目学习必备的DIVCSS样式基础教程;CSS资源:进入CSS特效、CSS??槔改垦罢易约盒枰淖试?;
网页兼容:如遇到兼容问题可以进入css hack栏目寻找解决HTML网页兼容方法。</p>
</p>
</div>
</body>
</html>

以上使用p标签将文章分为两段文字,看看每段首行文字是否实现缩进。

3、效果截图

css div text-indent缩进实例效果截图
css div text-indent缩进实例效果截图

4、text-indent实例特别说明
这里为什么我们只对内蒙古11选五开奖5号的设置text-indent属性,而p标签段落内文字会首行缩进呢?
这是因为p会继承div缩进属性,所以不用对.exp p设置,而直接对div设置缩进text-indent样式即可,这样节约代码同时实现缩进效果功能。

5、text-indent实例在线演示

查看案例

6、text-indent属性打包下载

三、text-indent使用总结

内蒙古11选五开奖5号的中text-indent常常用于文章段落p标签使用时,每段文字自动缩进,这样美化文章排版,以前没有学习css text-indent属性时,文章缩进可能用html空格(打空格字符&nbsp;)来实现段首文字的缩进效果。

如果是在一个对象内文章段落,每段使用p标签,其实不需要直接对该对象内p标签设置段落首行文字缩进text-indent属性,只需要对对象设置text-indent css样式即可。

更多关于css text-indent相关文章:
text-indent:-9999px

相关标签: 缩进
如需转载,请注明文章出处和来源网址:www.thinkcss.com/css/932.shtml

日期:2016-07-10 23:12:36 来源:内蒙古11选五开奖5号的 www.phlmy.com 作者:ThinkCSS
  • 其实啊也不奇怪,菜做好了先来一份尝尝味道于是提前开吃了。 2019-08-19
  • 十九大精神进机关:原原本本吃透精神 学懂弄通昂扬斗志 2019-08-13
  • 我们是建立市场经济,公有制如何建立市场经济,就要明晰产权,不明晰产权如何建立市场经济? 2019-08-13
  • 2017巴塞尔国际钟表珠宝展 2019-08-11
  • 政务舆情回应如何把握语言分寸感? 2019-08-11
  • 候选案例:机井通电惠民生 2019-08-08
  • 2018年04期 中国国家地理网 2019-08-05
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-07-31
  • 西安外国语大学第二十四届校园文化艺术节闭幕式暨第一届朗读者圆满落幕西安外国语大学第二十四届校园文化艺术节-陕西教育新闻 2019-07-31
  • 俄罗斯世界杯今日开战,送上最全观赛指南!你最看好哪支球队? 2019-07-29
  • 《人民日报》让我爱上了文学(原创首发) 2019-07-29
  • 【北京页川车型报价】北京页川4S店车型价格 2019-07-27
  • 河北沧州经济开发区管理委员会 2019-07-24
  • 强村带弱村结对共发展 2019-07-24
  • 《读药》151期:短篇小说——解读蒋一谈《庐山隐士》 2019-07-15
  • 秒速时时彩骗局 羽毛球规则简介 澳客网竞彩比分直播 上海十一选30期五走势图 浙江体育超级大乐透 体彩十一运夺金彩票 广东26选5玩法 陕西快乐十分大神计划 今天重庆幸运农场开奖官网 中国体彩超级大乐透 六和才彩特码资料期 nba历史得分榜第一 足球指数赔率 冰球刀刀刃形状 8月1日生肖时时彩