文本样式主要涉及多个字符的排版效果。
一、定义文本水平对齐
text-align
属性来定义文本的水平对齐方式。
语法:
text-align: left | right | center | justify
- left 表示默认值,左对齐;
- right 表示右对齐;
- center 表示居中对齐;
- justify 表示两端对齐;
Tips: CSS3 新增了 4 个属性:start | end | match-parent | justify-all ,由于浏览器支持不是很好,暂不介绍,可以去 W3C 官网上进行了解和学习。
二、定义文本垂直对齐
使用 vertical-align
属性设置或检索对象内容的垂直对其方式。
语法:
vertical-align: auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
- auto:根据 layout-flow 属性的值对齐对象内容;
- baseline:表示默认值,表示将支持 valign 特性的对象内容与基线对齐;
- sub:表示垂直对齐文本的下标;
- super:表示垂直对齐文本的上标;
- top:表示将支持 valign 特性的对象的内容对象顶端对齐;
- text-top:表示将支持 valign 特性的对象的文本与对象顶端对齐;
- middle:表示将支持 valign 特性的对象的内容对象中部对齐;
- bottom:表示将支持 valign 特性的对象的内容对象底端对齐;
- text-bottom:表示将支持 valign 特性的对象的文本与对象顶端对齐;
- length:表示由浮点数和单位标识符组成的长度值或者百分数,可为负数,定义由基线算起的偏移量;
![](https://img2018.cnblogs.com/blog/1691302/201907/1691302-20190722144203734-301785866.jpg)
vertical-align
不影响块级元素中的内容对齐,它只针对于 行内元素或者行内块元素,特别是行内块元素, 通常用来控制图片/表单与文字的对齐。
![](https://img2018.cnblogs.com/blog/1691302/201907/1691302-20190722144301171-695479540.png)
1、图片、表单和文字对齐
可以通过 vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。
2、去除图片底侧空白缝隙
图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。这样会造成一个问题,就是图片底侧会有一个空白缝隙。
解决方法 a:(推荐使用)
给 img vertical-align:middle | top 等等。 让图片不要和基线对齐。
解决方法 b:
给 img 添加 display:block; 转换为块级元素就不会存在问题了。
三、定义行高
行高也称为行距,是段落文本行与行之间的距离。使用 line-height 属性定义行高。
语法:
line-height: normal | length
- normal:表示默认值,一般为 1.2em;
- length:表示百分比数字,也可以为单位标识符组成的长度值;常用的属性值单位有三种,分别为像素 px,相对值 em 和百分比%,使用最多的是像素 px;
四、定义字距和词距
1、字距
使用 letter-spacing 属性定义字距,所谓字间距就是字符与字符之间的空白,取值为长度值,由浮点数字和单位标识符组成,默认为 normal,表示默认间隔。
语法:
letter-spacing: 2em;
2、词距 (对中文无效)
word-spacing 属性用于定义英文单词之间的间距,对中文字符无效。和 letter-spacing 一样,其属性值可为不同单位的数值,允许使用负值,默认为 normal。
word-spacing 和 letter-spacing 均可对英文进行设置。不同的是 letter-spacing 定义的为字母之间的间距,而 word-spacing 定义的为英文单词之间的间距。
语法:
word-spacing:2em;
五、定义缩进
text-indent
属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em 字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,, 建议使用 em 作为设置单位。
允许使用负值,使用复制,代表悬垂缩进。
1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度。
Demo:
text-indent: 2em;