Web前端开发HTML5 CSS3教案CSS常用文本属性教案.doc

课程名称 WEB前端开发（1） 课次 11 任务、项目、课题名称 CSS常用文本属性 课时 2学时 教学内容 CSS常用文本属性：字体、字号、粗细、倾斜、文本装饰、颜色、对齐方式、首行缩进、行高 教学目标 掌握CSS常用文本属性及使用方法 教学重点 CSS常用文本属性：字体、字号、粗细、倾斜、文本装饰、颜色、对齐方式、首行缩进、行高 教学难点 CSS常用文本属性的应用 教学活动及主要环节 复习演示： 后代选择器如何进行样式的书写？（操作演示） 导入新课： 学习HTML时，可以使用文本样式标记及其属性控制文本的显示样式，但是这种方式繁琐且不利于代码的共享和移植。为此，CSS提供了相应的文本设置属性。使用CSS可以更轻松方便的控制文本样式。 新授：（案例演示） 一．CSS字体样式属性 （1）font-size:字号大小 font-size属性用于设置字号，一般用像素（px）表示。 例如，p{font-size:12px;} (2)font-family:字体 font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。 例如，p{ font-family:微软雅黑;} 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。 例如，body{font-family:华文彩云,宋体,黑体;} 当应用上面的字体样式时，会首选华文彩云，如果用户电脑上没有安装该字体则选择宋体，也没有安装宋体则选择黑体。当指定的字体都没有安装时，就会使用浏览器默认字体。 使用font-family设置字体时，需要注意以下几点： 各种字体之间必须使用英文状态下的逗号隔开。 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: Times New Roman;。 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。 （3）font-weight:字体粗细 font-weight属性用于定义字体的粗细。 例如：p{font-weight:bold;} h2{font-weight:normal;} (4) font-style:字体风格 font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下： normal：默认值，浏览器会显示标准的字体样式。 italic：浏览器会显示斜体的字体样式。 oblique：浏览器会显示倾斜的字体样式。 二．CSS文本外观属性 使用HTML可以对文本外观进行简单的控制，但是效果并不理想。为此CSS提供了一系列的文本外观样式属性，具体如下： (1)color:文本颜色 color属性用于定义文本的颜色，其取值方式有如下3种： 预定义的颜色值，如red，green，blue等。 十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。 RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。 需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。 (2) letter-spacing:字间距 letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。 (3) word-spacing:单词间距 word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。 word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。 (4) line-height:行间距，即行高。 line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。 例如，p{line-height:25px;} (5) text-transform:文本转换 text-transform属性用于控制英文字符的大小写，其可用属性值如下： none：不转换（默认值）。 capitalize：首字母大写。 uppercase：全部字符转换为大写