文本样式控制
在网页布局中,文本不仅仅是内容的载体,更是视觉引导的关键。CSS 提供了丰富的属性来精细控制文字的呈现效果。下面是一个完整的示例,展示了常用文本属性的组合用法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS 文本样式</title>
<style type="text/css">
.p1 {
text-transform: lowercase; /* 强制转换为小写 */
}
.p2 {
text-decoration: line-through; /* 删除线 */
}
a {
text-decoration: none; /* 移除链接默认下划线 */
}
.p3 {
word-spacing: 120px; /* 增加单词间距 */
}
.p4 {
text-align: justify; /* 两端对齐 */
}
.p5 {
font-size: 20px;
text-shadow: 2px 2px 4px #ccc; /* 添加阴影效果 */
}
</style>
</head>
<>
HELLO WORLD
这是一段带删除线的文字
这是一个没有下划线的链接
Word Spacing Test
这段文字会尝试两端对齐,填充空白区域。
带有阴影效果的标题

