本文地址: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~~~≥ω≤