行间距和文本样式
一、行间距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* CSS并没有提供一个直接设置行间距的方式，只能通过设置行高来间接的设置行间距，行高越大行间距越大
* 使用line-height来设置行高
* 行高类似于单线本，单线本是一行一行，线与线之间的距离就是行高，
* 网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示
*
* 行间距 = 行高 - 字体大小
*/
.p1 {
font-size: 20px;
/*
* 通过设置line-height可以间接的设置行高，
* 可以接收的值：
* 1.直接就收一个大小
* 2.可以指定一个百分数，则会相对于字体去计算行高
* 3.可以直接传一个数值，则行高会设置字体大小相应的倍数
*/
/*line-height: 200%;*/
line-height: 2;
}
.box {
width: 200px;
height: 200px;
background-color: #bfa;
/*
* 对于单行文本来说，可以将行高设置为和父元素的高度一致，
* 这样可以是单行文本在父元素中垂直居中
*/
line-height: 200px;
}
.p2 {
/*
* 在font中也可以指定行高
* 在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值
*/
font: 30px/50px "微软雅黑";
line-height: 50px;
}
</style>
</head>
<body>
<p class="p2">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。
</p>
<div class="box">
<a href="#">我是一个超链接</a>
</div>
<p class="p1">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。
</p>
</body>
</html>
更多精彩
