一、行间距
<!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>
二、文本样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1 {
/*
* text-transform可以用来设置文本的大小写
* 可选值：
* none 默认值，该怎么显示就怎么显示，不做任何处理
* capitalize 单词的首字母大写，通过空格来识别单词
* uppercase 所有的字母都大写
* lowercase 所有的字母都小写
*/
text-transform: uppercase;
}
.p2 {
/*
* text-decoration可以用来设置文本的修饰
* 可选值：
* none：默认值，不添加任何修饰，正常显示
* underline 为文本添加下划线
* overline 为文本添加上划线
* line-through 为文本添加删除线
*/
text-decoration: overline;
}
a {
/*超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline
如果需要去除超链接的下划线则需要将该样式设置为none
* */
text-decoration: none;
}
.p3 {
/**
* letter-spacing可以指定字符间距
*/
/*letter-spacing: 10px;*/
/*
* word-spacing可以设置单词之间的距离
* 实际上就是设置词与词之间空格的大小
*/
word-spacing: 120px;
}
.p4 {
/*
* text-align用于设置文本的对齐方式
* 可选值：
* left 默认值，文本靠左对齐
* right ， 文本靠右对齐
* center ， 文本居中对齐
* justify ， 两端对齐
* 通过调整文本之间的空格的大小，来达到一个两端对齐的目的
*/
text-align: justify;
}
.p5 {
font-size: 20px;
/*
* text-indent用来设置首行缩进
* 当给它指定一个正值时，会自动向右侧缩进指定的像素
* 如果为它指定一个负值，则会向左移动指定的像素,
* 通过这种方式可以将一些不想显示的文字隐藏起来
* 这个值一般都会使用em作为单位
*/
text-indent: 2em;
/*text-indent: -40px;*/
}
</style>
</head>
<body>
<p class="p5">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。
他仿佛要离开人间而去，使人们仰面不再看见。
</p>
<h1 class="p4">我是一个h1</h1>
<p class="p4">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。
再看见。
</p>
<p class="p4">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
“Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait.
He was an old man, past fifty, and he had seen the lordlings come and go.
</p>
<p class="p3">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。
他仿佛要离开人间而去，使人们仰面不再看见。
</p>
<p class="p3">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
“Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile.
</p>
<a href="#">我是超链接</a>
<p class="p2">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
“Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile.
</p>
<p class="p1">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
“Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile.
</p>
</body>
</html>
