目录

8.6、CSS段落排版--缩进text-indent

2017年08月28日 08:46 | 2555次浏览 作者原创 版权保护

中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:

p{text-indent:2em;}

<p>1922年的春天,一个想要成名名叫尼克卡拉威(托比?马奎尔Tobey Maguire 饰)的作家,
离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。
为了追寻他的美国梦,他搬入纽约附近一海湾居住。</p>

注意:2em的意思就是文字的2倍大小。


练习

新建示例页面demo.html,示例代码如下

我也来试试,为文本段设置2个空格缩进

1.在示例页面代码中的第7行,输入下面代码:

p{text-indent:2em;}

示例代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>缩进样式</title>
<style type="text/css">

</style>
</head>
<body>
    <h1>了不起的盖茨比</h1>
    <p>1922年的春天,一个想要成名名叫尼克?卡拉威(托比?马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。</p>    
    <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>


总结

第一、em与px之间怎么换算?

         *任意浏览器的默认字体高度16px(16像素)。

        *所有未经调整的浏览器都符合:1em=16px。

       *那么12px=0.75em,10px=0.625em。

     为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

 注:建议不要使用em作为中文站点的文字单位,会导致文字变形十分严重的。



小说《我是全球混乱的源头》
此文章本站原创,地址 https://www.vxzsk.com/1354.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程