您当前的位置: 首页 » DIV+CSS编程 » 使用CSS和字体控制属性建立优秀网站
使用CSS和字体控制属性建立优秀网站
论坛链接
过去，修改一个网页的字样通常是指把相关的文本嵌套到<tag>标签中，并用属性来控制它的颜色、大小和式样。现在，人们已不再认同这种方法，因为它将视觉式样和实际的内容标记混合起来。如今我们推荐使用将字样式样信息集中到一个叫做层叠式样表（CSS）的单独文件中的方法。
将字体信息集中到一个CSS文件中具有许多明显的优点：它易于操作，不需要任何特殊的软件，并且能够在大多数主流浏览器中统一运行。更重要的是，由于信息集中到一个单独的位置，修改网页的视觉外观相当方便：你只需简单修改主式样表的字体或颜色，相关改变就会立即“层叠”到你的整个网站中。
听起来很有趣，是吗？那么请继续阅读下去，因为我将在本文中探讨CSS font属性，它旨在替代旧有的<font>元素，如果你需要对HTML页面的字样、颜色、文字大小和间距进行集中控制，它是一个可利用的强大工具。
控制字样
字体属性定义了对应元素所使用的字体。这个属性通常包含一个由逗号隔开的字体名称列表；并可以用引号来封套那些包含空白的名称。应用时，浏览器将使用它在列表中找到的第一个字体，或如果没有找到有效字体，就使用默认的标准浏览器字体。
列表A中是这个指示的一个应用实例：
列表A
<html>
<head>
<style type="text/css">
.quote {
font-family: "Bookman Old Style", "Verdana";
}
</style>
</head>
<body>
<div class="quote">To be or not to be, that is the question.</div>
</body>
</html>
图A显示输出结果。
图A
Font_family
记住重要的一点，这个指示十分依赖于客户端系统所显示的字体；在上面的例子中，如果系统没有显示Bookman Old Style和Verdana字体，就将使用默认的浏览器字体。要避免这个问题，最好是在特殊字体名称列表后增加一个通用字体名称列表，如serif、sans-serif或cursive；这告诉浏览器使用那个字体类别中最相匹配的字体。列表B是上面实例的一个修订版本，它正好解决上述问题。
列表B
<html>
<head>
<style type="text/css">
.quote {
font-family: "Bookman Old Style", "Verdana", "cursive";
}
</style>
</head>
<body>
<div class="quote">To be or not to be, that is the question.</div>
</body>
</html>
将字体信息集中到一个CSS文件中具有许多明显的优点：它易于操作，不需要任何特殊的软件，并且能够在大多数主流浏览器中统一运行。更重要的是，由于信息集中到一个单独的位置，修改网页的视觉外观相当方便：你只需简单修改主式样表的字体或颜色，相关改变就会立即“层叠”到你的整个网站中。
听起来很有趣，是吗？那么请继续阅读下去，因为我将在本文中探讨CSS font属性，它旨在替代旧有的<font>元素，如果你需要对HTML页面的字样、颜色、文字大小和间距进行集中控制，它是一个可利用的强大工具。
控制字样
字体属性定义了对应元素所使用的字体。这个属性通常包含一个由逗号隔开的字体名称列表；并可以用引号来封套那些包含空白的名称。应用时，浏览器将使用它在列表中找到的第一个字体，或如果没有找到有效字体，就使用默认的标准浏览器字体。
列表A中是这个指示的一个应用实例：
列表A
<html>
<head>
<style type="text/css">
.quote {
font-family: "Bookman Old Style", "Verdana";
}
</style>
</head>
<body>
<div class="quote">To be or not to be, that is the question.</div>
</body>
</html>
图A显示输出结果。
图A
Font_family
记住重要的一点，这个指示十分依赖于客户端系统所显示的字体；在上面的例子中，如果系统没有显示Bookman Old Style和Verdana字体，就将使用默认的浏览器字体。要避免这个问题，最好是在特殊字体名称列表后增加一个通用字体名称列表，如serif、sans-serif或cursive；这告诉浏览器使用那个字体类别中最相匹配的字体。列表B是上面实例的一个修订版本，它正好解决上述问题。
列表B
<html>
<head>
<style type="text/css">
.quote {
font-family: "Bookman Old Style", "Verdana", "cursive";
}
</style>
</head>
<body>
<div class="quote">To be or not to be, that is the question.</div>
</body>
</html>
#2楼发布者：tznktg时间：2007-09-19 22:35:36
控制颜色
字体颜色使用color属性进行控制，它接受十六进制的RGB值或“颜色值”，如red、silver或blue。列表C显示了一个实例。
列表C
<html>
<head>
<style type="text/css">
.quote {
font-family: "Bookman Old Style", "Verdana";
color: purple;
}
</style>
</head>
<body>
<div class="quote">To be or not to be, that is the question.</div>
</body>
</html>
图B显示其输出结果。
图B
颜色
控制文字大小
接下来说明文字大小控制。字体大小由font-size属性进行控制，它接受绝对值（数字单位或关键字，如xx-samll、samll、medium、large、x-large）或相对值（larger和smaller）。字体大小可以用点、百分比或em（12点活字）为单位。列表D中为一个实例；它将字体扩大到正常大小的400%。
列表D
<html>
<head>
<style type="text/css">
.quote {
font-family: "Bookman Old Style", "Verdana";
color: purple;
font-size: 400%;
}
</style>
</head>
<body>
<div class="quote">To be or not to be, that is the question.</div>
</body>
</html>
图C为输出结果。
图C
字体大小
控制突出
字体突出由font-style和font-weight属性控制，它们分别与HTML的<i>和<b>元素相对应。font-style属性接受normal、italic和oblique中的任何一个值；而font-weight属性可接受“加粗”范围为100-900的数字值，或者是normal、bold、bolder和lighter这样的关键字。列表E是一个说明这两个属性的实例。
列表E
<html>
<head>
<style type="text/css">
.quote {
font-family: "Bookman Old Style", "Verdana";
color: purple;
font-weight: bolder;
}
.attribution {
font-style: italic;
}
</style>
</head>
<body>
<div class="quote">To be or not to be, that is the question.</div>
<div class="attribution">-- Hamlet</div>
</body>
</html>
字体颜色使用color属性进行控制，它接受十六进制的RGB值或“颜色值”，如red、silver或blue。列表C显示了一个实例。
列表C
<html>
<head>
<style type="text/css">
.quote {
font-family: "Bookman Old Style", "Verdana";
color: purple;
}
</style>
</head>
<body>
<div class="quote">To be or not to be, that is the question.</div>
</body>
</html>
图B显示其输出结果。
图B
颜色
控制文字大小
接下来说明文字大小控制。字体大小由font-size属性进行控制，它接受绝对值（数字单位或关键字，如xx-samll、samll、medium、large、x-large）或相对值（larger和smaller）。字体大小可以用点、百分比或em（12点活字）为单位。列表D中为一个实例；它将字体扩大到正常大小的400%。
列表D
<html>
<head>
<style type="text/css">
.quote {
font-family: "Bookman Old Style", "Verdana";
color: purple;
font-size: 400%;
}
</style>
</head>
<body>
<div class="quote">To be or not to be, that is the question.</div>
</body>
</html>
图C为输出结果。
图C
字体大小
控制突出
字体突出由font-style和font-weight属性控制，它们分别与HTML的<i>和<b>元素相对应。font-style属性接受normal、italic和oblique中的任何一个值；而font-weight属性可接受“加粗”范围为100-900的数字值，或者是normal、bold、bolder和lighter这样的关键字。列表E是一个说明这两个属性的实例。
列表E
<html>
<head>
<style type="text/css">
.quote {
font-family: "Bookman Old Style", "Verdana";
color: purple;
font-weight: bolder;
}
.attribution {
font-style: italic;
}
</style>
</head>
<body>
<div class="quote">To be or not to be, that is the question.</div>
<div class="attribution">-- Hamlet</div>
</body>
</html>
#3楼发布者：tznktg时间：2007-09-19 22:36:24
图D为输出结果：
图D
字体粗细和式样
控制字间距、字符间距和行距
CSS还可以通过对应的word-spacing、character-spacing和line-spacing属性分别对字间距、字符间距和行距进行控制。与font-size属性一样，这些属性的值也可以用点、像素和em为单位。列表F是一个实例。
列表F
<html>
<head>
<style type="text/css">
.quote {
font-family: "Bookman Old Style", "Verdana";
color: purple;
font-weight: bolder;
font-size: 200%;
line-height: 50px;
}
.attribution {
font-style: italic;
word-spacing: 15pt;
letter-spacing: 8px;
}
</style>
</head>
<body>
<div class="quote">To be or not to be, that is the question.</div>
<div class="attribution">-- Hamlet, Act 3, Scene 1</div>
</body>
</html>
图E说明输出结果：
图E
间距
当然，这些实例仅仅只是CSS字体处理冰山的一角。但是，它们可为你实际应用这些属性提供有益的启示；现在你应该有足够的知识可以开始自己的实践，那你还等什么？
图D
字体粗细和式样
控制字间距、字符间距和行距
CSS还可以通过对应的word-spacing、character-spacing和line-spacing属性分别对字间距、字符间距和行距进行控制。与font-size属性一样，这些属性的值也可以用点、像素和em为单位。列表F是一个实例。
列表F
<html>
<head>
<style type="text/css">
.quote {
font-family: "Bookman Old Style", "Verdana";
color: purple;
font-weight: bolder;
font-size: 200%;
line-height: 50px;
}
.attribution {
font-style: italic;
word-spacing: 15pt;
letter-spacing: 8px;
}
</style>
</head>
<body>
<div class="quote">To be or not to be, that is the question.</div>
<div class="attribution">-- Hamlet, Act 3, Scene 1</div>
</body>
</html>
图E说明输出结果：
图E
间距
当然，这些实例仅仅只是CSS字体处理冰山的一角。但是，它们可为你实际应用这些属性提供有益的启示；现在你应该有足够的知识可以开始自己的实践，那你还等什么？