使用和字体控制属性建立优秀网站的

控制颜色

字体颜色使用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属性可接受“加粗”范围为的数字值，或者是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

图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字体处理冰山的一角。但是，它们可为你实际应用这些属性提供有益的启示；现在你应该有足够的知识可以开始自己的实践，那你还等什么？

：德东

查看本文国际来源