文本属性

本文地址:http://www.cnblogs.com/veinyin/p/7606689.html 

文本属性也是必须存在的不是吗? 否则我们如何让页面满足我们一天天增长的审美呢~

1 缩进(text-indent)

text-indent: 3em;       //首行缩进3em

可以应用于所有块级元素,不能用于行内元素(内联元素),上面的值可以根据自己需要调整

还可以为负值,实现悬挂缩进。但可能会导致超出浏览器边界,可以设置内边距或外边距防止此现象发生。 

2 水平对齐(text-align)

text-align: center;

可以取值 center , left , right , justify , inherit

其他都是十分易懂的,要提一下的是其中的 justify 可以使文本两端对齐。 

3 垂直对齐(vertical-align)

vertical-align: middle;

可以取值 baseline , sub , su , top , text-top , middle , bottom , text-bottom , inherit

应用与行内元素与表格单元。

在说明具体作用之前,先要介绍另外一个属性 line-height ;

line-height 在我一直以来的用法都是设置行间距,当然,这是绝对没问题的,但是并不清楚是如何实现的。

首先,要清楚的一件事就是 行间距 = line-height - font-size;

得到的行间距一分为二,分别放在文字上方和下方,正式成为行间距。

接下来继续讲这些可取的值都能达到什么效果:

  • baseline : 把基线与父元素基线对齐
  • sub 、 super : 基线下移、 上移,形成上下标的样式,但大小不改变
  • bottom : 将行内框底端与行框底端对齐
  • top : 将行内框顶部与行框顶部对齐
  • middle : 中部对齐,不是十分严格的对齐
  • text-top : 将行内框顶部与父元素内容区顶部对齐
  • text-bottom : 将行内框底部与父元素内容区底部对齐

4 字间隔 ( word-spacing ) 和字母间隔 ( letter-spacing )

两者使用方法相同

word-spacing: 2px;      
letter-spacing: 2em;

这些都是可以的,用法十分简单 

5 文本转换 ( text-transform )

text-transform: uppercase;      //转换为大写

还可以取值:

  • lowercase : 转换为小写
  • capitalize : 每个单词的首字母转换为大写 

6 文本装饰 ( text-decoration )

  • underline : 下划线;
  • overline : 上划线;
  • line-through : 贯穿线;
  • blink : 闪烁,不推荐使用,不友好
  • none : 去掉所有装饰 

7 文本阴影 ( text-shadow )

text-shadow: color 右偏移 下偏移 模糊半径 ( , color 右偏移 下偏移 模糊半径 ) ;

上面括号是可选的,如果去掉括号就有两个阴影,如果想要更多阴影,重复更多次即可,逗号一定要有,吧各个阴影隔开。

哦 还有, 模糊半径是可以不设置的,可以省去不写 

8 空白符 (white-space)

用于处理文本中空格、换行符和 tab 字符

  • normal : 把空白符合并成一个空格,这是默认的
  • nowrap : 不允许换行 可以用于控制表单元格内容不换行
  • pre : 不合并空白符 ,所有的都显示出来 不允许自动换行
  • pre-wrap : 不合并空白符,正常换行
  • pre-line : 合并空白符,正常换行 

9 文本方向 ( direction )

  • ltr : 默认, left to right 从左到右
  • rtl : right to left 从右到左
  • inherit : 继承

失望.... 看到文本方向的时候还以为是要由横向和纵向的选择呢~

END~~~≥ω≤

原文地址:https://www.cnblogs.com/veinyin/p/7606689.html