文本属性
文本是网页的重要元素,CSS提供了很多相关的属性,以不同的方式控制文本;
缩进和行内对齐(只适用于块级元素)
缩进文本使用text-indent
text-indent属性把元素的第一行文本缩进指定的长度,缩进的长度可以是负值,通常用于缩进段落的第一行;
可以使用百分数和任意长度单位,百分数是相对于父级块元素的宽度;
text-indent属性可以用在任何块级元素上,沿着行内方向缩进;不能用在行内元素或者图片上;
使用负值时,最后加上外边距或内边距;
文本缩进只会影响元素的第一行,即使存在换行的也是如此;文本对齐使用text-algin
text-algin控制元素中各文本行的对齐方式;
可用值:start end left right center justify match-parent start end
默认值是left(css3规定是start),最常用值有left right center;
text-algin不控制元素的对齐方式,只影响元素的内容;
块级对齐
- 行高属性line-height
line-height属性指的是行的基线的距离,与字号无关;决定着元素所在方框的高度是增还是减;
line-heigth控制的是行距,是除字体高度之外在文本行上方的额外空间;也就是说,line-height的值与字体高度只差就是行距;
从父元素继承line-height属性值时,是根据父元素的字号计算的,而不是根据子元素;可以通过设置line-height为纯数字解决;设置纯数字时,继承的将是设定的换算系数,而不是得到的值;
- 纵向对齐文本vertical-align
vertical-align属性只能用于行内元素和置换元素,而且不继承;
默认值是baseline,可选值有baseline sub,super top,text-top middle,bottom,text-bottom等八个关键字和百分数。长度值等;
单词间距和字符间距
- 单词间距word-spacing
word-spacing属性的值为长度,可正可负。指定的长度值追加到单词的标准间距上;默认值normal表示为0;
- 字符间距letter-spacing
letter-spacing属性修改的是字符或字母之间的间距;允许任何长度值,默认值也是normal;指定的长度值将把字符之间的距离增加和减少的量;
文本转换text-transform
- text-transform属性转变文本的大小写;
可选值:uppercase |lowercase |capitalize |none
文本装饰text-decoration
- 取值: none [underline, overline, line-through, blink ]
underline为元素添加下划线
overline在文本的上方绘制一条线
line-through绘制一条贯穿文本中部的线;也叫删除线
blink让文本一闪一闪的;
none值把应用到元素上的装饰效果都去掉;
属性不被继承;
文本阴影text-shadow
- text-shadow属性是为了给文本添加阴影
每个阴影由一个可选的颜色和三个长度值定义,最后一个长度值可选;
颜色设定的是阴影的颜色,如果省略颜色,阴影的颜色与文本的颜色相同
前两个长度值是阴影离文本的距离,第一个长度值设定横向偏移,第二个设定纵向,第三个长度值定义阴影的模糊半径;
处理空白white-space属性
- white-space属性影响文档源码中空格、换行符合制表符的处理方式;
取值有: normal nowrap pre pre-wrap pre-line
默认值normal采用丢掉多余空白的方式处理;换行符变成空白。对个空格合并为一个空格;
设置为pre,空白不会被忽略
nowrap禁止元素中的文本换行,除非是br元素;
文本换行overflow-wrap
- 主要针对英文单词来说
overflow-wrap也叫word-wrap;可取值有normal和break-word;使用默认值normal时,按正常方式换行;使用break-word时,可以在单词内部换行;
另外还有其他属性如:
书写模式:writing-mode; 文本方向:text-orientation