头闻号

武汉百木商业有限公司

护肤膏霜|洗面奶|沐浴液|洗发精

首页 > 新闻中心 > 科技常识:CSS 首行缩进两个文字
科技常识:CSS 首行缩进两个文字
发布时间:2024-12-23 18:38:16        浏览次数:4        返回列表

今天小编跟大家讲解下有关CSS 首行缩进两个文字 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS 首行缩进两个文字 的相关资料,希望小伙伴们看了有所帮助。

总是在前面加上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;">CSS学习网,提倡资源共享“分享才能更快乐” 每个人在分享资源的时候 同时也获得了人气和尊重 你将会有更多的同行朋友 团结在你的周围 成为你的左膀右臂. </div> </body> </html> 【本节作业】 要求: 制作一个宽度为300px 高度自适应 边框宽度为5像素且颜色为灰色(#999)的区域 id为div1; 在div1内部有两段文字 文字大小为12像素 这两段文字首行分别缩进两个文字; CSS用内嵌方式; 暂不考虑页面对各种浏览器的兼容性 只在一种浏览器中实现上面效果就可以

来源:爱蒂网