一、字体样式
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
RGBcolor: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:设置自定义字体的绝对路径或相对路径。