网页设计与制作第13章范文

第13章 CSS的属性和值

一、CSS字体属性

1、字体集合(font-family)

可以用一个指定的字体名或一个种类的字体集合。多个集合的赋值是可以使用的，而如果确定了一个指定的字体赋值，就应该有一个种类集合名随后，以防第1个选择不存在。定义一个字体的集合的时候，就相当于定义了一个字体的控制集合，当浏览器解释执行的时候，会控制集合中所列的字体顺序从前到后的选择字体。任何包含空格的字体名都必须用单引号引住。字体集合也可以用字体属性给出。

案例名称：字体集合l2-1.htm

字体集合

text/css

■CSS字体■

2002:7:25 ·eva(原创)

■ FONT-FAMILY属性：

每部机器上都装有多种字体，浏览器会使用默认的字体浏览网页，比如简体中文版WINDOWS汉字默认是宋体，英文默认是ARIAL。使用FONT-FAMILY属性则可以规定浏览器用什么字体解读网页。

■ FONT-FAMILY语法实例：

h2 {font-family:times,impact,sans-serif}

说明如下:

helvetica是浏览器首先寻找的字体名称，如果有就使用它。在helvetica字体没有找到的情况下，则会寻找impact字体，如果找到就使用它。如果以上两种字体都没有找到，则指示浏览使用

sans-serif（通用字体）。在你不能保证你列出的字体浏览者一定会安装时，将一种通用字体加在字体列表中是一种好的做法。因此我们提倡使用最基本的字体制作网页，比如中文用宋体，英文用ARIAL，这样使得你的网页不会因为浏览器没能使用合适的字体解读而变样。

如果一种字体的名称中有空格，如"Times New Roman"，在CSS语句中要用引号包含该字体。

例：Body {font-family:"Times New Roman",serif}

如果该语句已在双引号里，则字体名降级为单引号。

例：

如果该语句包括其它CSS规则，字体说明应放在最后。

例:H2 {color:red;margin:10px;font-family:"Times New Roman",serif}

2、字体风格(font-style)

该属性以3个方法的其中一个来定义显示的字体：normal（普通）、italic（斜体）或oblique（倾斜）。

案例名称：字体风格l2-2.htm

字体风格

3、字体变形(font-variant)

字体变形属性决定了字体的显示是normal（普通）还是small-caps（小型大写字母）。当设置字体变形为小型大写字母时文字中的所有小写字母会显示比大写字母稍小的大写字母。

案例名称：字体变形l2-3.htm

字体变形ABCabc

4、字体加粗(font-weight)

字体加粗属性用作说明字体的字重,该属性值可以从100到900，normal相当于400，bold相当于700，bolder是将继承值加上一个等级，lighter是将继承值减上一个等级。

浏览器能不能正确显示要看使用的字体类型支持几种粗细值。

案例名称：字体加粗l2-4.htm

59

font-weight:100	font-weight:600
font-weight:200	font-weight:700
font-weight:300	font-weight:800
font-weight:400	font-weight:900
font-weight:500

5、字体大小(font-size)

字体大小属性用作修改字体显示的大小：xx-small/x-small/small/medium/large/x-large/xx-large /smaller/larger/百分比/高度。关键字的本级与上级的比是：1:1.5，比如：medium 与large 的比是1:1.5；而larger 是将继承值加上一级，smaller 是将继承值减上一级；百分比是将默认字体扩大或缩小若干倍；高度的单位前面已讲过。

案例名称：字体大小 l2-5.htm

xx-small	x-small	small
medium
large	x-large	xx-large
50%	100%	200%
5pt	10pt	20pt
20pt	20ptsmaller	20ptlarger

6、字体(font)

属性值：[ || || ]

[/]