人教统编使用CSS样式美化超链接和鼠标指针课件.pptx

Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,11/7/2009,#,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,1,*,使用,CSS,样式美化超链接和鼠标指针,超链接是整个互联网的基础，通过超链接能够实现页面的跳转、功能的激活等，超链接可以将网站中每个页面关联在一起。通过,CSS,样式，可以设置出美观大方、具有不同外观和样式效果的超链接，从而增加页面的样式效果和超链接交互效果。本章将介绍如何使用,CSS,样式对超链接效果进行控制。,超链接是网页中最重要、最根本的元素之一，网站中的每一个网页都是通过超链接的形式关联在一起的。如果页面之间是彼此独立的，那么这样的网站将无法正常运行。,sghgmyy,主要内容,8.1,定义超链接样式,制作活动公告,8.2,超链接伪类应用（,1,）,制作按钮式超链接,8.3,超链接伪类应用（,2,）,制作图像式超链接,8.4,使用,CSS,定义鼠标指针样式,改变默认的鼠标指针,8.5,使用,CSS,定义鼠标变换,效果,8.6 box-shadow,属性（,CSS3.0,）,为网页元素添加阴影,8.7 overflow,属性（,CSS3.0,）,网页元素内容溢出处理,8.8 resize,属性（,CSS3.0,）,在网页中实现区域缩放调节,8.9 outline,属性（,CSS3.0,）,为网页元素添加轮廓边框,sghgmyy,定义超链接样式,对于超链接的修饰，通常可以采用,CSS,伪类。伪类是一种特殊的选择符，能被浏览器自动识别。其最大的用处是在不同状态下可以对超链接定义不同的样式效果，是,CSS,本身定义的一种类。,本实例制作的是一个小活动的内容公告，通过对超链接的,4,种,CSS,样式伪类进行设置，实现了文本超链接样式的不同效果。,sghgmyy,【,任务描述,】,定义超链接样式,sghgmyy,【,任务展示,】,案例效果图,定义超链接样式,sghgmyy,【,任务实现,】,HTML,代码,定义超链接样式,sghgmyy,【,任务实现,】,CSS,样式代码,定义超链接样式,sghgmyy,【,相关知识,】,超链接是由,标签组成，超链接可以是文字或图像。添加了超链接的文字具有自己默认的样式，从而和其他文字区分开，其中默认的超链接样式为蓝色文字且有下划线（如：,超链接,）。通过,CSS,可以修饰超链接效果，从而达到美化页面整体的效果。,定义超链接样式,sghgmyy,对于超链接伪类的设置属性如下：,a:link,：定义超链接对象在没有访问前的样式；,a:hover,：定义当鼠标移至超链接对象上时的样式；,a:active,：定义当鼠标单击超链接对象时的样式；,a:hover,：定义超链接对象已经被访问过后的样式。,定义超链接样式,sghgmyy,什么是超链接？,超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。而用来超链接的对象，可以是一段文本或者是一个图片。,定义超链接样式,sghgmyy,按照,链接路径,的不同，超链接可以分为哪几种类型？,可分为以下几类：,内部链接；,外部链接；,锚记链接；,脚本链接。,超链接伪类应用（,1,）,在网页制作中，通过,CSS,样式的设置可以制作出各种各样的导航菜单超链接。本实例就是对,CSS,样式表进行设置，制作出按钮式导航菜单。,sghgmyy,【,任务描述,】,超链接伪类应用（,1,）,sghgmyy,【,任务展示,】,案例效果图,超链接伪类应用（,1,）,sghgmyy,【,任务实现,】,CSS,样式代码,超链接伪类应用（,1,）,sghgmyy,【,相关知识,】,在很多网页中，超链接制作成各种按钮的效果，这些效果大多采用图像的方式来实现。通过,CSS,样式的设置，同样可以制作出类似于按钮效果的导航菜单超链接。,超链接伪类应用（,1,）,sghgmyy,按照,链接对象的不同,，可以将超链接分为哪几类？,可分为以下几类：,内部链接；,图像链接；,锚记链接；,邮件链接；,空链接；,多媒体链接。,超链接伪类应用（,1,）,sghgmyy,怎样合理地设置网页中的超链接？,在网页中创建超链接时，用户需要综合整个网站中的所有页面进行考虑，合理地安排超链接，这样才会使整个网站中的页面具有一定的条理性，创建超链接的建议如下：,避免孤立文件的存在；,在网页中避免使用过多的超级链接；,网页中的超链接不要超过,4,层；,页面较长时可以使用书签；,设置主页或上一层的链接。,超链接伪类应用（,2,）,本实例制作的是网站页面的导航菜单，通过设置,4,种伪类样式代码，为文字的超链接添加了好看的背景，使得网页看起来更具有欣赏性。,sghgmyy,【,任务描述,】,超链接伪类应用（,2,）,sghgmyy,【,任务展示,】,案例效果,图,超链接伪类应用（,2,）,sghgmyy,【,任务实现,】,CSS,样式代码,超链接伪类应用（,2,）,sghgmyy,【,相关知识,】,链接路径可以分为几种形式？,相对路径：最适合网站的内部链接。只要是属于同一网站下的，即使不在同一个目录下，相对路径也非常适合。,绝对路径：为文件提供完整的路径，包括使用协议。适合网站的外部链接。,根路径：同样适用于创建内部链接，但大多数情况下，不建议使用此种路径形式。通过适用以下两种情况：当站点的规模非常大，放置于几个服务器上时；当一个服务器上同时放置几个站点时。根路很以“,”开始，然后是根目录下的目录名。,使用,CSS,定义鼠标指针样式,通常在浏览网页时，看到的鼠标指针的形状有箭头、手形和,I,字形，而在,Windows,环境下实际看到的鼠标指针种类要比这个广泛得多。,CSS,弥补了,HTML,语言在这方面的不足，通过,cursor,属性可以设置各式各样的鼠标指针样式。,sghgmyy,【,任务描述,】,使用,CSS,定义鼠标指针样式,sghgmyy,【,任务展示,】,案例效果图,使用,CSS,定义鼠标指针样式,sghgmyy,【,任务实现,】,CSS,样式代码,使用,CSS,定义鼠标指针样式,sghgmyy,【,相关知识,】,cursor,属性用于设置光标在网页中的视觉效果，通过样式改变鼠标形状，当鼠标放在被此选择设置、修饰过的区域上时，形状会发生改变。具体的形状包括：,属性值,指针说明及对应效果,属性值,指针说明及对应效果,crosshair,交叉十字,n-resize,向北的箭头,text,文本选择符号,nw-resize,指向西北的箭头,wait,Windows,等待形状,w-resize,向西的箭头,pointer,手形,sw-resize,指向西南的箭头,default,默认的鼠标形状,s-resize,向南的箭头,help,带问号的鼠标,se-resize,指向东南的箭头,e-resize,向东的箭头,move,移动指针,ne-resize,指向东北的箭头,auto,正常鼠标,使用,CSS,定义鼠标指针样式,sghgmyy,可以在一个页面中为不同的区域或元素应用多种光标指针效果吗？,可以。可以在多个类,CSS,样式中定义不同的,cursor,属性，将光标指针定义为多种不同的效果，在页面中分别为相应的区域或元素应用相应的类,CSS,样式即可。,但通常情况下，光标指针效果在网页中使用较少，通常都是采用系统默认的光标指针效果，在网页中应用光标指针效果最多不超过两种，否则会影响网页的便利性。,使用,CSS,定义鼠标变换效果,了解了如何设置鼠标样式，就可以轻松地制作出鼠标指针变化的超链接效果了，即鼠标移至某个超链接对象上时，可以实现超链接颜色变化、背景图像发生变化，并且鼠标指针也可以发生变化。,本实例制作的是一个艺术网站的小页面，通过定义相应的类,CSS,样式，从而实现了改变鼠标变换样式的效果。,sghgmyy,【,任务描述,】,使用,CSS,定义鼠标变换效果,sghgmyy,【,任务展示,】,案例效果,图,使用,CSS,定义鼠标变换效果,sghgmyy,【,任务实现,】,HTML,代码和,CSS,样式代码,box-shadow,属性（,CSS3.0,）,在,CSS,中新增了为元素添加阴影的新属性,box-shadow,，通过该属性可以轻松地实现网页中元素的阴影效果。,sghgmyy,【,任务描述,】,box-shadow,属性（,CSS3.0,）,sghgmyy,【,任务展示,】,案例效果,图,box-shadow,属性（,CSS3.0,）,sghgmyy,【,任务实现,】,CSS,样式代码,box-shadow,属性（,CSS3.0,）,box-shadow,属性的语法格式如下：,第,1,个,值表示阴影水平偏移值，可以取正、负值；,第,2,个,值表示,阴影垂直偏移,值，可以取正、负值,；,第,3,个,值表示,阴影模糊值。,color,：用于设置阴影的颜色。,sghgmyy,【,相关知识,】,box-shadow:|;,box-shadow,属性（,CSS3.0,）,如果不通过,CSS3.0,新增的,box-shadow,属性,，如何实现网页元素的阴影效果？,目前各浏览器对,CSS3.0,的支持不相同。如果不使用,CSS3.0,新增的,box-shadow,属性,，要实现网页元素的阴影效果，可以通过,CSS,中的,shadow,或,Dropshadow,滤镜来实现。,sghgmyy,overflow,属性（,CSS3.0）,当对象的内容超过其制定的高度及宽度时，应该如何进行处理？在,CSS3.0,中新增了,overflow,属性，通过该属性可以设置当内容溢出时的处理方法。,本实例制作的是一个卡通插画页面，通过对,overflow,属性的设置，很好地处理了内容溢出的问题，使得页面变得更加整洁、美观且具有实用性。,sghgmyy,【,任务描述,】,overflow,属性（,CSS3.0）,sghgmyy,【,任务展示,】,案例效果,图,overflow,属性（,CSS3.0）,sghgmyy,【,任务实现,】,CSS,样式代码,overflow,属性（,CSS3.0）,sghgmyy,【,相关知识,】,overflow,属性的语法格式如下：,overflow:visible|auto|hidden|scroll;,属性值,说明,visible,不剪切内容也不添加滚动条。,auto,在需要时剪切内容并添加滚动条。,hidden,不显示超过对象尺寸的内容。,Scroll,总是显示滚动条。,Overflow,属性值,overflow,属性（,CSS3.0）,sghgmyy,能不能当内容溢出时，控制其只显示垂直或水平方向上的滚动条？,可以，,overflow,属性还有两个相关属性,overflow-x,和,overflow-y,，分别用于设置水平方向溢出处理和垂直方向上的溢出处理，,其属性值和设置方法与,overflow,属性完全相同。,垂直方向显示滚动条,resize,属性（,CSS3.0,）,在,CSS,中新增了区域缩放调节的功能设置，通过新增的,resize,属性，就可以实现页面中元素的区域缩放操作，调节元素的尺寸大小。,本实例通过添加相应的代码部分，使该页面中的部分区域对象有了缩放调节的功能。,sghgmyy,【,任务描述,】,resize,属性（,CSS3.0,）,sghgmyy,【,任务展示,】,Firefox,浏览器中效果图,resize,属性（,CSS3.0,）,sghgmyy,【,任务实现,】,CSS,样式代码,resize,属性（,CSS3.0,）,sghgmyy,【,相关知识,】,resize,属性的语法格式如下：,resize:none|both|horizontal|vertical|inherit;,属性值,说明,none,不提供元素尺寸调整机制。,both,提供元素尺寸的双向调整机制。,horizontal,提供元素尺寸的单向水平方向调整机制。,vertical,提供元素尺寸的单向垂直方向调整机制。,inherit,默认继承。,resize,属性值,resize,属性（,CSS3.0,）,sghgmyy,类型,版本,IE,（,）,IE6.0,（,）,IE7.0,（,）,IE8.0,Firefox,（,）,Firefox3.0,（）,Firefox3.5,Chrome,（）,Chrome1.0.x,（）,Chrome2.0.x,Opera,（,）,Opera9.63,Safari,（）,Safari3.1,（）,Safari4.0,resize,属性的兼容性,outline,属性（,CSS3.0,）,outline,属性用于为元素周围绘制轮廓边框，通过设置一个数值使边框边缘的外围偏移，可以起到突出元素的作用。,本实例通过添加,outline,属性并对其进行相关设置，从而实现了给页面中对象元素周围绘制轮廓外边框的效果。,sghgmyy,【,任务描述,】,outline,属性（,CSS3.0,）,sghgmyy,【,任务展示,】,Firefox,浏览器下显示效果,outline,属性（,CSS3.0,）,sghgmyy,【,任务实现,】,CSS,样式代码,outline,属性（,CSS3.0,）,sghgmyy,【,相关知识,】,outline,属性的语法格式如下：,outline:outline-color|outline-style|outline-width|outline-offset|inherit;,outlline,属性值,属性值,说明,outline-color,用于指定轮廓边框的颜色。,outline-style,用于指定轮廓边框的样式。,outline-width,用于指定轮廓边框的宽度。,outline-offset,用于指定轮廓边框偏移位置的数值。,inherit,默认继承。,outline,属性（,CSS3.0,）,sghgmyy,类型,版本,IE,（,）,IE6.0,（,）,IE7.0,（）,IE8.0,Firefox,（）,Firefox3.0,（）,Firefox3.5,Chrome,（）,Chrome2.0.x,Opera,（）,Opera9.64,Safari,（）,Safari4.0,outline,属性的兼容性,