[快速入门前端 22] CSS 常见属性(2) 文字样式和对齐

文字段落样式

文字间距

文本间距分为两种，字元间距和单字间距。

字元间距：调整每个字元间的距离单字间距：调整每个单字间的距离，以是否空格区别单字，所以中文无作用属性名：letter-spacing (字元间距)、word-spacing (单字间距)属性值：normal、inherit、确切距离 (ex: 10px)间距值可以为负，最后文字会叠在一起

範例：

.p2 {    letter-spacing: 10px; /* 针对每个字元的间距 */}.p3 {    word-spacing: 20px; /* 以空格分辨单字，并调整间距大小 */}

<p class="p1">哈啰你好. Hello how are you.</p><p class="p2">哈啰你好. Hello how are you.</p><p class="p3">哈啰你好. Hello how are you.</p>

段落缩排

属性名：text-indent属性值：绝对值 (px, cm 等)、百分比 ( % )，预设为每段首行缩排，后面若有需要可加作用範围 (每行)。缩排最长使用的单位是 em

範例：

p {text-indent: 40px; /* 绝对数值 */text-indent: 15%; /* 百分比 */text-indent: 5em each-line; /* 缩排作用于每一行 */}

文字修饰

属性名：text-decoration属性值：像 font 一样是组合属性，必要属性为底线类型，前面可自由加入底线样式及颜色底线类型分为：underline (底线)、line-through (删除线)、overline (上底线)、none (无底线)

範例：

p {text-decoration: underline; /* 预设底线 */text-decoration: underline dotted; /* 底线 + 底线样式(点点) */text-decoration: green wavy underline; /* 底线样式 + 颜色 */}

段落行高

属性名：line-height属性值：数字、百分比等。同时设定 font 的行高和 line-height 时可能会出现覆盖问题line-height 经常用于调整多行文字的行距，及设定单行文字的垂直置中

範例：

p {line-height: normal;line-height: 3.5; /* 无单位数字，乘以该元素的字体大小为行高 */line-height: 3em;line-height: 34%; /* 参考该元素字体大小的百分比 */}

文字对齐

水平对齐

属性名：text-align属性值：start、end、left、right、center 等。作用元素：纯文字、<span>、<a>、<input>、<img>，且需要在这些元素的父元素中设定 text-align ( 例如要让 <p> 内的文字置中需要在 p 设定 text-align，而非直接控制文字 )

範例：

p {text-align: left;text-align: right;text-align: center; /* 行内文字置中 */text-align: justify; /* 文字向两侧对齐，对最后一行无效 */text-align: justify-all; /* 与 justify 相同，但强制最后一行也向两侧对齐 */text-align: start; /* 向文字开头对齐 */}

垂直对齐

line-heigt
在只有单行文字时，将行高设为与父元素高度相同可以达到垂直置中的效果。

範例：

div {    height: 200px;    background-color: skyblue;}p {    line-height: 200px;}

<div>    <p>我要置中</p></div>

vertical-align
与 line-height 不同，vertical-align 主要用来指定同一行元素间或表格内的文字对齐方式，通常用于 文字+图片 或者文字大小不同时。

属性名：vertical-align属性值：baseline (预设)、top、middle、bottom、text-bottom、百分比等

範例：

div {    height: 200px;    background-color: skyblue;    font-size: 40px;}span {    font-size: 20px;    color: red;}

将红色字调小，预设会以基线对齐，如下图

若要调整的话可在红色字元素上加 vertical-align 并指定对齐方式

span {    font-size: 20px;    color: red;    vertical-align: top;}

---

上一篇：[快速入门前端 21] CSS 常见属性(1) 字体样式和颜色
下一篇：[快速入门前端 23] CSS 常见属性(3) 边框、表格及列表属性
系列文章列表：[快速入门前端] 系列文章索引列表