文本样式(颜色 对齐方式 首行缩进等，常用方式)

文本样式

1. 颜色

h1{
    color:red;  /*red 为红色*/
    color:rgb(0,22,235);/*用RGB类型来选择颜色*/
    color:rgba(0,23,214,0.5);/*多了一个不透明度 值0-1之间*/
}

1. 文本对齐方式

h1{
text-align:center;  /*居中*/
    text-align:left;/*向左*/
    text-align:right;/*向右*/
}

1. 首行缩进

h1{
    text-indent:2em;  /*当然也可以用px 不过建议还是用em*/
/*em是字符单位 px是像素单位*/
}

1. 行高

h1{
    height：300px;   /*指这一行的宽度*/
    line-height：80px;/*指文字的行高*/
}

1. 装饰

h1{
    text-decoration:underline;/*下划线*/ 
text-decoration:line-through; /*中划线*/
text-decoration:overline;/*上划线*/
    text-decoration:none;  /*取消线条*/
}

颜色

我们把之前的文字给粘贴进来

在style标签中给h1标签添加颜色

color:red;

我们都知道， 变成红色

color:rgb()；

是用RGB的数值来调节颜色

color:rgba();

根RGB一样，但是多了一个不透明度a

不投明度的值是0-1之间

文本对齐方式

h1{

text-align:center;

}

center 是文字居中的意思

left 文字向左

right 文字向右

首行缩进

text-indent：2em

是首行缩进2个字符的意思

em 单位是 字符

2em 就是 2个字符

当然我们也可以用px

但是px是像素的意思

用起来值可能会设置不准，

所以推荐用em

行高

我们先给背景上个简单的青色

height是行高的意思

line-height 是这段文字的行高

这是行高300px 文字行高80px 的样子

这是行高300px 文字高300px的样子

注意

当行高 与文字行高一样时，文字呈现居中状态

就是 line-height = height

的时候

装饰

underline 是下划线的意思

line-through 是中划线的意思

overline 是上划线的意思

none 是没有的意思

可以用来去除下划线

图片与文字水平对齐

我们写一个图片标签

浏览器打开

就会发现文字在图片的右下角，

我们要让他与图片水平对齐的话，有一个方法

img，span{

vertical-align:middle;

}****

这段代码的意思是，与什么对齐

需要一个参照物

img图片为参照物

spen文字对齐

浏览器打开一下