HTML5基础加强css样式篇（text-align，text-decoration，text-indent，text-transform，letter-spacing，word-spacin）（四）

介绍：

•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 属性的值。