Web 前端开发技术 教案 项目五 CSS 属性.docx

Web前端开发技术

教案设计

项目课题

CSS属性

授课时间

授课对象

大学生

学习目标

1.掌握CSS的属性。

2.掌握CSS的盒子及边框属性。

3.掌握CSS盒子的定位属性。

学习重点

掌握CSS的盒子及边框属性。

学习难点

掌握CSS盒子的定位属性。

教学方法

讲授法、课堂演示法

教学用具

多媒体课件

教学流程

教学环节

教学内容

教学过程

任务一CSS文本段落属性

一、字体属性

1.字号font-size属性

font-size属性用于设置字号,其值可以是绝对值或相对值。绝对值将字号设置为指定的大小,不允许用户在任何浏览器中改变字号,这不利于可用性,但在确定输出的物理尺寸时很有用;相对值是相对于周围的元素来设置字号,允许用户在浏览器中改变字号。

(1)基本语法。

font-size:绝对值|相对值|关键字;

(2)语法说明。

①绝对值:可以使用in、cm、mm、pt、pc等单位为font-size属性赋值。

②相对值:可以使用em、ex、px、%等单位为font-size属性赋值。

由于网页通常是为了浏览而不是印刷,因此建议用相对单位来定义字号,如px。W3C推荐使用em尺寸单位,从而可以在所有浏览器中调整字号。

font-size属性也可以通过使用关键字来指定字号,font-size属性的关键字有xx-small、x-small、small、medium、large、x-large、xx-large等。在不同的终端设备上浏览的效果可能会有所差异。

2.文本风格font-style属性

在HTML中,使用em/em、i/i标记可将字形设置为斜体。在CSS中,可以使用font-style属性设置文本的风格,如显示斜体字样。

(1)基本语法。

font-style:normal|litalic|oblique;

(2)语法说明。

font-style属性值及说明如表5-1所示。

3.字体名称font-family属性

在CSS中,使用font属性可以设置丰富的字体,美化页面的外观。其中,font-family专门用于设置字体名称。

(1)基本语法。

font-family:字体1,字体2……字体n;

(2)语法说明。

当属性值为多个字体名称时,可以使用逗号分隔。浏览器依次查找字体,若存在则使用该字体;若不存在则会继续向后查找,依次类推,直至查找到最后一种字体;若最后一种字体仍不存在则使用默认字体(宋体)。如果字体名称中出现空格,则必须使用双引号将字体括起来。

4.字体变体font-variant属性

font-variant属性用于设置字体变体,主要用于控制小型大写字母的显示。

(1)基本语法。

font-variant:normal|small-caps;

(2)语法说明。

font-variant属性值及说明如表5-2所示。

5.字体粗细font-weight属性

在HTML中,使用strong/strong或b/b标记来设置字体加粗。在CSS中,可以使用font-weight属性设置文本字体的粗细。

(1)基本语法。

font-weight:normal|bold|bolder|lighter|100|200|……|900;

(2)语法说明。

font-weight属性值及说明如表5-3所示。

6.字体font属性

font属性是复合属性,可以一次完成多个字体属性的设置,包括字体粗细、风格、字体变体、字号、行高及字体名称。

(1)基本语法。

font:font-stylefont-weightfont-variantfont-size/line-heightfont-family;

(2)语法说明。

当利用font属性一次完成多个字体属性的设置时,各属性值之间必须使用空格隔开。前三个属性值可以不分先后顺序,默认为normal。大小和字体名称序列必须显式指定,先设置大小,再设置字体序列。当需要设置行高时,可以写在字体大小的后面,中间用“/”分隔,行高为可选的属性。font属性可以继承。

二、文本属性

在CSS中,不仅可以设置文本字体、大小、粗细、风格等,还可以对文本进行更精细的排版设置。

1.字符间距letter-spacing属性

letter-spacing属性可以设置字符与字符之间的距离。

(1)基本语法。

letter-spacing:normal|长度单位;

(2)语法说明。

normal表示默认字符间距,长度一般为正数,也可以使用负数,取决于浏览器是否支持。wor