三 文本的精细排版
1,调整字符间距letter-spacing
字符间距letter-spacing属性用来控制字符之间的间距,这个间距实际就是在浏览器中所显示字符间的空格间距,同时间距的取值必须符合长度标准
基本语法:
letter-spacing:normal|长度
normal表示间距正常显示,是默认设置
长度包括长度值和长度单位,长度值可以使用负数
长度单位可以使用前面设置字体时介绍的所有单位
实例代码:
2,调整单词间距word-spacing
单词间距是和字符间距类似的属性,但是单词间距word-spacing主要用来设置单词之间空格距离
基本语法:
word-spacing:normal|长度
normal表示间距正常,是默认设置
长度包括长度值和长度单位,长度值可以使用负数
长度单位可以使用设置字体时介绍的所有单位
实例代码:
文字修饰text-decoration属性主要是对文字添加一些常用的修饰,如设置下划线和删除线等
基本语法:
text-decoration:underline|overline|line-through|bink|none
语法中的属性值可以是上面所列的一个或多个
属性的取值 | 说明 |
underline | 给文字添加下划线 |
overline | 给文字添加上划线 |
line-through | 给文字添加删除线 |
blink | 添加文字的闪烁效果 |
none | 没有文本修饰,是默认值 |
text-align属性用来控制文本的排列和对齐方式
基本语法:
text-align:left|right|center|justify
该语法的4个属性值可以任意选择其中一个,其中left代表左对齐方式,right代表右对齐方式,center代表居中对齐方式,justify代表两端对齐方式
该属性可应用于HTML中任何模块级标记,如<p> <h1> <h6>等
实例代码:
段落缩进text-indent属性是用来控制每个文字段落的首行缩进的距离的,该属性若没有设置值,默认为不缩进
基本语法:
text-indent:长度|百分比
长度包括长度值和长度单位,长度单位可以用之前所提到的所有单位
百分比则是相对上一级元素的宽度而定的
实例代码:
使用行高line-height属性可以控制文本内容之间的行间距,行间距通常是指上一行的下端到下一行上端之间的距离,所以调整行高也就是调整行间距
基本语法:
line-height:normal|数字|长度|百分比
normal为浏览器默认的行高,一般由字体大小属性来决定
数字,表示行高为该元素字体大小与该数字相乘的结果
长度,表示行高由长度和长度单位确定
百分比,表示行高是该元素字体大小的百分比
实例代码:
text-transform属性主要用来控制英文字母大小写转换,而且可以很灵活地实现对单词部分或者全部大小写的控制
基本语法:
text-transform:uppercase|lowercase|capitalize|none
可以选用text-transform属性中的任何一个属性值来转换英文单词的大小写
属性的取值 | 说明 |
uppercase | 使所有单词的字母大写 |
lowercase | 使所有单词的字母小写 |
capitalize | 使每个单词的首字母大写 |
none | 默认值显示 |