介绍:
•text-align 对齐元素中的文本
•text-decoration 向文本添加修饰
•text-indent 缩进元素中文本的首行
•text-transform 控制元素中的字母
•letter-spacing 设置字符间距
•word-spacing 设置字间距
•white-space 设置元素中空白的处理方式
1.text-align 对齐元素中的文本:
①:规定一行中文本内容,行内元素,行内块元素的对齐方式
②:可选值
–left 把文本排列到左边。默认值:由浏览器决定。
–right 把文本排列到右边。
–center 把文本排列到中间。
–justify 实现两端对齐文本效果。
–inherit 规定应该从父元素继承 text-align 属性的值。
行内元素
(display: inline) : span, a
等
行内块元素(
display: inline-block
)
: img input
等
justify值效果如下:
2.text-decoration 向文本添加修饰:
①文本的修饰。
②可选值:
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 规定应该从父元素继承 text-decoration 属性的值。
注:
•<a>元素 默认设置了
•text-decoration: underline;
• 我们可以设置
•text-decoration: none; 取消下划线
3.text-indent 缩进元素中文本的首行:
①首行缩进
②可选值:
–
length 定义固定的缩进。默认值:0。
–
% 定义基于父元素宽度的百分比的缩进。
– inherit 规定应该从父元素继承 text-indent 属性的值。
注:实际开发中我们使用em,确保一个很是的比例!!!
单位转换可以参考一下链接:http://www.divcss5.com/html/h89.shtml
4.text-transform 控制元素中的字母:
①控制文本的大小写
– none 默认。定义带有小写字母和大写字母的标准的文本。
– capitalize 文本中的
每个单词以大写字母开头。
– uppercase 定义仅有大写字母。
– lowercase 定义无大写字母,仅有小写字母。
– inherit 规定应该从父元素继承 text-transform 属性的值。
5.letter-spacing 设置字符间距:
•该属性定义了在文本字符框之间
插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。
– normal 默认。规定字符间没有额外的空间。
–
length 定义字符间的固定空间(允许使用负值)。
– inherit 规定应该从父元素继承 letter-spacing 属性的值
6.word-spacing 设置字间距
•该属性定义元素中字之间
插入多少空白符。针对这个属性,“字” 定义为由空白符包围的一个字符串。如果指定为长度值,会调整字之间的通常间隔;所以,normal 就等同于设置为 0。允许指定负长度值,这会让字之间挤得更紧。
– normal 默认。规定字符间没有额外的空间。
–
length 定义字符间的固定空间(允许使用负值)。
– inherit 规定应该从父元素继承 letter-spacing 属性的值。
7.white-space 设置元素中空白的处理方式
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap保留空白符序列,但是正常地进行换行
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。