文本样式

来源：互联网发布：js杀破狼为什么不给听编辑：程序博客网时间：2024/06/05 11:31

字体样式：

颜色(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挪到下一行，中文无效）