蓝桥杯Web应用开发-CSS 基础语法3（文本属性）
CSS 基础语法-文本属性
专栏持续更新中
文本属性
文本属性用于定义文本的样式，通过文本属性，可以改变文本的颜色、字间距、对齐方式、文本修饰和文本缩进等。常用文本属性如下表所示：
| 属 性 | 可取值 | 描述 |
|---|---|---|
| line-height | normal、number、length、% | 设置行高 |
| text-indent | length、% | 设置文本缩进 |
| text-align | left、right、center、justify、start、end | 设置对齐方式 |
| letter-spacing | normal、length | 设置字符间距 |
| text-decoration | line、color、style、thickness | 设置文本修饰 |
| white-space | normal、pre、nowrap、pre-wrap、pre-line、break-spaces | 规定如何处理空白 |
| line-break | auto、loose、normal、strict、anywhere、unset | 处理如何断开带有标点符号的文本的行 |
这里只给大家介绍两个最常用的文本属性 line-height 和 text-decoration。
line-height 的使用
line-height 用于设置多行元素的空间量，可取值具体说明如下：
• normal：取决于用户端。
• number：数字乘以元素的字体大小。
• length：指定长度用于计算高度。
• %：计算值是给定的百分比值乘以元素计算出的字体大小。
新建一个 index11.html 文件，在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>line-height 的使用</title>
<style>
div {
width: 300px;
height: 400px;
border: 1px solid;
font-size: 15px;
display: inline-block;
vertical-align: top;
}
.div1 {
line-height: 2; /*15 * 2*/
}
.div2 {
line-height: 30%; /*15 * 30% */
}
</style>
</head>
<body>
<div class="div1">
<p>“海水呀，你说的是什么？”</p>
<p>“是永恒的疑问。”</p>
<p>“天空呀，你回答的话是什么？”</p>
<p>“是永恒的沉默。”</p>
</div>
<div class="div2">
<p>“海水呀，你说的是什么？”</p>
<p>“是永恒的疑问。”</p>
<p>“天空呀，你回答的话是什么？”</p>
<p>“是永恒的沉默。”</p>
</div>
</body>
</html>
text-decoration 的使用
text-decoration 属性用于设置文本的装饰线，例如给文本加下划线、中划线、波浪线等。可取值具体说明如下：
• none: 默认值，表示没有任何装饰效果。
• underline: 在文本下方添加下划线。
• overline: 在文本上方添加上划线。
• line-through: 在文本中间添加删除线。
• underline overline: 同时添加上划线和下划线。
• underline line-through: 同时添加下划线和删除线。
• overline line-through: 同时添加上划线和删除线。
• underline overline line-through: 同时添加上划线、下划线和删除线。
其他用法：
• text-decoration-line 设置线的位置，可取值包含：underline（下划线）、overline（上划线）、line-through（中划线）。
• text-decoration-color 设置线的颜色。
• text-decoration-style 设置线的样式，可取值包含：wavy（波浪线）、solid（实线）、dashed（虚线）。
• text-decoration-thickness 设置线的粗细。
新建一个 index12.html 文件，在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>text-decoration 的使用</title>
<style>
.item1 {
text-decoration: underline lime; /*下划线直线*/
}
.item2 {
text-decoration: wavy overline lime; /*上划线波浪线*/
}
.item3 {
text-decoration: line-through lime; /*中划线*/
}
.item4 {
text-decoration: none; /*无样式*/
}
.item5 {
text-decoration: dashed underline overline lime 5px; /*圆点上划线和下划线*/
}
</style>
</head>
<body>
<p class="item1">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
<p class="item2">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
<p class="item3">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
<p class="item4">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
<p class="item5">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
</body>
</html>
原文地址：https://blog.csdn.net/weixin_46226014/article/details/135961070
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！