写页面对文本进行优化也是占据了一部分的时间.

本节就学习一些, 可以文本相关的属性.

一. 文本缩进

将一个段落的第一行缩进, 是一种非常常见的文本格式化效果.

有人用一个透明图片把文本往后推, 好像缩进了. 更有人会用空格来缩进, 这都不是很好的选择.

text-indent可以非常方便的给段落缩进.

<style>
div{
    width: 500px;
}
div p{
    text-indent: 2em;/*缩进连个字符的宽度*/
}
</style>
<div>
    <p>林志玲（Lin Chi-Ling，1974年11月29日－），为台湾著名模特儿、主持人、女演员，出生于中华民国台北市，毕业于加拿大多伦多大学西方美术史、经济学双主修学士学位。</p>
    <p>林志玲在2004年迅速窜红，风靡大街小巷，带起一股“林志玲热”，让模特儿不再局限于平面、走秀，开始纷纷跨足影视娱乐产业[3]。近几年林志玲频频参与影视演出，包括于2008年在电影《赤壁》中饰演小乔与2010年日剧《月之恋人》中担任女主角，也应邀担任2010年台北国际花卉博览会亲善大使，2011年8月，首度登上日本银座挑战舞台剧“赤壁-爱-”，演技及票房表现获得一致好评。[4]</p>
    <p>2015年11月20日开设官方Instagram，也是林志玲继微博之后第二个网络社群平台。[5] 2017年新春成立林志玲工作室打理经纪业务[6]，并于6月开设官方Facebook专页。[7]</p>
</div>

说明:

• text-indent可以应用到所有的块级元素上, 不能用在行内元素上

• 但是大部分情况下, 还是用在<p>元素上.

二. 文本水平对齐text-aligh

也是用在块级元素上.

处理元素中的文本水平方向的对齐方式.

主要是常用 4 个值:

left 左对齐 right 右对齐 center居中 justify文字向两侧对齐，对最后一行无效。

<style>
p {
    width: 200px;
    height: 50px;
    background-color: pink;
}

div p:nth-child(1) {
    text-align: left; /*默认值*/
}

div p:nth-child(2) {
    text-align: center;
}

div p:nth-child(3) {
    text-align: right;
}

div p:nth-child(4) {
    text-align: justify;
}
</style>
<div>
    <p>嘿嘿</p>
    <p>嘿嘿</p>
    <p>嘿嘿</p>
    <p>hello world, good good study, day day up</p>
</div>

注意:

• 这个属性是设置块级元素内的文本(行内元素也行)的对齐方式的, 而不是让这个块级元素自己对齐的.

二. 垂直居中

行高(line-height) 是指文本行基线之间的距离. 文本行在行高内总是居中的.

我们常用的对齐方式其实是给块级元素添加一个行高等于块的高度就可以自动居中.

只能是单行文本.

三. 文本装饰(text-decoration)

text-decoration 这个 CSS 属性是用于设置文本排版（下划线、顶划线、删除线或者闪烁）。下划线和顶划线修饰于文本的下部，删除线位于文本之上。

/*关键值*/
text-decoration: none;                     /*没有文本装饰  可以把a标签的下划线去掉*/
text-decoration: underline red;            /*红色下划线*/
text-decoration: underline wavy red;       /*红色波浪形下划线*/