《移动Web前端开发》教学讲义 第10讲.docVIP

《移动WEB前端开发》 配套教学教案 第10讲 课时内容 文字修饰与超链接 授课时间 90分钟 课时 2 教学目标 ? 掌握CSS的文本控制方法 掌握CSS的列表控制方法 掌握CSS的超链接控制方法 教学重点 ? 熟练使用CSS的文本控制方法 ? 熟练使用CSS的超链接控制方法 教学难点 制作导航条 教学设计 1．教学思路：通过制作“西游人物”页面的文字和超链接进行修饰，促使学生熟悉CSS文本修饰和超链接的相关知识，能够灵活使用CSS装饰页面。 2．教学手段：（1）演示法，通过软件操作帮助学生掌握制作方法；（2）讲授法，通过知识讲解帮助学生掌握教学重点。 教学内容 演示案例引入新课： CSS的文字效果很丰富，比如文字的字体、大小、颜色、粗细、下划线、顶划线、删除线、斜体、英文字母大小写等。段落文字的常用效果包括：水平对齐方式、垂直对齐方式、行间距、字间距、行高、首字放大等。超链接的效果大多需要在页面浏览时动态显示出来。 案例效果1 案例效果2 知识讲解：具体可结合本项目的PPT课件进行配合讲解。 1．CSS控制文本样式 1）设置文字的字体 设置文字字体的语法格式如下： 选择器{font-family: 属性值;} font-family属性可以同时声明多种字体，字体之间用逗号分隔开。另外一些字体的名称中会出先空格，例如“Times New Roman”字体，这时要用双引号将其括起来，是浏览器知道这是一种字体名称，要用英文引号。 2）设置字体的倾斜效果 文字的倾斜并不是真的把字体拉斜实现的，倾斜的字体是一个独立的字体，对应于操作系统中的某一个字库文件。严格来说，在英文中，字体的倾斜有以下3种： ·normal:正常倾斜，默认值。 ·italic：意大利体。 ·oblique：真正的倾斜。 CSS中的font-style属性用来控制字体的倾斜，可以设置为“正常”、“意大利体”、“倾斜”三种样式，例如： p{font-style:normal;} 3）设置文字加粗效果 在HTML中使用b、或者strong将文字设置为粗体，在CSS中使用font-weight属性控制文字的粗细，可以将文字的粗细进行细致的划分，更重要的是CSS还可将本来是粗体的文字变成正常粗细。例如： p{font-weight:normal;} div{font-weight:12px;} 对于在网页中的文本，其font-weight属性的设置有：normal（正常粗细）、bold（粗体）、bolder（加粗体）、lighter（比正常粗细还细）、100-900（共有9个层次100，200……900，越大越粗）。 4）英文字母大小写转换 英文转换由属性text-transform属性控制，有3个属性值：capitalize（单词首字母大写）、uppercase（全部大写）、lowerocase（全部小写）。例如： #p1{text-transform: capitalize;} #p2{text-transform: uppercase;} #p3{text-transform: lowercase;} 5）控制文字的大小 CSS通过font-size控制文字的大小，文字最常使用的单位是px和em，也可以用百分比做单位，例如： p{font-size:200%} /*表示文字大小为原来的两倍*/ p{font-size:12px;} 6）文字的装饰效果 在CSS中由text-decoration属性为文字加下划线、删除线和顶划线等多种装饰效果，text-decoration属性值有：none（正常显示）、underline（为文字加下划线）、line-through（为文字加删除线）、overline（为文字加顶划线）、blink（文字闪烁，仅部分浏览器支持）。可以同时设置多个属性值。例如： p{text-decoration:underline overline;} 7）设置段落首行缩进 首行缩进由text-indent属性控制，中文段落首行缩进两个文字空白，例如： p{text-indent:2em; /* 首行缩进2字符*/ padding-left:2em; /* 悬挂缩进2字符*/ text-indent:-2em;} /* 向外凸出2字符*/ 8）设置字词间距 设置字符间距，用letter-spacing属性添加字母之间的空白， word-spacing属性添加每个单词之间的空白，word-spacing对中文无效，例如： p{letter-spacing: 1px;word-spacing：1px;} 属性值有两种：normal（默认间隔）、 ?