:::【小技巧二】CSS初体验之首行文字缩进:::长沙DIV+CSS网站设计:::湖南长沙软智科技有限公司:::

网站首页

公司简介

软件开发

网站建设

产品展示

经典案例

解决方案

一卡通系统

短信服务

联系我们

网站建设

主机托管

快速建站

QQ：21543821

电话：0731-4454366

手机：(0)13873166650

您的位置：首页 >> 技术文章 >> DIV+CSS

【小技巧二】CSS初体验之首行文字缩进

来源：原创发布人：www.ruanzhi.com 发表时间：2010-2-8 点击：字体：大中小【双击滚动窗口】

我记得过去刚开始学习制作页面的时候，要想让一段文字首行缩进两个文字，如下图

总是在前面加上8个“ ”，因为过去大家对CSS的概念也不太熟悉，也不太重视，这种方法实现虽然比较直接，但是文字多的时候会有很多“ ”充斥在代码中，如果再有些换行<br/>，那代码显着比较乱，现在大家开始主动了解CSS，学习CSS，你会发现这个问题很容易解决，只需要在相应的位置加入代码

text-indent:2em;

复制代码

就很容易实现喽~
text-indent:2em;解释：text的意思是文本、indent在计算机英语中意思是缩进、至于后面的2em意思就是2个相对单位；
em解释：相对于当前对象内文本的字体尺寸。(引自CSS2.0手册)各位同学，要仔细品一下这个概念！理解喽没有，em这个单位的意思就是相对文字大小，1em就是1个文字大小，2em就是两个文字大小，到这里看明白了吧，理解“text-indent:2em;”的意思了吧，就是“文本缩进两个文字大小”，这不就是我们要的效果么？

将上面的代码给大家写出来，CSS代码是用的行内方式，如果你不明白“行内方式”，就来看一下文章《2.1-CSS如何控制页面》

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS学习网 - 首行文字缩进</title>
</head>
<body>
<div style="width:300px; text-indent:2em;">[url=http://www.cssxuexi.cn/][color=black]CSS学习网[/color][/url],提倡资源共享“分享才能更快乐”，每个人在分享资源的时候，同时也获得了人气和尊重，你将会有更多的同行朋友，团结在你的周围，成为你的左膀右臂.
</div>
</body>
</html>

复制代码

【说明一点】
对于"text-indent:2em"属性，只能加在块状元素上面，内链元素是不起作用的，大家复制下面的代码，运行一下瞅瞅，在a标签中不起作用，div标签就有效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS学习网</title>
<style type="text/css">
.suojin{text-indent:2em; background:#ddd;}
</style>
</head>
<body>
<a href=http://www.cssxuexi.cn/ class="suojin">CSS学习网Web前段开发人员的专业社区，欢迎大家的到来</a><br />
<div class="suojin">CSS学习网Web前段开发人员的专业社区，欢迎大家的到来</div>
</body>
</html>

【本节作业】

要求：

制作一个宽度为300px，高度自适应，边框宽度为5像素且颜色为灰色(#999)的区域，id为div1；
在div1内部有两段文字，文字大小为12像素，这两段文字首行分别缩进两个文字；
CSS用内嵌方式；
暂不考虑页面对各种浏览器的兼容性，只在一种浏览器中实现上面效果就可以




Tag标签：DIV+CSS XHTML和XML 结构、表现、行为 css XML+CSS

【关闭窗口】【打印此页】

上一篇文章：【小技巧一】单图片按钮实例

推荐产品

相关信息

服务项目: 长沙短信群发,长沙办公自动化建设，长沙网站建设，长沙网页设计，长沙人事管理系统，长沙OA办公系统，长沙软件定制开发，长沙短信平台开发，长沙邮件系统，长沙IDC托管服务，长沙SEO优化,长沙短信群发,长沙短信群发平台,长沙短信平台,长沙短信公司,长沙短信群发公司,长沙短信群发服务公司

友情链接: 长沙短信群发平台长沙短信群发公司芙蓉区东岸乡锦林社区网湖南数据中心

在线咨询QQ：21543821 、895078010 、183932503
Copyrigh ® 2006-2008 长沙软智科技有限公司版权所有技术支持：长沙软智科技有限公司软件开发部
地址：长沙市芙蓉区火车站凯通国际二栋三单元(天心电脑城南边)
联系人：雷经理电话：0731-84454366 84480976 手机：13873166650
邮箱：ruanzhitech@126.com 湘ICP备：08103883号