HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第8章 设置文字和文本样式

电子商务网页设计与制作授课教案学年第学期学院（部）专业（学部）课程名称电子商务网页设计与制作任课教师课内形式理论教学□课内实践□理实一体习题复习□考核评价□其他活动□学习量安排课内：课外形式调查分析小组研讨□实践任务理论探究□考核评价□汇报展示□其他活动课外：序号8授课日期月日月日月日月日授课班级课内教学内容：第8章设置文字和文本样式课外学习任务：（1）课前：以小组为单位，讨论使用CSS设置文字和文本样式的相关知识并以PPT的形式记录下来。（2）课后：=1\*GB3①使用font属性的多个属性值设置网页中指定文字的样式。=2\*GB3②使用文本样式设置中的各个属性来设置网页中文本的样式。=3\*GB3③使用CSS中的line-height属性和letter-spacing属性来设置网页中文本的间距。教学目标：知识目标掌握设置文字样式。掌握设置文本样式。掌握空格与换行。掌握设置间距。能力目标能够实现为文字添加样式；能够灵活使用文本样式。素质目标较强的专业知识和自学能力；丰富知识结构，提升专业知识；掌握jQuery动画效果的使用，理解并应用专业知识。重点难点及解决方法：（1）重点：使用CSS为文字添加样式解决方法：通过知识点讲解+课堂示例相结合的方法，教师讲解使用CSS为文字添加样式，引导学生积极思考，掌握相应知识；同时通过课堂示例展示，使学生可以掌握使用CSS为文字添加样式的能力；培养学生的思维能力和分析问题解决问题的能力。（2）难点：使用CSS添加文本样式解决方法：通过案例解析+启发式教学讲解的方式，细致讲解使用CSS添加为网页中的文本添加样式。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。课内教学内容及过程时间分配方法及手段1.设置文字样式【设置文字字体】在HTML中可以使用<fontface="字体名">来设置文字字体。在CSS中设置文字字体的属性是font-family，其语法格式如下。font-family:"字体1","字体2","字体3",…可以为文字设置多个字体，当在运行页面的浏览器中找不到第一种字体时，就会以第二种字体显示；如果也找不到第二种字体，则会以第三种字体显示，以此类推。如果设置的几种字体在浏览器中都无法找到，就自动以浏览器设置的默认字体显示。【设置文字大小】设置文字大小是指为页面中的文字设置绝对大小或相对大小。设置相对大小是指文字为相对父对象文字尺寸来设置的，包括larger和smaller，它使用成比例的em单位计算。设置绝对大小是指设置固定的文字大小，包括xx-small、x-small、larger等。说明：虽然这里可以用英文单词设置绝对大小，但是这些文字在浏览器中的显示效果与浏览器的设置有关，而不是真正绝对不变的。这些表示绝对大小的词就是针对浏览器设置的字体而定的。除了使用英文单词表示文字大小之外，还有一种设置文字大小的方式是使用具体的长度值或百分比。CSS样式表中可设置的文字大小如表8.1所示。表8.1CSS样式表中可设置的文字大小类型font-size取值或单位含义用英文单词表示绝对大小xx-small极小x-small很小small小medium中large大x-large很大xx-large极大用英文单词表示相对大小larger较大，一般比父对象中的字体大一些smaller较小，一般比父对象中的字体小一些采用具体的长度值（浮点数+单位）pt点，1pt=1/72inpx像素in英寸采用百分比%相对父对象中字体尺寸的比例使用CSS样式设置文字大小的语法格式如下。font-size:文字的大小这里的文字大小取值就是表8.1中的几种，不同取值的运行效果也不相同。【设置粗体】在页面中经常会使用加粗的字体表示强调，在HTML标签中加粗的程度只有一种；通过CSS样式可以为文字设置不同程度的加粗效果，其语法格式如下。font-weight:字体的粗度字体的粗细程度可以使用数值表示，也可以使用英文单词表示，具体如表8.2所示。表8.2设置字体的粗细字体粗细取值含义100~900数值越小，字体也越细，要求所取的数值是整百的，即只有100、200、300等normal正常字体效果bold加粗字体，其字体的粗细与字体设置为700时的效果基本相同bolder特粗字体，就是在加粗字体的基础上再加粗，基本相当于设置为900的效果lighter细体字，相对默认字体更细一些在页面中经常会使用加粗的字体表示强调，在HTML标签中加粗的程度只有一种；通过CSS样式可以为文字设置不同程度的加粗效果，其语法格式如下。font-weight:字体的粗度字体的粗细程度可以使用数值表示，也可以使用英文单词表示，具体如表8.2所示。表8.2设置字体的粗细字体粗细取值含义100~900数值越小，字体也越细，要求所取的数值是整百的，即只有100、200、300等normal正常字体效果bold加粗字体，其字体的粗细与字体设置为700时的效果基本相同bolder特粗字体，就是在加粗字体的基础上再加粗，基本相当于设置为900的效果lighter细体字，相对默认字体更细一些【设置文字颜色】CSS样式表中设置文字颜色的属性是color，其语法格式如下。color:颜色代码/颜色名称颜色代码是指颜色的十六进制数，颜色名称是颜色的英文名。【设置斜体】在CSS样式表中，也可以将文字设置为斜体显示，而且倾斜的程度有倾斜字体和偏斜体两种。设置斜体文字的语法格式如下。font-style:normal｜italic｜obliquefont-style可以取normal（正常字体）、italic（倾斜）和oblique（偏斜体）3种。【综合设置】前面介绍的几种属性都是以font开始的，其表示这几种属性都属于同一类别，都用来设置文字的字体效果。在CSS样式表中，还可以很方便地设置字体属性，即直接使用font属性进行设置。其语法格式如下。font:字体属性取值可以直接设置字体的各种属性值，各属性值之间用空格隔开。2.设置文本样式【设置阴影效果】CSS3中允许设置文本的阴影，让文本看起来更有立体感。设置阴影的属性为text-shadow，其语法格式如下。text-shadow:none|color|length|length|length|inherit各属性值的含义如下。none：不设置阴影。color：阴影的颜色。length：长度值。inherit：继承父级样式。CSS中的阴影有3个length要设置，第一个是水平方向的距离，可以为负值；第二个是垂直方向的距离，可以为负值；第三个为模糊半径的长度，不能为负值。例如：选择器{text-shadow:black0px0px5px;}以下代码为class属性值为e的元素设置了阴影，并且阴影在文字的右上方，但是该代码并没有指定阴影的颜色，因此阴影的颜色与文字本身颜色相同。.e{text-shadow:5px5px5px;}模糊半径也可以省略，如果不指定模糊半径，则阴影不存在模糊效果。例如：.e{text-shadow:5px5px;}阴影还可以设置多组效果，每组效果之间用逗号分隔开。例如：.e{text-shadow:black0px0px5px,0px0px10pxorange,red5px-5px;}【设置大小写转换】在CSS中处理大小写都是通过text-transform属性完成的，其语法格式如下。text-transform:capitalize|uppercase|lowercase|none|inherit各属性值的含义如下。capitalize：将每个文字的第一个字母大写。uppercase：将整个文字都变成大写。lowercase：将整个文字都变成小写。none：不改变文字的大小写。inherit：继承父级样式。【设置文本缩进】在没有使用CSS之前，一段文字的首行缩进都是使用空格来实现的。有了CSS之后，就不再需要在每个段落之前都加上两个空格了。使用CSS中的text-indent属性可以轻易实现缩进。text-indent属性的语法格式如下。text-indent:length|百分数|inherit各属性值的含义如下。length：缩进量，可以使用绝对单位值与相对单位值。百分数：相对父级元素的百分比来缩进。inherit：继承父级样式。【设置文本的水平对齐方式】使用text-align属性可以在CSS样式表中设置文本的水平对齐属性，包括左对齐、右对齐、居中对齐和两端对齐，其语法格式如下。text-align:left|right|center|justify【设置文本的水平对齐方式】文本垂直对齐属性vertical-align相当于HTML中的垂直对齐标签。它用于设置文本和其他元素（一般是上一级元素或者同行的其他元素）的垂直对齐方式，其语法格式如下。这个属性可取的值较多，其含义也各不相同。表8.3对各个取值进行了详细说明。表8.3垂直对齐的取值含义垂直对齐的取值含义baseline设置文本和上级元素的基线对齐sub设置文本显示为上级元素的下标，常在数组中使用super设置文本显示为上级元素的上标，常用于设置某个数值的乘方数top使文本元素与同行中最高的元素上端对齐bottom使文本元素与同行中高度最低的元素向下对齐text-top使文本元素与上级元素的文本向上对齐middle使文本垂直居中对齐。假如元素的基线与上级元素x高度的一半相加的值为H，则文本与高度H的中点垂直对齐。其中，x是指字母“x”的高度text-bootom使文本元素和上级元素的文本向下对齐百分比是相对元素行高属性的百分比，它会在上级元素基线上增加指定的百分比。如果取值为正数，则表示增加设置的百分比；反之取值为负数，则表示减少相应的百分比【设置文本流入方向】CSS中的direction属性用来设置文本流入的方向。direction属性的语法格式如下。direction:ltr|rtl|inherit各属性值的含义如下。ltr：ltr（lefttoright）用于设置文本从左向右流入。该值为direction属性的默认值。rtl：rtl（righttoleft）用于设置文本从右向左流入。inherit：继承父级样式。【设置文本修饰】文本修饰一般包括设置文字下画线、上画线、删除线等，这些都可以使用text-decoration属性来设置，其语法格式如下。text-decoration:underline|overline|line-through|blink|nonetext-decoration属性可以取5种值，其含义分别如表8.4所示。表8.4文本的修饰属性值及其含义文本修饰属性值含义underline给文本添加下画线overline给文本添加上画线line-through给文本添加删除线blink给文本添加闪烁效果，该属性的效果兼容性很差不建议使用none不设置任何修饰属性3.空格与换行【空格的处理方式】在HTML中，浏览器会自动将连续多个空格处理成为一个空格，此时可以使用pre元素来让浏览器在显示时不更改源代码中的排版方式。这些在CSS中都可以统一使用white-space属性来完成。white-space属性的语法格式如下。white-space:normal|pre|nowrap|inherit各属性值的含义如下。normal：默认值，浏览器会自动忽略多余的空格，连续多个空格只显示一个。pre：与pre元素类似，浏览器不忽略源代码中的空格。nowrap：设置文本不自动换行。inherit：继承父级样式。【字内换行】当文本宽度超出浏览器宽度时，默认情况下会自动换行，但如果正好是在较长的英文单词中间，那么整个单词都会被移动到下一行显示，这样本行的右侧就有较大的空白，影响美观。使用word-break（字内换行）属性可以将英文单词打散显示，也可以设置在换行前或换行后整体显示，其语法格式如下。word-break:normal/break-all/keep-all其中，normal是正常情况下的显示方式，即当单词中需要换行时，该单词会在下一行显示，而本行后面保留空白；break-all允许在单词内换行；keep-all只能在半角空格或连字符处换行。4.设置间距【设置行间距】图8.17行高示意图行间距是指文本行与行之间的距离。在CSS中不能直接定义行间距，只能通过line-height属性来定义行高。行高是指上一行文字的基线与下一行文字的基线之间的距离。行高等于行间距加上文字高度，如图8.17所示。图8.17行高示意图设置line-height属性的语法格式如下。line-height:normal|number|length|百分数|inherit各属性值的含义如下。normal：默认值，使用的是默认行高。number：在当前文字大小的基础上增加来设置行高，不能为负值。length：指定行高数，可以是绝对长度单位，也可以是相对长度单位，不能是负值。百分数：用百分数指定行高，相当于字体大小的百分比。inherit：继承父级属性。【设置字间距】在CSS中可以通过letter-spacing属性来设置字间距。对于英文来说，字间距是指每个字母之间的距离。对于中文来说，字间距是每个字之间的距离。设置letter-spacing属性的语法格式如下。letter-spacing:normal|length|inherit各属性值的含义如下。normal：默认值，使用默认的字间距。length：设置字间距，可以是绝对单位值或相对单位值。inherit：继承父级属性。【设置词间距】在CSS中可以使用word-spacing来设置词间距，词间距是针对英文而言的。目前，浏览器还不能区分中文的“词”与“字”。设置word-spacing属性的语法格式如下。word-spacing:normal|<length>|inherit各属性值的含义如下。normal：默认值，即使用默认的词间距。length：设置词间距的大小，可以是绝对单位值或相对单位值。inherit：继承父级属性。5.教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。展示本次课《职业素养评价表》，组织学生自评、互评。6．上机指导1．使用font属性的多个属性值设置网页中指定文字的样式。2．使用文本样式设置中的各个属性来设置网页中文本的样