3、CSS的属性和值
3.1、字体属性
3.1.1、字体族科
3.1.2、字体大小
3.1.3、字体风格
3.1.4、字体加粗
| 字体属性 |
描述 |
| font-family |
用一个指定的字体名或一个类的字体族科 |
| font-size |
字体显示的大小 |
| font-style |
设定字体风格 |
| font-weight |
以 bold 为值可以使字体加粗 |
1、字体族科 font-family
文件范例：13-4.htm
1 <!-- ------------------------------ -->
2 <!-- 文件范例：13-4.htm -->
3 <!-- 文件说明：CSS字体族科 -->
4 <!-- ------------------------------ -->
5 <HTML>
6 <HEAD>
7 <TITLE>CSS字体族科</TITLE>
8 <Style Type="text/css">
9 <!--
10 H1{
11 font-family: "隶书"
12 }
13 .text {
14 font-family: "宋体,仿宋_gb2312";
15 }
16 -->
17 </Style>
18 </HEAD>
19 <BODY>
20 <H1>主流的网页设计软件</H1>
21 <p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
22 </BODY>
23 </HTML>
文件说明：
第10～12设定H1标记样式，规定了字体为隶书，第13～15行设定了名为text的自定义样式，规定了字体为宋体或仿宋，即当客户机没有第一种
宋体字体的时候，浏览器会使用第2种仿宋字体显示。
定义了样式后，第20行的标题字会自动应用H1样式，而第21行通过了 class 属性引用了 text 样式。
显示结果：
2、字体大小
单位可以是厘米、像素、磅等，另外还有其他一些值，例如：xx-small、x-small、smaller、x-large、xx-large等。最常用的单位为pt。
文件范例：13.5.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-5.htm -->
<!-- 文件说明：CSS字体大小 -->
<!-- ------------------------------ -->
<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>
显示结果：
3、字体风格
| 字体风格属性值 |
描述 |
| normal |
普通的文字 |
| italic |
斜体的文字 |
| oblique |
倾斜的文字，在中文文字的使用上与italic 并无明显区别 |
文件范例：13-6.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-6.htm -->
<!-- 文件说明：CSS字体风格 -->
<!-- ------------------------------ -->
<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>
显示结果：
4、字体加粗
| 字体加粗属性值 |
描述 |
| 值 |
100～900之间 |
| normal |
普通的文字 |
| bold |
加粗 |
| bolder |
特粗 |
| lighter |
加细 |
文件范例：13-7.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-7.htm -->
<!-- 文件说明：CSS字体加粗 -->
<!-- ------------------------------ -->
<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>
显示结果：
posted on 2007-10-08 11:56
CoderDream 阅读(2607)
评论(0) 编辑 收藏 所属分类:
CSS