前言
- 系列文章目录：
- 根据视频和PPT整理
- 视频及对应资料：
- HTML CSS
CSS 文本属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
1 文本颜色
color 属性用于定义文本的颜色。
color的取值：
- 颜色的名称，red，blue，green等等
- 十六进制表示，如 #FF0000 (其中，前两位代表red，中间两位代表green，最后两位代表blue)(每两位取值 00-FF)
- rgb，如，rgb(255,255,255)，第一个数red，第二个数green，第三个数blue(每个数取值俯范围 0-255)
十六进制表示和 rgb 类似于使用红色、绿色、蓝色根据浓度用量进行调色。
开发中最常用的是十六进制.
<body>
<div class="color">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus, libero! Ad praesentium autem impedit doloremque eveniet nisi at maiores, vitae in aspernatur amet corrupti. Id et quaerat dignissimos dicta delectus!</div>
<div class="six">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus, libero! Ad praesentium autem impedit doloremque eveniet nisi at maiores, vitae in aspernatur amet corrupti. Id et quaerat dignissimos dicta delectus!</div>
<div class="rgb">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus, libero! Ad praesentium autem impedit doloremque eveniet nisi at maiores, vitae in aspernatur amet corrupti. Id et quaerat dignissimos dicta delectus!</div>
</body>
<style>
.color {
color: red;
}
.six {
color: #FF0000;
}
.rgb {
color: rgb(255, 255, 0);
}
</style>
可以点击颜色的小方块进行调色
2 对齐文本
text-align 属性用于设置元素内文本内容的水平对齐方式。
text-align取值：
- left：文字左对齐(默认值)
- right：文字右对齐
- center：文字居中
<body>
<h1 class="left">文本左对齐(默认)</h1>
<h1 class="right">文本右对齐</h1>
<h1 class="center">文本居中</h1>
</body>
<style>
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
</style>
3 装饰文本
text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
text-decoration：
- none：默认，没有装饰线
- underline：下划线
- overline：上划线
- line-through：删除线
行内样式(不推荐该写法)，后面讲解
标签的style属性用于在标签内使用css设置标签的样式
<body>
<h2 style="text-decoration: none;">默认</h2>
<h2 style="text-decoration: underline;">下划线</h2>
<h2 style="text-decoration: overline;">上划线</h2>
<h2 style="text-decoration: line-through;">删除线</h2>
</body>
3.1 去除超链接的下划线
<a href="#">没有下划线的超链接</a>
<style>
a {
text-decoration: none;
}
</style>
4 文本缩进
text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
<p class="demo1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita autem rem explicabo placeat in, animi labore. Tenetur, velit dolorem dolorum magni maiores ullam facere voluptate? Deleniti laborum nobis vel ab.</p>
<p class="demo2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita autem rem explicabo placeat in, animi labore. Tenetur, velit dolorem dolorum magni maiores ullam facere voluptate? Deleniti laborum nobis vel ab.</p>
.demo1 {
/* 文本的第一行首行缩进 多少距离 */
text-indent: 10px;
}
.demo2 {
text-indent: -20px;
}
em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。
<p class="demo3">通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita autem rem explicabo placeat in, animi labore. Tenetur, velit dolorem dolorum magni maiores ullam facere voluptate? Deleniti laborum nobis vel ab.</p>
.demo3 {
/* 2em 则是缩进当前元素 2个文字大小的距离 */
text-indent: 2rem;
}
5 行间距
line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离.
<body>
<div class="demo1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque eveniet ut praesentium atque debitis molestias modi placeat explicabo perferendis, reiciendis quis nam deleniti maxime officia corrupti, dolorem recusandae quibusdam alias.</div>
<div class="demo1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque eveniet ut praesentium atque debitis molestias modi placeat explicabo perferendis, reiciendis quis nam deleniti maxime officia corrupti, dolorem recusandae quibusdam alias.</div>
<div class="demo2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque eveniet ut praesentium atque debitis molestias modi placeat explicabo perferendis, reiciendis quis nam deleniti maxime officia corrupti, dolorem recusandae quibusdam alias.</div>
<div class="demo2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque eveniet ut praesentium atque debitis molestias modi placeat explicabo perferendis, reiciendis quis nam deleniti maxime officia corrupti, dolorem recusandae quibusdam alias.</div>
</body>
<style>
.demo1 {
/* 行高为一个文字的高度 */
line-height: 1rem;
}
.demo2 {
/* 行高为3个文字的高度 */
line-height: 3rem;
}
</style>
6 文本属性总结
本文含有隐藏内容，请 开通VIP 后查看