字体样式:
颜色(color):blue || rgb(255,0,0) || #fff000 (十六进制其实也是红绿蓝各占多少。ff:红,f0:绿,00:蓝)
字体(font-famliy):宋体 || Arial || \5B8B\4F53(Unicode 编码)
(可写多个用逗号隔开,是先读第一个,如系统无该字体则读第二个)
字体大小(font-size):1em || 12px || 150% || medium || small ||large || ...(不常用就不列了)
是否斜体(font-style):italic || oblique || normal (italic为斜体,oblique是文本倾斜)
是否加粗(font-weight):bold || lighter || normal || 100~900 (100的倍数)
横线修饰(text-decoration):underline || overline || line-thought
大小写(text-transform):capitalize || uppercase || lowercase || none
段落样式:
行高(line-height):1em || 12px || 150% ||normal
字符之间的间距(letter-spacing) :1em || 12px || 150% ||normal
单词之间的间距(word-spacing) :1em || 12px || 150% ||normal
字母缩进(text-indent):1em || 12px || 150% ||normal
末端增加省略标记(text-overflow):clip || ellipsis
(clip:消减,感觉用和没用没区别,实际中也不常用可不记,ellipsis:省略,被修剪的文本显示:... ,
*使用text-overflow:ellipsis; 时需同时设置:标签宽度:width、overflow:hidden、文本不换行:white-space:nowrap)
内容的垂直对齐方式(vertical-align):baseline || sub || super || top || text-top ||middle || bottom || text-bottom || 1em/12px/100% || inherit
(baseline:以基线对齐,sub :上标, super:下标,top:和行中最高的对齐, text-top:和父级文本最高的对齐,middle :垂直居中,bottom :和行中最低的对齐, text-bottom:和父级最低的对齐
*vertical-align:middle,用于内联元素、表格、块元素,注意:表格使用时需设置高度:td{height:40px; vertical-align:middle;},vertical-align属性由于不适用于块元素,所以在块使用该属性,同时使用:display:table-cell;,将块转为单元格,此用法需处理兼容性,IE6/IE7以及IE为核心的浏览器都不支持此用法)
文本的对齐方式(text-align):right || left || center (主要处理块元素中的文字/图片)
可强制文本不换行(white-space):nowrap || pre || normal (nowarp:不换行直到<br>标签、pre:保留空格,类似标签<pre>)
文本的换行方式(word-break):normal || break-all || keep-all
(break-all:英文单词超出换行,但长单词不挪到下一行,keep-all:只有遇到半角空格/ 换行空格,才起到换行效果)
内容超过容器的编辑则换行(word-wrap):break-word || normal
(break-word:作用是内容英文单词/URL超出时进行换行,且长单词/URL挪到下一行,中文无效)
word-break和word-wrap的区别:
*单位:
em:大小时不固定的,是相对单位,浏览器默认设置字体大小为16px,则1em=16px,0.815em=14px。body设置相对于浏览器的默认字体设置,子集设置相对于父级的字体设置,优先级:用户!important > 网页!important > 用户 > 网页 > 浏览器默认。
%:跟em相似,也是相对单位。
rem:是CSS3新增的单位,和em类似主要区别是,rem是相对于html根元素。
如父级已设置大小为:12px
则:1em=12px=100%
由于宋体基本上是目前显示中文唯一的通用web字体,所有12px成为最常用的字体大小。
在谷歌字体大小最小为:12px;,就算你设置为10px;最后也变成12px。
px,em,rem单位转换工具:http://pxtoem.com/