<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS文本样式示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
line-height: 1.6; /* 设置行高 */
}
h1 {
text-align: center; /* 文本居中 */
color: #333; /* 设置颜色 */
}
.text-container {
width: 70%;
margin: auto;
border: 1px solid #ddd;
padding: 20px;
background-color: #f9f9f9;
}
.text-indent {
text-indent: 2em; /* 首行缩进 */
}
.letter-spacing {
letter-spacing: 2px; /* 字符间距 */
}
.line-height {
line-height: 5; /* 行高 */
}
.text-transform {
text-transform: uppercase; /* 转换为大写 */
}
.word-spacing {
word-spacing: 10px; /* 单词间距 */
}
.text-shadow {
text-shadow: 2px 2px 5px rgba(0,0,0,0.3); /* 文字阴影 */
}
</style>
</head>
<body>
<h1>CSS文本样式示例</h1>
<div class="text-container">
<p class="text-indent">这是一个首行缩进的例子。</p>
<p class="letter-spacing">这是设置了字符间距的文本。</p>
<p class="line-height">这是设置了行高的文本，使得文本更加易读。</p>
<p class="text-transform">这是将所有字母转换成大写的例子：This is an example of converting all letters to uppercase。</p>
<p class="word-spacing">这是增加了单词之间间距的例子：This is an example of increasing the spacing between words.</p>
<p class="text-shadow">这是应用了文字阴影效果的文本。</p>
</div>
</body>
</html>
