文本

字体大小

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;