CSS外观（文本）属性

1.color：文本颜色

color属性用于定义文本的颜色，其取值方式有如下3种：

1.预定义的颜色值，如red，green，blue等。

2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

2.line-height：行间距

ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

一般情况下，行距比字号大7.8像素左右就可以了。

示例：

   <style>
        span{
            color: #ff0000;
            font-size: 20px;
            line-height: 28px;
        }
    </style>

<span>
    在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。
</span>

前：

后：

3.text-align：水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）

right：右对齐

center：居中对齐

注意：是让盒子里面的内容水平居中，而不是让盒子居中对齐

示例：

    <style>
        h1{
            color: #ff0000;
            font-size: 20px;
            line-height: 28px;
            text-align: center;
        }
    </style>

<h1>
    The violent have violent ends.
</h1>

4.text-indent：首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度如果是汉字的段落， 1em 就是一个汉字的宽度。

示例：

    <style>
        p{
            color: #ff0000;
            font-size: 20px;
            line-height: 28px;
            text-indent: 2em;
            /*text-align: center;*/
        }
    </style>

<p>
    在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。
</p>

前：

后：

5.text-decoration：文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

示例：

    <style>
        p{
            color: #ff0000;
            font-size: 20px;
            line-height: 28px;
            text-indent: 2em;
            /*text-align: center;*/
        }
        .underline{
            text-decoration: underline;
        }
        .overline{
            text-decoration: overline;
        }
        .line-through{
            text-decoration: line-through;
        }
        .none{
            text-decoration: none;
        }
    </style>

<p class="underline">
    The violent delights have violent ends.
</p>
<p class="overline">
    The violent delights have violent ends.
</p>
<p class="line-through">
    The violent delights have violent ends.
</p>
<a href="#" class="none">
    The violent delights have violent ends.
</a>

效果：

text-decoration: none 多用于给超链接文字去掉下划线

【前端】【html/css】前端学习之路（三）：CSS外观（文本）属性