CSS笔记（美化文本）

一、字体样式

1、定义字体类型(下面的”|”用来分隔可选值）

1）font-family属性

font-family:字体1名称，字体2名称，字体3名称

用字体名称来定义，按优先顺序排列，逗号隔开

font-family:ncursive|fantasy|monospace|serif|sans-serif

用字体序列名称来定义

2）font属性（复合属性，可以定义多种字体属性）

font:font-style| |font-variant| |font-weight| |font-size| |line-height| |font-family

(属性之间用空格分隔。font至少要设置字体大小和类型，且放在后面，否则无效）

font:caption|icon|menu|message-box|small-caption|status-bar

CSS提供5类通用字体。

serif：衬线字体，通常变宽，粗细明显

sans-serif：无衬线字体，通常变宽，粗细不明显

cursive：草体，斜字形，联笔或其他草体特征

fantasy：奇异字体，艺术字

monospace：等宽字体

2、字体大小

font-size:xx-small | x-small | small | small | medium | large | x-large | xx-large | larger | smaller | length

larger和smaller根据父对象中字体进行调整，使用em单位计算

length取百分数以父对象中字体计算，与em单位计算相同

3、字体颜色

color : color

三种颜色表示：颜色名

color:gray

十六进制

color:#666666

RGB

color:rgb(120,120,120)

CSS3支持的另外三种颜色表示

RGBA：在RGB上增加了Alpha通道，可以定义半透明颜色

HSL：使用色相（H）、饱和度（S）和亮度（L）

color:hsl(0,100%,100%)

HSLA：在HSL上增加了Alpha通道，可以定义半透明颜色

4、字体粗细

font-weight:normal | bold | bolder | lighter | 100 | 200 | 300 |400 | 500 | 600 | 700 | 800 | 900

属性取值，normal表示默认值，相当于取值400，bold相当于700

5、斜体字体

font-style: normal | italic | oblique

italic和oblique是斜体

6、下划线

text-decoration: none| |underline| |blink| |overline| |line-through

overline表示上划线，line-through表示贯穿线。·

7、字体大小写

font-variant:normal | small-caps

和

text-transform:none|capitalize|uppercase|lowercase

二、文本样式

1、文本对齐

text-align : left |right|center|justify

left默认值，左对齐；right右对齐；center居中对齐；justify两端对齐

2、垂直对齐

vertical-aligh: auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length

auto 将根据layout-flow属性的值对齐

baseline 默认值，将支持valign特性的对象内容与基线对齐

sub 表示垂直对齐文本的下标

super 表示垂直对齐文本的上标

top 表示将支持valign特性的对象的文本与对象顶端对齐

middle 表示将支持valign特性的对象的内容与对象中部对齐

bottom 表示将支持valign特性的对象的内容与对象底端对齐

text-bottom 表示将支持valign特性的对象的文本与对象底端对齐

length 表示由基线算起的偏移量

3、字距和词距

letter-spacing字距（字母间距，中文有效）

word-spacing词距（单词间距，中文无效）

4、行高（行距）

line-height: normal | length

5、缩进

text-indent: 2em

CSS3新增文本样式

1、文本阴影

text-shadow: none | length1 length2 length3 color

length1：阴影水平偏移量

length2：阴影垂直偏移量

length3：模糊值

2、阴影特效

文本阴影的应用：增加对比度，定义多色阴影，定义火焰文字，定义立体文字，定义描边字体等。

3、定义溢出文本

text-overflow: clip|ellipsis|ellipsis-word

clip不显示省略标记，其余显示省略标记，ellipsis插入位置在最后一个字符，ellipsis-word插入位置在最后一个词

4、文本换行（略）

5、添加动态内容

content: normal|string|attr()|uri()|counter()|none

normal：默认值

string：插入文本内容

sttr（）：插入元素的属性值

url（）：插入一个外部资源

counter（）：计数器，用于插入排序标识

none：无任何内容

6、恢复默认样式

CSS3新增一个initial属性值，可以直接取消对某个元素的样式指定

7、自定义字体类型

@font-face{    }

属性及取值说明如下：

font-family：设置文本的字体名称

font-style：设置文本样式

font-variant：设置文本是否大小写

font-weight：设置文本的粗细

font-stretch：设置文本是否横向的拉伸变形

font-size：设置文本字体大小

src：设置自定义字体的绝对路径或相对路径。