👨💻个人主页:@花无缺
欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!
本文由 花无缺 原创本文章收录于专栏 【CSS】
【CSS专栏】已发布文章
📁【CSS基础认知】
📁【CSS选择器全解指南】
📁【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="zh-CN">
<head>
<meta charset="UTF-8">
<title>花无缺</title>
<style>
p {
color: blue;
}
span {
color: pink;
}
</style>
</head>
<body>
<p>这是一句话,被设置成了蓝色</p>
<span>这是另一句话,被设置成了粉色</span>
</body>
</html>
🌙文本缩进
属性名:text-indent
取值:
- 数字+px
- 数字+em
例如:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>花无缺</title>
<style>
p {
text-indent: 32px;
}
</style>
</head>
<body>
<p>这是一句话,设置文本缩进32px,相当于两个汉字的距离</p>
<span>这是另一句话,没有设置文本缩进</span>
</body>
</html>
🌙文本对齐
🌏水平对齐
🌸一般水平对齐
属性名:text-align
作用:用于设置文本的水平对齐方式
取值:
属性值 | 效果 |
---|---|
left | 文本左对齐 |
center | 文本居中对齐 |
right | 文本右对齐 |
justify | 文本两端对齐 |
注意:属性设置为 “justify” 后,将拉伸每一行,以使每一行具有相等的宽度
例如:
<!DOCTYPE html>
<html lang="zh-CN">
<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>花无缺</title>
<style>
.a1 {
text-align: center;
}
.a2 {
text-align: left;
}
.a3 {
text-align: right;
}
.a4 {
width: 100px;
height: 90px;
float: left;
background-color: pink;
text-align: justify;