您现在的位置:首页 >> 前端 >> 内容

书面语言的文本属性介绍

时间:2017/11/14 15:09:45 点击:

  核心提示:1)字体大小:font-size:12px2)字体的类型:{font-family:字体1,字体2,;}3)文本颜色:{color:颜色值;}4)字体加粗:{ font-weight:bolder/1...

1)字体大小:font-size:12px

2)字体的类型:{font-family:字体1,字体2,;}

3)文本颜色:{color:颜色值;}

4)字体加粗:{ font-weight:bolder/100-900 ;}

bolder(更粗的)/bold(加粗)/normal(常规)

100-500常规字体 600-900加粗字体

5)字体倾斜:{ font-style:italic/oblique/normal;}

6)文本的大小写{text-transform:none/capitalize}

uppercase 把文字变成全大写

lowercase 把文字变成全小写

capitalize 变成首字母大写

7)文本对其方式

水平对齐方式{text-align:left/right/center;}

垂直对齐方式{vertical-align:top/bottom/middle;}

8)文本行高{line-height:normal/数值;}

当单行文本的行高等于容器高时,可实现单行文本在容器中垂直方向居中对齐;

当单行文本的行高小于容器高时,可实现单行文本在容器中垂直中齐以上任意位置的定位;

当单行文本的行高大于容器高时,可实现单行文本在容器中垂直中齐以下任意位置的定位。

9)文本修饰

text-decoration:none

none:没有修饰

underline:添加下划线

overline:添加上划线

line-through:添加删除线

blink:闪烁

10)首行缩进:{text-indent:value;}

text-indent可以取负值;只对第一行起作用

11)字间距{letter-spacing:value;}

控制英文字母或汉字的字距

12)词间距word-spacing:value;

控制英文单词词距

13)垂直对齐方式

{vertical-align:top/bottom/middle;}

当单行文本的行高等于容器高时,可实现单行文本在容器中垂直方向居中对齐; line-height=height

图文排列中常用; 此属性无法单独使用,需要支持的条件

扩展:如何让一个图片垂直居中的几个条件

1、必须给容器加一个text-align:center;

2、必须给当前元素转成行内快级元素(display:table-cell)在给当前元素加上vertical-align:middle;

作者:网络 来源:我的博客