工信版（中职）Web前端设计基础 项目七-2电子课件.pptx

《工信版（中职）Web前端设计基础 项目七-2电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）Web前端设计基础 项目七-2电子课件.pptx（29页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF（中职）Web前端设计基础 项目七-2电子课件CSS 3图文混排项目七授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练二 知识准备CSS 3美化文本；CSS 3美化段落；CSS 3图文混排。CSS 3美化图片；CSS 3美化段落1.设置词间距在网页设计中，如果单词之间的间隔设置合理，将给人赏心悦目的感觉。在CSS 3中使用word-spacing属性定义增加或者减少词与词之间的间隔。格式如下：word-spacing:normal|length;word-spacing属性值如表所示。属性值属性值说说 明明norma

2、l默认值，定义单词之间的标准间隔length定义单词之间的固定宽度，可取正负值，单位为像素CSS 3美化段落2.设置字间距在CSS 3中使用letter-spacing来定义文本之间的距离，格式如下：letter-spacing:normal|length;letter-spacing属性值如表所示。属性值属性值说说 明明normal默认间隔，以标准间隔显示length由浮点数和单位标识符组成的长度值，可取正负值，单位为像素CSS 3美化段落3.设置文本修饰效果在CSS 3中，使用text-decoration属性可以为文本设置多种修饰效果，如下划线、删除线等，格式如下：text-decora

3、tion:属性值;text-decoration属性值如表所示。属性值属性值说说 明明none默认值，对文本不进行任何修饰，用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式overline上划线underline下划线line-through删除线blink闪烁CSS 3美化段落3.设置文本修饰效果【例7-4】CSS 3美化段落实例一，代码如下所示（示例文件7-4.html）。CSS3美化段落例1pline-height:10px;始信泥土有芬芳转眼捏成这般模样你是女娲托生的精灵你是夸父追日的梦想Let me gently walk past you.Bathed in your ch

4、ildlike eyes.Let me walk through your eyes.Small feet running in the field of hope.Well,ChinaMy dream!The dream is fragrant.在chrome浏览器中预览CSS 3美化段落4.设置文本的垂直对齐方式在CSS 3中，使用vertical-align属性设置垂直对齐方式，此属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，可设置为负长度值和百分比值。在表单元格中，此属性可设置单元格内容的对齐方式。格式如下：vertical-align:属性值;vertical-align

5、属性值如表所示。属性值属性值说说 明明baseline默认，元素放在父元素的基线上sub垂直对齐文本的下标super垂直对齐文本的上标top元素的顶端与行中最高元素的顶端对齐text-top元素的顶端与父元素字体的顶端对齐middle此元素放在父元素的中部bottom元素的顶端与行中最低元素的顶端对齐text-bottom把元素的底端与父元素字体的底端对齐length设置元素的堆叠顺序%使用 line-height 属性的百分比值来排列此元素，允许使用负值inherit从父元素继承 vertical-align 属性的值CSS 3美化段落5.设置文本的水平对齐方式文本除了垂直对齐方式外，还有水

6、平对齐方式，包括水平方向上的居中、左对齐、右对齐等。在CSS 3中，使用text-align属性可定义文本的水平对齐方式，格式如下：text-align:属性值;text-align属性值如表所示。属性值属性值说说 明明start文本向行的开始边缘对齐end文本向行的结束边缘对齐left文本向行的左边缘对齐，默认值right文本向行的右边缘对齐center文本在行内居中对齐justify文本根据text-justify的属性值设置分散对齐inherit继承父元素的对齐方式CSS 3美化段落6.设置文本大小写转换在文本编辑中，根据需要将大写字母转换为小写字母，或将小写字母转换为大写字母，都是非常

7、常见的。在CSS 3中，使用text-transform属性可定义文本的大小写转换，格式如下：text-transform:属性值;text-transform属性值如表所示。属性值属性值说说 明明none无转换capitalize将每个单词的第一个字母转换成大写，其余不转换uppercase转换成大写lowercase转换成小写CSS 3美化段落7.设置文本的行高在CSS 3中，使用line-height属性可定义文本的行高，即一行的高度，格式如下：line-height:属性值;line-height属性值如表所示。属性值属性值说说 明明normal默认行高，即网页文本的标准行高lengt

8、h百分比数值或由浮点数和单位标识符组成的长度值，可以为负值CSS 3美化段落8.设置文本的缩进在段落文本中通常使用首行缩进两个字符的方式，来表示段落的开始。在CSS 3中，使用text-indent属性定义文本块中的首行缩进，格式如下：text-indent:length;其中，length属性值表示由百分比数值或由浮点数和单位标识符组成的长度值，可以为负值。也就是说使用text-indent属性上课以定义两种缩进方式，一种是直接定义缩进的长度，另一种是定义缩进的百分比。CSS 3美化段落9.设置文本的空白处理在CSS 3中，使用white-space属性定义对字符串或文本间空白的处理方式，格

9、式如下：white-space:属性值;white-space属性值如表所示。属性值属性值说说 明明normal默认值，空白会被浏览器忽略pre空白会被浏览器保留nowrap文本不会换行，文本会在同一行上继续，直到遇到标签为止pre-wrap保留空白，但是正常地进行换行pre-line合并空白，但是保留换行符inherit从父元素继承white-space属性值CSS 3美化段落10.设置文本的反排在编辑网页文本时，通常文档的基本方向是从左到右，有时需要将文档的方向显示为从右到左，在CSS 3中，通过unicode-bidi和direction两个属性来解决文本反排的效果。unicode-bi

10、di格式如下：unicode-bidi:属性值;unicode-bidi属性值如表所示。属性值属性值说说 明明normal默认值。元素不会打开附加的一层嵌套，对于行内元素，顺序的隐式重排会跨元素边界进行embed如果是一个行内元素，将会打开附加的一层嵌套，这个嵌套层的方向由 direction 属性指定，会在元素内部隐式地完成顺序重排bidi-override这会为行内元素创建一个覆盖，对于块级元素，将为不在另一块中的行内后代创建一个覆盖。这说明，顺序重排在元素内部严格按照 direction 属性进行；忽略了双向算法的隐式部分。CSS 3美化段落10.设置文本的反排direction属性用于

11、设置文档流的方向，其格式如下：direction:属性值;direction属性值如表所示。属性值属性值说说 明明ltr文本流从左到右rtl文本流从右到左inherit文本流的值不可继承CSS 3美化段落10.设置文本的反排【例7-5】CSS 3美化段落实例二，代码如下所示（示例文件7-5.html）。CSS3美化段落例2pline-height:8px;中国梦始信泥土有芬芳转眼捏成这般模样你是女娲托生的精灵你是夸父追日的梦想Let me gently walk past you.Bathed in your childlike eyes.Let me walk through your ey

12、es.Small feet running in the field of hope.Well,China My dream!The dream is fragrant.在chrome浏览器中预览CSS 3美化图片1.图片大小在HTML 5网页排版中，设置图片的大小有三种方法，分别是：（1）通过描述标记width和height缩放图片。通过img标签的width和height属性来设置图片的大小。width和height分别表示图片的宽度和高度，可以是数值或百分比，单位可以是px。（2）使用CSS3中的max-width和max-height缩放图片。max-width和max-height分

13、别来设置图片的宽度最大值和高度最大值。在定义图片大小时，如果图片的默认尺寸超过了定义的大小，就以max-width所定义的宽度值显示，图片的高度将同比例变化，如果定义的是max-height的值，图片的宽度将同比例变化。如果图片的尺寸小于最大宽度或者高度，那么图片就按原尺寸大小显示。（3）使用CSS3中的width和height缩放图片。在CSS3中可以使用width和height属性来设置图片的宽度和高度，从而实现对图片的缩放效果。如果仅仅设置了图片的一个属性值（width或者height），而没有设置另一个属性值时，图片本身会自动等比例缩放。CSS 3美化图片1.图片大小【例7-6】CSS

14、美化网页图片实例，代码如下所示（示例文件7-6.html）。CSS美化网页图片#img02max-width:150px;#img03width:75px;height:75px;在chrome浏览器中预览CSS 3美化图片2.设置图片的对齐方式在一个图文页面中，图片对齐方式和文字排版同样影响页面的整洁简约。下面学习使用CSS 3属性定义图文对齐方式。设置图片水平对齐text-align图片的水平对齐方式和文本的水平对齐方式类似，都有左、中、右三种对齐方式。由于标签本身没有对齐属性，所以要定义图片的对齐方式，不能对标签直接定义图片样式，需要在图片的上一级标签（父标签）定义对齐方式，让图片继承父

15、标签的对齐方式，即使用CSS继承父标签的text-align属性来定义对齐方式。CSS 3美化图片2.设置图片的对齐方式text-align属性取值如表所示。text-align属性值属性值说明说明left默认值，左对齐center居中对齐right右对齐CSS 3美化图片2.设置图片的对齐方式【例7-7】图片的水平对齐实例，代码如下所示（示例文件7-7.html）。图片的水平对齐方式imgwidth:75px;height:75px;图片左对齐图片居中对齐图片右对齐在chrome浏览器中预览CSS 3美化图片2.设置图片的对齐方式设置图片垂直对齐vertical-align通过对图片的垂直对

16、齐方式的设置，可以设置图片和文字的高度一致，在CSS 3中使用vertical-align属性来定义。vertical-align属性设置元素的垂直对齐方式，就是定义行内元素和基线相对于该元素所在行的基线的垂直对齐，允许指定负值和百分比值，就会使元素降低。vertical-align属性常用取值如表所示。vertical-align属性取值属性取值说明说明top把元素的顶端与行中最高元素的顶端对齐middle把此元素放置在父元素的中部baseline默认，元素放置在父元素的基线上bottom把元素的底端与行中最底的元素底端对齐CSS 3美化图片2.设置图片的对齐方式【例7-8】图片的垂直对齐实

17、例，代码如下所示（示例文件7-8.html）。图片的垂直对齐方式pborder:1px red solid;margin-top:5px;imgwidth:75px;height:75px;垂直对齐方式：vertical-align:top;垂直对齐方式：vertical-align:middle;垂直对齐方式：vertical-align:bottom;在chrome浏览器中预览CSS 3图文混排1.设置图文环绕效果在CSS 3中，使用浮动属性float可以设置文字环绕效果。float属性主要是定义元素向哪个方向上浮动，浮动的元素不管它是哪种元素，都会生成一个块。一般情况下，此属性总应用于图

18、像，使文字环绕在图像周围，有时也可以应用于其他元素浮动，但需要指定一个明确的宽度，否则此元素会尽可能变窄。float属性的取值如表所示。float属性值属性值说明说明none默认值，元素不浮动left元素向左浮动right元素向右浮动CSS 3图文混排2.设置图片和文字的间距如果需要设置图片和文字之间的距离，即文字之间存在一定间距，可以使用CSS3中的padding属性来设置。padding属性主要用来在一个声明中设置所有内边距属性，即可以设置元素所有内边距的宽度，或者设置个边上内边距的宽度。padding属性的语法格式如下：padding:padding-top|padding-right|

19、padding-bottom|padding-left参数值padding-top用来设置距离顶部的内边距；padding-right用来设置距离右部的内边距；padding-bottom用来设置距离底部的内边距；padding-left用来设置距离左部的内边距。CSS 3图文混排2.设置图片和文字的间距【例7-9】图文混排实例，代码如下所示（示例文件7-9.html）。图文混排pfont-size:14px;text-indent:28px;imgwidth:200px;float:right;border:1px red solid;padding-top:10px;padding-bot

20、tom:30px;padding-left:50px;这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了;妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路;白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。路上只我一个人，背着手踱着。这一片天地好像是我的;我也像超出了平常的自己，到了另一世界里。

21、我爱热闹，也爱冷静;爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。在chrome浏览器中预览作业一、选择题1.下列_是设置行高的属性。A letter-spacing B line-height C word-spacing D line-height2.下列_是设置文本垂直对齐的属性。A text-indent B text-valign C vertical-align D text-decoration3.text-decoration用来增加文字的装饰样式，想要添加下划线应该加上_属性值。A line-through B overline C underline D bottomline二、上机实训上机完成例7-4和例7-9的实例操作。End