04-文本缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS文本外观之文本缩进</title>
<style>
p {
font-size: 24px;
/* 文本的第一行(首行)缩进 */
/* text-indent: 10px; */
/* 如果此时写了2em,则是缩进当前元素2个文字的大小 */
text-indent: 2em;
}
</style>
</head>
<body>
<p>我在电视上看见过北京，她是那么雄伟，那么壮观，让我心里充满了想去北京的愿望。北京城的中央是雄伟的天安门，红墙、黄瓦，既壮观又美丽。天安门前面是宽阔的广场，广场上矗立着雄伟、壮观的人民英雄纪念碑……</p>
<p>北京有许多又宽又长的柏油马路，马路上的车辆川流不息，马路两旁绿树成荫，鲜花盛开。北京还有许多立交桥，立交桥的四周有绿毯似的草坪和拼成图案的花园，美丽极了!</p>
<p>每当夜幕降临的时候，北京就亮起来了。马路上一串串明亮的车灯，好像闪光的长河，奔流不息。高楼大厦的霓虹灯光彩夺目，好像五颜六色的焰火，洒落人间……</p>
</body>
</html>
效果展示
05-行间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS文本外观之行间距</title>
<style>
div {
line-height: 26px;
}
p {
line-height: 25px;
}
</style>
</head>
<body>
<div>中国人</div>
<p>我在电视上看见过北京，她是那么雄伟，那么壮观，让我心里充满了想去北京的愿望。北京城的中央是雄伟的天安门，红墙、黄瓦，既壮观又美丽。天安门前面是宽阔的广场，广场上矗立着雄伟、壮观的人民英雄纪念碑……</p>
<p>北京有许多又宽又长的柏油马路，马路上的车辆川流不息，马路两旁绿树成荫，鲜花盛开。北京还有许多立交桥，立交桥的四周有绿毯似的草坪和拼成图案的花园，美丽极了!</p>
<p>每当夜幕降临的时候，北京就亮起来了。马路上一串串明亮的车灯，好像闪光的长河，奔流不息。高楼大厦的霓虹灯光彩夺目，好像五颜六色的焰火，洒落人间……</p>
</body>
</html>
效果展示
版权声明：本文为WangZhang_521原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。