网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS字体属性.pptx

本章介绍CSS设置背景、文本、列表、图像、表格、表单、链接等元素的属性样式。CSS3的属性CSS字体属性

目录CSS3的属性5.1CSS背景属性5.2CSS字体属性5.3CSS文本属性5.4CSS尺寸属性5.5CSS列表属性5.6CSS表格属性5.7CSS内容属性5.8CSS属性的应用5.9实训——制作社区网页面习题5

5.2CSS字体属性5.2.1字体类型属性font-family语法：font-family:name1,name2,…示例：div{font-family:Courier,“CourierNew”,monospace,“微软雅黑;}

5.2CSS字体属性5.2.2字体尺寸属性font-size语法：font-size:absolute-size|relative-size|length|percentage示例：p{font-style:normal;}p{font-size:12px;}p{font-size:20%;}

5.2CSS字体属性5.2.3字体倾斜属性font-style语法：font-style:normal|italic|oblique示例：p{font-style:normal;}p{font-style:italic;}p{font-style:oblique;}

5.2CSS字体属性5.2.4小写字体属性font-variant语法：font-variant:normal|small-caps示例：span{font-variant:small-caps;}

5.2CSS字体属性5.2.5字体粗细font-weight语法：font-weight:normal|bold|bolder|lighter|number示例代码如下。span{font-weight:800;}

5.2CSS字体属性【例5-11】设置字体样式案例，本例文件5-11.html的显示效果，如图5-13所示。

5.2CSS字体属性!DOCTYPEhtmlhtmlheadmetacharset=utf-8title字体属性/titlestyletype=text/cssh2{font-family:黑体;/*设置字体类型*/}p{font-family:Arial,TimesNewRoman;font-size:12pt;/*设置字体大小*/}.one{font-weight:bold;/*设置字体为粗体*/font-size:20px;}.two{font-weight:400;/*设置字体为400粗细*/font-size:20px;}.three{font-weight:900;/*设置字体为900粗细*/font-size:20px;}p.italic{font-style:italic;/*设置斜体*/}/style/head

5.2CSS字体属性bodyh2CSS字体属性/h2p网页主要是通过spanclass=one文字/span传递信息，字体具有两方面的作用：spanclass=two一是传递语义功能，二是美学效应。/span/ppclass=italic由于不同的字体给人带来不同的感受，因此对于spanclass=three网页设计人员/span来说，首先需要考虑的问题就是准确地选择字体属性。…。/p/body/html

5.2CSS字体属性5.2.6字体简写属性fontfont是字体属性的简写或复合属性。语法：font:font-style|font-variant|font-weight|font-size|line-height|font-familyfont:caption|icon|menu|message-box|small-caption|status-bar示例代码如下。h1{font:15pxboldArialnormal;}p{font:italicsmall-c