从制造到创造
软件工程师成长之路
posts - 292,  comments - 96,  trackbacks - 0
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     <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>
    
<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>
    
<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>
    
<class=text>目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。</P>
    
</BODY>
</HTML>
 显示结果:


posted on 2007-10-08 11:56 CoderDream 阅读(2598) 评论(0)  编辑  收藏 所属分类: CSS

只有注册用户登录后才能发表评论。


网站导航:
 

<2007年10月>
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910

常用链接

留言簿(9)

我参与的团队

随笔分类(245)

随笔档案(239)

文章分类(3)

文章档案(3)

收藏夹(576)

友情链接

搜索

  •  

积分与排名

  • 积分 - 454153
  • 排名 - 115

最新评论

阅读排行榜

评论排行榜