一、CSS文本属性
CSS Text(文本)属性可以定义文本的外观,比如文本的颜色、对齐方式、装饰文本、文本缩进、行间距等。
1. 文本颜色
color属性用于定义文本的颜色。
1.1 使用方式
div {
color: red;
}
表示 | 属性值 |
预定义的颜色值 | red,green,blue,pink |
十六进制 | #FF0000,#F6600,#29D794 |
RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
- 开发中最常用的是十六进制
2. 对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式。
2.1 使用方式
div {
text-align: center;
}
属性值 | 解释 |
left | 左对齐(默认值) |
right | 右对齐 |
center | 居中对齐 |
3. 装饰文本
text-decoration属性规定添加到文本的装饰。可以给文本添加下划线、删除线、上划线等。
3.1 使用方式
div {
text-decoration: underline;
}
属性值 | 描述 |
none | 默认。没有装饰线(最常用) |
underline | 下划线。链接 a 自带下划线(常用) |
overline | 上划线。(几乎不用) |
line-through | 删除线。(不常用) |
4. 文本缩进
text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。
4.1 使用方式
div {
text-indent: 10px;
}
em是一个相对单位,就当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小。
p {
text-indent: 2em;
}
5. 行间距
line-height属性用于设置行间的距离(行高),可以控制文字行与行之间的距离。
5.1 使用方式
p {
line-height: 26px;
}
行间距有上间距、文本高度及下间距三部分组成,可以通过测量得到。
6. 总结
属性 | 表示 | 注意点 |
color | 文本颜色 | 通常用十六进制,比如#ff0000 |
text-align | 文本对齐 | 可以设定文字水平对齐方式 |
text-indent | 文本缩进 | 通常于段落首行缩进2个字的距离 text-indent: 2em; |
text-decoration | 文本装饰 | 重点在 添加下划线:underline,取消下划线:none |
line-height | 行高 | 控制行与行之间的距离 |
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS文本属性</title>
<style>
div {
/* color: deeppink; */
/* color: #ff008c; */
color: rgb(255, 0, 128); text-decoration: overline; line-height: 26px;
}
h2 {
text-align: center;
}
a {
text-decoration: none;
}
p {
/* 文本首行缩进 多少距离,可以写负值 */
/* text-indent: 30px; */
/* 如果此时写了2em,则是当前元素 2 个文字大小的距离 */
text-indent: 2em; line-height: 24px;
}
</style>
</head>
<body>
<div> 名侦探柯南过去了二十年,柯南还在上小学一年级 </div>
<h2>文本对齐</h2>
<!-- <div>下划线</div> -->
<div>上划线</div>
<!-- <div>删除线</div> -->
<a href="01-标签选择器.html"> 去除链接自带的下划线 </a>
<p>·······················································································</p>
<p>·······················································································</p>
<p>·······················································································</p>
</body>
</html>