CSS文本样式（详解）

阅读：评论：0

CSS文本样式（详解）

CSS文本样式

🍧 文本颜色
🧁文本缩进
🍨文本对齐
🍥文本行高
🥝文本装饰

🍧 文本颜色

属性：color
作用：设置文本颜色
属性值：

颜色表示方式	表示含义	属性值
颜色名称	预定义的颜色名	red、green、blue…
RGB表示法	红绿蓝三原色，每项取值范围:0~255	rgb(0，0，0)、rgb(255，255，255)
RGBa表示法	红绿蓝三原色+a表示透明度，取值范围是0~1	rgba(255，255，255，0.5)、rgba（255，0，0，0.3）
十六进制表示法	以#开头，将数转换成十六进制表示	#000000、#ff0000、#e92322，简写：#000、#f00

代码测试：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{color: skyblue;	//英文定义}p{color: rgb(255 ,193, 203);	//RGB定义}span{color: #7FFFD4FF;	//十六进制}</style>
</head>
<body>
<span>将进酒</span>
<div>人生得意须尽欢</div>
<p>莫使金樽空对月</p>
</body>
</html>

效果如下：

🧁文本缩进

属性名：text-indent
作用：设置首行文本的缩进
语法：
text-indent：数字+px
text-indent：数字+em（1em代表一个字）
代码测试

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{text-indent: 2em;}</style>
</head>
<body>
<p>将进酒</p>
<div>人生得意须尽欢</div>
<p>莫使金樽空对月</p>
</body>
</html>

效果如下

🍨文本对齐

属性名：text-align

作用：用于设置文本的水平对齐方式

取值：

属性值	效果
left	文本左对齐
center	文本居中对齐
right	文本右对齐
justify	文本两端对齐

代码测试：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.a1{background-color: pink;text-align: center;}.a2{background-color: orange;text-align: left;}.a3{background-color: red;text-align: right;}.a4{background-color: #00d2d3;text-align: justify;}</style>
</head>
<body>
<p class="a1">文本水平居中对齐</p><p class="a2">文本左对齐</p><p class="a3">文本右对齐</p><div class="a4">文本两端对齐，文本两端对齐，文本两端对齐</div></body>
</html>

效果如下:

🍥文本行高

属性名：line-height

作用：控制文本行与行之间的距离

取值：

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。

代码测试：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.a1{background-color: pink;line-height: 36px;}.a2{background-color: #00d2d3;line-height: 360%;}</style>
</head>
<body>
<div>Java是一门面向对象的编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。
</div>
<div class="a1">Java是一门面向对象的编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。
</div><p></p>
<div>Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等20世纪90年代，硬件领域出现了单片式计算机系统，这种价格低廉的系统一出现就立即引起了自动控制领域人员的注意，因为使用它可以大幅度提升消费类电子产品（如电视机顶盒、面包烤箱、移动电话等）的智能化程度。
</div>
<div class="a2">Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等20世纪90年代，硬件领域出现了单片式计算机系统，这种价格低廉的系统一出现就立即引起了自动控制领域人员的注意，因为使用它可以大幅度提升消费类电子产品（如电视机顶盒、面包烤箱、移动电话等）的智能化程度。
</div>
</body>
</html>

效果如下：

🥝文本装饰

属性名：text-decoration

作用：设置文本的装饰

取值：

属性值	效果
underline	下划线
line-through	删除线
overline	上划线
none	无装饰线

代码测试

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.a1{background-color: pink;text-decoration:underline ;}.a2{background-color: #00d2d3;text-decoration: line-through;}.a3{background-color: orange;text-decoration: overline;}.a4{background-color: fuchsia;text-decoration: none;}</style>
</head>
<body>
<p class="a1">下划线效果</p><p class="a2">删除线效果</p><p class="a3">上划线效果</p><p class="a4">无装饰线</p>
</body>
</html>

效果如下：

⭐最后⭐