字体名称属性(font-family)
这个属性设定字体名称,如Arial, Tahoma, Courier等。例句如下:
.s1 {
font-family:Arial}
<HTML>
<HEAD>
<TITLE>CSS字体族科</TITLE>
<Style Type="text/css">
<!--
H1{
font-family: "隶书"
}
.text {
font-family: "宋体,仿宋_gb2312";
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class="text">目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
文件说明:
设定H1标记样式,规定了字体为隶书,设定了class为text的自定义样式,规定了字体为宋体或仿宋,即当客户机没有第一种
宋体字体的时候,浏览器会使用第2种仿宋字体显示。
定义了样式后,第16行的标题字会自动应用H1样式,而<p>标签通过了 class 属性引用了 text 样式。
这个属性可以设置字体的大小。字体大小的设置可以有多种方式,最常用的就是pt和px(pixel)。例句如下:
.s2 {
font-size:16pt}
<HTML>
<HEAD>
<TITLE>CSS字体大小</TITLE>
<Style Type="text/css">
<!--
H1{
font-size:14pt
}
.text {
font-size:9pt
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class="text">目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
这个属性有三个值可选:normal, italic, oblique。normal是缺省值,italic, oblique都是斜体显示。例句如下:
.s1 {
font-sytle:italic}
<HTML>
<HEAD>
<TITLE>CSS字体风格</TITLE>
<Style Type="text/css">
<!--
H1{
font-style:italic
}
.text {
font-style:oblique
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class="text">目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
这个属性常用值是normal和bold,normal是缺省值。例句如下:
<p style = "
font-weight:bold">这段文字字体的浓淡属性(font-weight)值是bold。<p>
<HTML>
<HEAD>
<TITLE>CSS字体加粗</TITLE>
<Style Type="text/css">
<!--
H1{
font-weight:900
}
.text {
font-weight:bolder
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class=text>目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
这个属性有两个值,normal和small-caps,normal是缺省值。small-caps表示小的大写字体(小号的大写字母)。例句如下:
.s1 {
font-variant:small-caps}
<html>
<head>
<title>字体变量属性 font-variant</title>
<STYLE>
.s1 {font-variant:small-caps}
</STYLE>
</head>
<body>
<p>字体变量(font-variant)属性有两个值,一个是缺省值normal,另外一个是small-caps。下面这段文字的字体变量属性(font-variant)是small-caps。</p>
<p class = "s1">The font-variant value of the text is "small-caps". </p>
</body>
</html>
这个属性是各种字体属性的一种快捷的综合写法。这个属性可以综合字体风格属性(font-style),字体变量属性(font-variant),字体浓淡属性(font-weight),字体大小属性(font-size)等属性。例句如下:
在font属性里缩写line-height值紧跟着font-size值,使用斜杠隔开<font-size>/<line-height>
.s1 {
font:italic normal bold 11pt arial}
<html>
<head>
<title>字体属性 font</title>
<STYLE>
.s1 {font:italic normal bold 11pt Arial}
.s2 {font:normal small-caps normal 14pt Courier}
</STYLE>
</head>
<body>
<p class = "s1">这段文字的字体风格(font-style)属性值是italic,字体变量(font-variant)属性值是normal,字体浓淡(font-weight)属性值是bold,字体大小(font-size)属性值是11pt,字体名称(font-family)属性值是Arial。</p>
<p class = "s2">这段文字的字体风格(font-style)属性值是normal,字体变量(font-variant)属性值是small-caps,字体浓淡(font-weight)属性值是normal,字体大小(font-size)属性值是14pt,字体名称(font-family)属性值是Courier。</p>
</body>
</html>
字体颜色(color)
字体颜色用CSS中的color属性来表示。
原文:http://home.51.com/myloveforyou217/diary/item/10034794.html