CSS Text(文本)属性： 定义文本外观，颜色，装饰，缩进，行间距来修饰文本

文本样式

• 文本缩进 text-indent
• 文本水平对齐方式：text-align
• 文本修饰：text-decoration
• 行高 line-height

CSS文本颜色属性color

常见颜色

1. 默认取法

• 基本色
• skyblue：天蓝色
• pink：粉色

2. rgb表示法

• rgb(255,0,0) : 红色
• rgb(0,255,0) : 绿色
• rgb(0,0,255) : 蓝色
• rgb(0,0,0)：黑色
• rgb(255,255,255)：白色

透明度a

a的取值范围:0-1

• 完全不透明：1
• 完全透明: 0

举个栗子

 .blue {/* 文本颜色属性color */color: blue;  }.red {/* 文本颜色也可以用十六进制定义 # + 6位 *//* 颜色一般不用记忆，一般都是用吸管工具吸取 */color: #f10c0c;/*color: #ff00ff 可以写成 color: #f0f*/}/* 文本颜色也可以用RGB代码定义 rgb（100,25,67）/rgb(20%,15%,26%) */.yellow {color: rgb(201, 245, 7);}

    
我是蓝色
我是红色
我是黄色

CSS文本对齐taxt-align

基本介绍

text-align属性用于设置元素内文本内容的水平对齐方式

元素文本对齐方式text-align属性
text-align的对齐方式有 right,left,center

注意：如果想让哪一个标签内的文本水平居中，text-align直接加入文本的父类元素，也就是上一级元素

举个栗子

 .p1 {/* text-align的对齐方式有right,left,center *//* text-align设置元素文本居中对齐 */text-align:center;/* text-align:left; *//* text-align:right; */}.p2 {text-align: right;}.p3 {text-align: left;}

  
我是居中p标签
我是向右p标签
我是向左p标签

text-align能使哪些元素水平居中

• 文本
• span标签，a标签
• input标签，img标签
  如果这些是子元素，那么将属性设置在父类标签

CCS文本修饰线属性 text-deccoration

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线，删除线，上划线

开发中会使用text-decoration：none，清除a标签默认的下划线

1.下划线 text-decoration: underline 最常用
2.取消下划线text-decoration: none 最常用
3.上划线text-deccoration: overline
4.删除线text-decoration: line-through

举个栗子

.p1 {/* 下划线 */text-decoration: underline;}/* 一般网页链接都没下划线，所以直接标签选择器a 在css设置去线就行 */.p2 {/* 去掉下划线 */text-decoration: none;}.p3 {/* 上划线 */text-decoration: overline;}.p4 {/*删除线  */text-decoration: line-through;}

    
我是p标签,我有下划线
我是a标签,我要去掉下划线
我是p标签,我有上划线
我是p标签,我有删除线

CSS文本首行缩进text-indent(em)

注：

1. text-indent 属性用于指定文本的第一行的缩进，一般指段落的首行缩进
2. h1-h6，p标签都不缩进
3. em是一个相对单位，就是当前元素（font-size）,1个文字的大小,如果当前元素没有设置字体大小，则按照父元素的1个文字大小

举个栗子

/* 此时定义首行缩进20px（像素） */.p1 {text-indent: 20px ;}/* 此时可以设置数值em单位 */.p2 {text-indent: 2em;}/* 向左突出20像素 */.p3 {text-indent: -20px;}

我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签
我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px
我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em
我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素

CSS的行高 line-height

行高的作用： 控制一行的上下间距

应用：

1. ?使单行文本垂直居中可以设置line-height：文字父元素高度
2. 网页精准布局时，会设置line-height，可以取消上下间距

特点：

1. 行高指的是文字占有的实际高度
2. 可以通过line-height来设置行高
3. 行高经常用来设置文字的行间距

取值：

1. 数字+px/em
2. 单个数字（倍数，当前标签font-size的倍数）

举个栗子

.p1 {line-height: 16px;}.p2 {font-size: 30px;line-height: 60px;}

div class="p1">我是div标签,我的行高是16px,字体是16px,我是div标签,我的行高是16px,字体是16px,我是div标签，我的行高是16px,字体是16px,我是div标签,我的行高是16px,字体是16px,我是div标签，我的行高是16px,字体是16px,