设置前:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置文本样式</title>
</head>
<body>
<p id="p1">这是一个段落内容。</p>
<p id="p2">这是一个段落内容。</p>
<p id="p3">这是一个段落内容。</p>
<p id="p4">这是一个段落内容。</p>
<a href="#">这是一个链接。</a>
<p id="p5">这是一个段落内容。</p>
</body>
</html>
设置后:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置文本样式</title>
<style>
#p1 {
color: violet;
}
#p2 {
text-align: left;
}
#p3 {
text-align: center;
}
#p4 {
text-align: right;
}
a {
/* 去除下划线 */
text-decoration: none;
}
#p5 {
/* 缩进元素中文本的首行 */
text-indent: 50px;
}
</style>
</head>
<body>
<p id="p1">这是一个段落内容。</p>
<p id="p2">这是一个段落内容。</p>
<p id="p3">这是一个段落内容。</p>
<p id="p4">这是一个段落内容。</p>
<a href="#">这是一个链接。</a>
<p id="p5">这是一个段落内容。</p>
</body>
</html>
关于vertical-align的使用:可以参考这篇文章的讲解