在网站建设时，CSS使用font-weight属性来定义字体粗细，该属性用法如下：
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-weight属性取值比较特殊，其中normal关键字表示默认值，即正常的字体，相当于取值为400。bold关键字表示粗体，相当于取值为700，或者使用<b>标签定义的字体效果。bolder（较粗）和lighter（较细）相对于normal字体粗细而言。
另外在制作网页时也可以设置值为100、200、300、400、500、600、700、800、900，它们分别表示字体的粗细，是对字体粗细的一种量化方式，值越大就表示越粗，相反就表示越细。
【示例】启动Dreamweaver，新建一个网页，保存为test.html，在<body>标签中输入以下内容：
<p>明月几时有？ 文字粗细是normal</p>
<h1>明月几时有？文字粗细是700</h1>
<div>明月几时有？ 文字粗细是bolder</div>
<p class="bold">明月几时有？ 文字粗细是bold</p>
在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，分别定义段落文本、一级标题、<div>标签包含字体的粗细效果，同时定义一个粗体样式类。
p { font-weight: normal } /*等于400*/
h1 { font-weight: 700 } /*等于bold*/
div{ font-weight: bolder } /*可能为500*/.
bold { font-weight:bold; } /*加粗显示*/设置字体的粗细提示：设置字体粗细也可以称为定义字体的重量。对于中文网页设计来说，一般仅用到bold（加粗）、normal（普通）两个属性值即可。
在制作网页的时候，CSS使用font-style属性来定义字体倾斜效果，该属性用法如下：font-style : normal | italic | oblique其中，normal表示默认值，即正常的字体；italic表示斜体；oblique表示倾斜的字体。italic和oblique两个取值只能在英文等西方文字中有效。
【示例】启动Dreamweaver，新建一个网页，保存为test.html，在<head>标签内添加<styletype= "text/css">标签，定义一个内部样式表，输入下面样式，定义一个斜体样式类。
.italic
{font-size:24px;
font-style:italic; /*斜体*/}
然后在<body>标签中输入一行段落文本，并把斜体样式类应用到该段落文本中。
<p>设置<span class="italic">文字斜体
</span></p>
CSS使用text-decoration属性来定义字体下划线、删除线和顶划线效果，该属性用法如下：text-decoration : none || underline || overline || line-through || blink其中，none表示默认值，即无装饰字体；un-derline表示下划线效果；line-through表示删除线效果，overline表示顶划线效果；blink表示闪烁效果。
【示例】启动Dreamweaver，新建一个网页，保存为test.html，在<head>标签内添加<styletype= "text/css">标签，定义一个内部样式表，然后输入下面样式，定义3个装饰字体样式类。
.underline {text-decoration:underline;} /*下划线样式类*/
.overline {text-decoration:overline;} /*顶划线样式类*/
.line-through {text-decoration:line-through;} /*删除线样式类*/
然后在<body>标签中输入3行段落文本，并分别应用上面的装饰类样式。
<p class="underline">设置下划线</p>
<p class="overline">设置顶划线</p>
<p class="line-through">设置删除线</p>
CSS使用font-variant属性来定义字体大小效果，该属性用法如下：font-variant : normal | small-caps其中，normal表示默认值，即正常的字体；small-caps表示小型的大写字母字体。
【示例1】启动Dreamweaver，新建一个网页，保存为test.html，在<head>标签内添加<styletype= "text/css">标签，定义一个内部样式表，然后输入下面样式，定义一个类样式。
.small-caps {/*小型大写字母样式类*/ font-variant:small-caps;}
然后在<body>标签中输入一行段落文本，并应用上面定义的类样式。
<p class="small-caps">font-variant </p>
注意：font-variant仅支持英文为代表的西文字体，中文字体没有大小写效果区分。如果设置了小型大写字体，但是该字体没有找到原始小型大写字体，则浏览器会模拟一个。例如，可通过使用一个常规字体，并将其小写字母替换为缩小过的大写字母。
【拓展】CSS还定义了一个text-transform属性，该属性也能够定义字体大小写效果。不过该属性主要定义单词大小写样式，用法格式如下：text-transform : none | capitalize | uppercase | lowercase其中，none表示默认值，无转换发生；capi-talize表示将每个单词的第一个字母转换成大写，其余无转换发生；uppercase表示把所有字母都转换成大写；lowercase表示把所有字母都转换成小写。
【示例2】新建一个网页，保存为test.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，定义3个类样式。
.capitalize {/ text-transform:capitalize; /*首字母大写*/}
.uppercase { text-transform:uppercase; /*全部大写*/}
.lowercase { text-transform:lowercase; /*全部小写*/}
然后在<body>标签中输入3行段落文本，并分别应用上面定义的类样式。
<p class="capitalize">
text-transform:capitalize;</p>
<p class="uppercase">
text-transform:uppercase;
</p><p class="lowercase">
text-transform:lowercase;</p>
分别在IE和Firefox浏览器中预览，则会发现：IE认为只要是单词就把首字母转换为大写；而Firefox认为只有单词通过空格间隔之后，才能够成为独立意义上的单词，所以几个单词连在一起时就算作一个词。
当前文章标题：如何在网页制作时使用CSS定义文本样式（二）
当前URL：http://www.lyjtt.cn/news/wzzz/3063.html
