4-4CSS常用文本属性.docVIP

课程名称 WEB前端开发（1） 课次 13 任务、项目、课题名称 CSS常用文本属性 课时 2学时 教学内容 CSS常用文本属性：字体、字号、粗细、倾斜、文本装饰、颜色、对齐方式、首行缩进、行高 教学目标 掌握CSS常用文本属性及使用方法 教学重点 CSS常用文本属性：字体、字号、粗细、倾斜、文本装饰、颜色、对齐方式、首行缩进、行高 教学难点 CSS常用文本属性的应用 教学活动及主要环节 复习演示： 后代选择器如何进行样式的书写？（操作演示） 导入新课： 学习HTML时，可以使用文本样式标记及其属性控制文本的显示样式，但是这种方式繁琐且不利于代码的共享和移植。为此，CSS提供了相应的文本设置属性。使用CSS可以更轻松方便的控制文本样式。 新授：（案例演示） CSS字体样式属性 （通过案例将字体样式属性进行演示） （1）font-size:字号大小 font-size属性用于设置字号，一般用像素（px）表示。 (2)font-family:字体 font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。 （3）font-weight:字体粗细 font-weight属性用于定义字体的粗细。 (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%)。 (2) letter-spacing:字间距 letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。 (3) word-spacing:单词间距 word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。 (4) line-height:行间距，即行高。 line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。 (5) text-transform:文本转换 text-transform属性用于控制英文字符的大小写，其可用属性值如下： none：不转换（默认值）。 capitalize：首字母大写。 uppercase：全部字符转换为大写。 lowercase：全部字符转换为小写。 (6) text-decoration:文本装饰 text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下： none：没有装饰（正常文本默认值）。 underline：下划线。 overline：上划线。 line-through：删除线。 (7) text-align:水平对齐方式 text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下： left：左对齐（默认值） right：右对齐。 center：居中对齐。 (8) text-indent:首行缩进 text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。 (9) white-space:空白符处理 使用HTML制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。在CSS中，使用white-space属性可设置空白符的处理方式，其属性值如下： normal：常规（默认值），文本中的空格、空行无效，满行后自动换行。 pre：预格式化，按文档的书写格式保留空格、空行原样显示。 nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记br /。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。 小