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