CSS 文本属性

缩进文本 text-indent

元素的第一行缩进一个指定长度。

缩进可以使用所有的长度单位,当使用百分数时,是表示对于其父元素的宽度进行缩进。

p{text-indent: 2em}
div{width: 600px}
div p{text-indent: 10%}

水平对齐 text-align

关键字:left center right justify inherit

行高 line-height

行高和字体大小的差值就是行间距

关键字:normal(表示font-size的1.2倍) inherit

用相对长度表示行高时,其计算值是取父元素font-size然后乘以相对值。

div{font-size: 20px}
div p{line-height: 5em} /* 行高为20*5=100px */

使用缩放因子处理行高

使用缩放因子处理行高时,在父元素设置缩放因子,子元素设置font-size。行高值是子元素的font-size乘以父元素的缩放因子。

缩放因子是阿拉伯数字,没有单位。

div{line-height: 1.5}
div p{font-size: 18px}

垂直文本对齐 vertical-align

关键字:baseline | sub | super | bottom | top | text-top | text-bottom | middle | inherit 

baseline要求元素的基线与其父元素基线对齐。

sub使其基线相对父元素基线降低,使元素变为下标。super与sub相反。

bottom使元素内框的低端与行框的低端对齐。top与bottom相反。

middle会把行内元素框框的中点和其父元素的基线上方0.5ex处的店对齐。

百分数:百分数会把元素的基线相对于其父元素的基线升高和降低指定的量。

具体数值:如5px或-5px,表示把指定的元素与对齐前升高(+)或降低(-)5px。

字间隔 word-spacing

word-spacing用于修改字间的间隔。字是不包含空白符的字符串,多个字由空白符隔开。

p{word-spacing: 4em;}

字母间隔 letter-spacing

p{letter-spacing: 1em;}

文本转换 text-transform

关键字:uppercase 转换为大写  lowercase 转换为小写  capitalize 每个单词首字母大写

p{text-transform: uppercase};

文本装饰 text-decoration

关键字:underline下划线  overline上划线  line-through贯穿现 

p{text-decoration: line-through};

空白符处理 white-space

关键字:默认normal:将所有空白符合并为一个,忽略元素的换行。

pre:保留空白符,保留换行,不允许自动换行。 nowrap:合并空白符,忽略换行,不允许自动换行。 

pre-wrap:保留空白符,保留换行,允许自动换行。  pre-line:合并空白符,保留换行,允许自动换行。

文本方向 direction

关键字:ltr rtl


 

你可能感兴趣的:(CSS,CSS,文本属性)