字体大小
font-size : <length> | <percentage> | <absolute-size> | <relative-size>
主要是length 和 percentage
absolute-size: small,middle 。。。
length
px
em
%
1em = 12px = 100%
字体样式
font-family : [ <family-name> | <generic-family> ] #
<generic-family> = serif | sans-serif | cursive | fantasy | monospace
村纤体 | 绯村纤体 | 草书 | 幻想体 | 等宽字体
主要使用serif, sans-serif
字体加粗
font-weight : normal(400), bold(700), bolder, lighter
100|200|300|400|500|600|700|800|900
斜体
font-style: normal | italic | oblique
正常 | 斜体 | 倾斜
一般所有的字体都有斜体
行距
line-height: normal | <number> | <length> | <percentage>
normal的值不是固定，是由浏览器决定的。 1.5em
.text {
font-size :
font-family :
font-weight :
font-style :
line-height :
}
= font : [ [ < font-style > || < font-variant > || < font-weight > || < font-stretch > ] ? <font-size > [ / line-height >] ? < font-family> ] | caption | icon | menu | message-box | small-caption || status-bar
font-style 可选
font-weight 可选
font-size 必填
line-height 可选 前面要加斜杠’/'
font-family 必填
font: 30px/2 “Consolas”, monospace;
颜色
color:red;
color:#ff0000;
color:rgb(255,0,0);
color:rgba(255,0,0,0.5);
color:transparent; 全透明
对齐方式
text-align: left | right | center | justify(两端对齐，会改变空格的大小)
垂直对齐
vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
baseline:基线(默认)
sub:下标
super:上标
top:对齐到当前这行的最高点（要考虑margin）
text-top:对齐到当前文本（文字）的最高点
middle:中
bottom:最低点
text-bottom:最低点
<percentage>: 百分比的参照物是行高 line-height
<length>:正数 向上， 负数，向下
首行缩进
text-indent:<length> | <percentage>
text-indent:2em; 首行缩进两个字符
<length>: 反方向缩进 （常用在文字在页面中存在，但是不显示，就设置比较大的负值）
<percentage> 容器的百分比
格式处理
white-space: normal | nowrap | pre | pre-wrap | pre-line
| new lines | spaces and tabs | text wrapping | |
| normal | collapse | collapse | wrap |
| nowrap （强制一行） | collapse | collapse | no wrap |
| pre （完全保留代码格式） | preserve （保留换行） | preserve | no wrap |
| pre-wrap （保留格式+自动换行）（使用较多） | preserve | preserve | wrap |
| pre-line | preserve | collapse | wrap |
单词换行
word-wrap:normal | break-word
行内单词换行
word-break : normal | keep-all | break-all
文本修饰
阴影
text-shadow:none | [ <length> {2,3} && <color>?]#
text-shadow:1px 2px 3px #f00;
3px虚化半径
下划线
text-decoration:none | [ underline || overlain || line-through]
超长部分点点点显示
text-overflow:clip | ellipsis
例子:
实现效果，kuckbo...
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
鼠标形状
cursor : [ <uri>,]*[auto | default | none | help | pointer | zoom-in | zoom-out | move ]
cursor:url(cur.cur),pointer;
继承
inherit
font-size:inherit;
font-family:inherit;
font-weight:inherit;
font-style:inherit;
line-height:inherit;
color:inherit;
text-decoration:inherit;
text-align:inherit;
text-indent:inherit;
white-space:inherit;
word-wrap:inherit;
word-break:inherit;
text-shadow:inherit;