项目7-CSS3美化网页.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2020/2/17,#,用,CSS,设置字体样式以及文本样式,|,用,CSS,设置网页背景图片,|CSS3,新增背景样式,|JavaScript,对象,|,用,CSS,设置列表样式,|,用,CSS,设置超链接伪类样式,|,导航菜单制作,CSS3,美化网页,知识目标,使用文本样式、字体样式美化网页,01.,02.,使用列表样式、背景样式美化网页,能力目标,能灵活运用,CSS,美化网页技术,01.,任务,1,用,CSS,设置字体样式 以及文本样式,01,02,用,CSS,设置字体样式,用,CSS,设置页面的文本样式,删除用户,任务,1,用,CSS,设置字体样式以及文本样式,-01,用,CSS,设置字体样式,（,1,）字体类型属性（,font-family,），,CSS,使用这个属性设定字体类型,（,2,）字体大小属性（,font-size,），这个属性可以设置字体的大小,（,3,）字体风格属性（,font-style,），这个属性有三个值可选：,normal,、,italic,、,oblique,（,4,）字体浓淡（粗细）属性（,font-weight,），这个属性常用值是,normal,和,bold,（,5,）字体颜色属性（,color,）,（,6,）字体大小写属性（,font-variant,）,（,7,）字体属性（,font,），这个属性是各种字体属性的一种快捷的综合写法。,任务,1,用,CSS,设置字体样式以及文本样式,-02,用,CSS,设置页面的文本样式,（,1,）文本对齐属性（,text-align,），这个属性用来设定文本的对齐方式,（,2,）文本修饰属性（,text-decoration,），这个属性主要设定文本划线的属性,（,3,）文本缩进属性（,text-indent,），这个属性设定文本首行缩进,（,4,）行高属性（,line-height,），这个属性设定段落中文本行与文本行之间的距离,（,5,）字间距属性（,letter-spacing,），这个属性用来设定字符之间的距离,（,6,）定义垂直对齐属性（,vertical-align,）,文本属性,2-1,文本属性,文本属性,2-1,文本属性,文本属性,2-1,文本属性,文本属性,2-1,文本属性,文本属性,2-1,文本属性,任务,2,用,CSS,设置网页背景图片,用,CSS,设置字体样式,用,CSS,设置页面的文本样式,删除用户,任务,2,用,CSS,设置网页背景图片,（,1,）背景颜色属性（,background-color,），这个属性为,HTML,元素设定背景颜色,（,2,）背景图片属性（,background-image,），这个属性为,HTML,元素设定背景图片,（,3,）背景重复属性（,background-repeat,），这个属性和,background-image,属性一起使用,（,4,）背景附着属性（,background-attachment,），这个属性和,background-image,一起使用,（,5,）背景位置属性（,background-position,），决定了背景图片的最初位置,文本属性,2-1,四种平铺效果,文本属性,2-1,四种平铺效果,文本属性,2-1,background-position,属性,文本属性,2-1,background-position,属性,文本属性,2-1,利用背景偏移取图标,文本属性,2-1,利用背景偏移取图标,文本属性,2-1,利用背景偏移取图标,任务,3 CSS3,新增背景样式,用,CSS,设置字体样式,用,CSS,设置页面的文本样式,删除用户,任务,3,CSS3,新增背景样式,（,1,）可以设置长度单位,(px),或百分比（设置百分比时，参照盒子的宽高）,（,2,）设置为,cover,时，会自动调整缩放比例，保证图片始终填充满背景区域，,如有溢出部分则会被隐藏。,（,3,）设置为,contain,会自动调整缩放比例，保证图片始终完整显示在背景区域。,任务,4CSS3,新增渐变,背景,01,02,03,线性渐变,径向渐变,重复渐变,任务,4 CSS3,新增渐变背景,-01,线性渐变,设置背景为线性渐变的语法格式如下：,background-image:linear-gradient(|,color stop,color stop,color stop*);,linear-gradient(),函数用于创建一个线性渐变的,图像,。,为了创建一个线性渐变，需要设置一个起始点和一个方向（指定为一个角度）的渐变效果，,还要定义终止色。终止色就是你想让,Gecko,去平滑的过渡，并且你必须指定至少两种，当,然也会可以指定更多的颜色去创建更复杂的渐变效果。,任务,4 CSS3,新增渐变背景,-02,径向渐变,设置背景为径向渐变的语法格式如下：,background-image:radial-gradient(,圆心坐标,渐变形状,渐变大小,color stop,color stop,color stop*);,radial-gradient(),函数用径向渐变创建,图像,。径向渐变由中心点定义。为了创建径向,渐变你必须设置两个终止色。,background-image:radial-gradient(shape size at,position,start-color,.,last-color);,任务,4 CSS3,新增渐变背景,-03,重复渐变,了解了线性渐变和径向渐变的使用方法后，接下来介绍一下重复渐变。对以上两种渐变方式,都是适用的，只需在两个属性前添加“,repeating-“,具体语法格式如下。,线性重复渐变的语法格式：,repeating-linear-gradient(,起始角度,color stop,color stop,color stop*),径向重复渐变的语法格式：,repeating-radial-gradient(,圆心坐标,渐变形状渐变大小,color stop,color stop,color stop*),任务,5,用,CSS,设置列表样式,0,2,0,3,0,4,列表样式位置属性,访问对象属性,列表样式属性,0,1,列表样式类型属性,任务,5,用,CSS,设置列表样式,-01,列表样式类型属性,这个属性用来设定列表项标记的类型，精确控制列表的项目符号。主要有以下值：,disc,（缺省值，黑圆点）,circle,（空心圆点）,square,（小黑方块）,decimal,（阿拉伯数字）,none,（无列表项标记）,除此之外还有一些大小写的字母和罗马数字。,lower-roman,（小写罗马数字）,upper-roman,（大写罗马数字）,lower-alpha,（小写英文字母）,upper-alpha,（小写英文字母）,任务,5,用,CSS,设置列表样式,-02,列表样式位置属性,这个属性（,list-style-position,）有两个值：,outside,（以列表项内容为准对齐，即将项目符号显示在列表项的文本行以外，是默认值）,inside,（以列表项标记为准对齐，即将项目符号显示在列表项的文本行以内。）,任务,5,用,CSS,设置列表样式,-03,列表样式图片属性,这个属于自定义项目符号，列表项标记可以用图片来表示，用列表样式图片属性,（,list-style-image,）来设定图片，以扩展项目符号的个性化设计需求。,可以这样写：,ul list-style-image:url(“./images/css_ tutorials/dot02.gif”);,。,注意,url,字符串必须使用单引号或者双引号括起来，在,IE7,以及以下版本允许用户忽略引号。,任务,5,用,CSS,设置列表样式,-04,列表样式属性,这个属性是设定列表样式的一个快捷的综合写法。用这个属性可以同时设置列表样式,类型属性（,list-style-type,）、列表样式位置属性（,list-style-position,）和列表样式,图片属性（,list-style-image,）。,可以这样写：,ul list-style:circle inside url(“./images/css_ tutorials/dot02.gif”)p;,任务,6,用,CSS,设置超链,接伪类样式,01,02,03,伪类,设置超链接的样式属性,限定范围的样式设置,任务,6,用,CSS,设置超链接伪类样式,-01,伪类,所谓伪类，就是,CSS,内置类，,CSS,内部本身赋予它一些特性和功能，不用再利用,class=,或,id=,进行设置，可以直接拿来使用，伪类对元素进行分类是基于特征,的而不是它们的名字、属性或者内容，而根据标签处于某种行为或状态时的特征来,修饰样式。,伪类可以对用户与文档交互时的行为做出响应，伪类样式的基本语法为：,标签名,:,伪类名,属性,:,属性值,;,任务,6,用,CSS,设置超链接伪类样式,-02,设置超链接的样式属性,设置自己想要的超链接样式,lilist-style:none;float:left;width:120px;,a:link color:#FF0000,a:visited color:#00FF00,a:hover color:#FFCC00,a:active color:#0000FF,首,页,购,物,车,联系我们,登,录,注,册,任务,6,用,CSS,设置超链接伪类样式,-03,限定范围的样式设置,样式修饰范围的用法,.navigation lilist-style:none;float:left;width:120px;,.navigation li a:link color:#FF0000 /*,未被访问的链接 红色*,/,.navigation li a:visited color:#00FF00 /*,已被访问过的链接 绿色*,/,.navigation li a:hover color:#FFCC00 /*,鼠标悬浮在上的链接 橙色*,/,.navigation li a:active color:#0000FF /*,鼠标点中激活链接 蓝色*,/,首,页,购,物,车,联系我们,登,录,注,册,任务,7,导航菜单制作,用,CSS,设置字体样式,用,CSS,设置页面的文本样式,删除用户,任务,7,导航菜单制作,利用前面学习的内容，进行网页导航菜单的制作,总的思路是利用,div-ul-li,结构来组织，用列表的浮动属性将列表项（菜单项）设置到一行，,之后利用超链接的伪类样式按要求进行设置。,感谢聆听,