使用CSS样式美化超链接和鼠标指针学习教案

1、使用使用CSS样式样式(yngsh)美化超链接和鼠标美化超链接和鼠标指针指针第一页，共49页。第1页/共49页第二页，共49页。第2页/共49页第三页，共49页。【任务(rn wu)描述】第3页/共49页第四页，共49页。【任务(rn wu)展示】案例案例(n l)效果图效果图第4页/共49页第五页，共49页。【任务(rn wu)实现】HTML代码代码(di m)第5页/共49页第六页，共49页。【任务(rn wu)实现】CSS样式样式(yngsh)代码代码第6页/共49页第七页，共49页。【相关(xinggun)知识】 超链接是由标签组成，超链接可以是文字或图像。添加了超链接的文字具有自己默

2、认的样式，从而和其他文字区分开，其中默认的超链接样式为蓝色文字且有下划线（如：超链接）。通过CSS可以修饰超链接效果，从而达到(d do)美化页面整体的效果。 第7页/共49页第八页，共49页。对于超链接伪类的设置属性如下： a:link：定义超链接对象在没有(mi yu)访问前的样式； a:hover：定义当鼠标移至超链接对象上时的样式； a:active：定义当鼠标单击超链接对象时的样式； a:hover：定义超链接对象已经被访问过后的样式。 第8页/共49页第九页，共49页。第9页/共49页第十页，共49页。第10页/共49页第十一页，共49页。【任务(rn wu)描述】第11页/共49

3、页第十二页，共49页。【任务(rn wu)展示】案例案例(n l)效果图效果图第12页/共49页第十三页，共49页。【任务(rn wu)实现】CSS样式样式(yngsh)代码代码第13页/共49页第十四页，共49页。【相关(xinggun)知识】 在很多网页中，超链接制作成各种按钮的效果，这些效果大多采用图像的方式来实现(shxin)。通过CSS样式的设置，同样可以制作出类似于按钮效果的导航菜单超链接。第14页/共49页第十五页，共49页。第15页/共49页第十六页，共49页。 n怎样合理地设置网页中的超链接？n 在网页中创建超链接时，用户需要综合整个网站中的所有页面进行考虑，合理地安排超链接

4、，这样才会使整个网站中的页面具有一定的条理性，创建超链接的建议如下：n 避免孤立文件的存在；n 在网页中避免使用过多的超级链接；n 网页中的超链接不要超过4层；n 页面较长时可以使用书签；n 设置主页(zh y)或上一层的链接。第16页/共49页第十七页，共49页。【任务(rn wu)描述】第17页/共49页第十八页，共49页。【任务(rn wu)展示】案例案例(n l)效果图效果图第18页/共49页第十九页，共49页。【任务(rn wu)实现】CSS样式样式(yngsh)代码代码第19页/共49页第二十页，共49页。【相关(xinggun)知识】n链接路径可以分为几种形式？n相对路径：最适合

5、网站的内部链接。只要是属于同一网站下的，即使不在同一个目录下，相对路径也非常适合。n绝对路径：为文件提供完整的路径，包括使用(shyng)协议。适合网站的外部链接。n根路径：同样适用于创建内部链接，但大多数情况下，不建议使用(shyng)此种路径形式。通过适用以下两种情况：当站点的规模非常大，放置于几个服务器上时；当一个服务器上同时放置几个站点时。根路很以“ ”开始，然后是根目录下的目录名。第20页/共49页第二十一页，共49页。【任务(rn wu)描述】第21页/共49页第二十二页，共49页。【任务(rn wu)展示】案例案例(n l)效果图效果图第22页/共49页第二十三页，共49页。【任

6、务(rn wu)实现】CSS样式样式(yngsh)代码代码第23页/共49页第二十四页，共49页。【相关(xinggun)知识】 cursor属性用于设置光标在网页中的视觉效果，通过样式改变(gibin)鼠标形状，当鼠标放在被此选择设置、修饰过的区域上时，形状会发生改变(gibin)。具体的形状包括： 属性值属性值指针说明及对应效果指针说明及对应效果属性值属性值指针说明及对应效果指针说明及对应效果crosshair交叉十字n-resize向北的箭头text文本选择符号nw-resize指向西北的箭头waitWindows等待形状w-resize向西的箭头pointer手形sw-resize指向

7、西南的箭头default默认的鼠标形状s-resize向南的箭头help带问号的鼠标se-resize指向东南的箭头e-resize向东的箭头move移动指针ne-resize指向东北的箭头auto正常鼠标第24页/共49页第二十五页，共49页。n可以在一个页面中为不同的区域或元素应用多种光标指针(zhzhn)效果吗？n 可以。可以在多个类CSS样式中定义不同的cursor属性，将光标指针(zhzhn)定义为多种不同的效果，在页面中分别为相应的区域或元素应用相应的类CSS样式即可。n 但通常情况下，光标指针(zhzhn)效果在网页中使用较少，通常都是采用系统默认的光标指针(zhzhn)效果，在

8、网页中应用光标指针(zhzhn)效果最多不超过两种，否则会影响网页的便利性。 第25页/共49页第二十六页，共49页。【任务(rn wu)描述】第26页/共49页第二十七页，共49页。【任务(rn wu)展示】案例案例(n l)效果图效果图第27页/共49页第二十八页，共49页。【任务(rn wu)实现】HTML代码代码(di m)和和CSS样式代码样式代码(di m)第28页/共49页第二十九页，共49页。【任务(rn wu)描述】第29页/共49页第三十页，共49页。【任务(rn wu)展示】案例案例(n l)效果图效果图第30页/共49页第三十一页，共49页。【任务(rn wu)实现】C

9、SS样式样式(yngsh)代码代码第31页/共49页第三十二页，共49页。【相关(xinggun)知识】box-shadow : | ; 第32页/共49页第三十三页，共49页。第33页/共49页第三十四页，共49页。【任务(rn wu)描述】第34页/共49页第三十五页，共49页。【任务(rn wu)展示】案例案例(n l)效果图效果图第35页/共49页第三十六页，共49页。【任务(rn wu)实现】CSS样式样式(yngsh)代码代码第36页/共49页第三十七页，共49页。【相关(xinggun)知识】overflow : visible | auto | hidden | scroll

10、; 属性值属性值说明说明visible不剪切内容也不添加滚动条。auto在需要时剪切内容并添加滚动条。hidden不显示超过对象尺寸的内容。Scroll总是显示滚动条。Overflow属性值属性值第37页/共49页第三十八页，共49页。垂直方向垂直方向(fngxing)显示滚动条显示滚动条第38页/共49页第三十九页，共49页。【任务(rn wu)描述】第39页/共49页第四十页，共49页。【任务(rn wu)展示】Firefox浏览器中效果图浏览器中效果图第40页/共49页第四十一页，共49页。【任务(rn wu)实现】CSS样式样式(yngsh)代码代码第41页/共49页第四十二页，共49

11、页。【相关(xinggun)知识】resize : none | both | horizontal | vertical | inherit ; 属性值属性值说明说明none不提供元素尺寸调整机制。both提供元素尺寸的双向调整机制。horizontal提供元素尺寸的单向水平方向调整机制。vertical提供元素尺寸的单向垂直方向调整机制。inherit默认继承。resize属性值属性值第42页/共49页第四十三页，共49页。类型类型版本版本IE（）IE6.0 （）IE7.0 （）IE8.0Firefox（）Firefox3.0 （）Firefox3.5Chrome（）Chrome1.0.x

12、 （）Chrome2.0.xOpera（）Opera9.63Safari（）Safari3.1 （）Safari4.0resize属性(shxng)的兼容性第43页/共49页第四十四页，共49页。【任务(rn wu)描述】第44页/共49页第四十五页，共49页。【任务(rn wu)展示】Firefox浏览器下显示浏览器下显示(xinsh)效果效果第45页/共49页第四十六页，共49页。【任务(rn wu)实现】CSS样式样式(yngsh)代码代码第46页/共49页第四十七页，共49页。【相关(xinggun)知识】 outline属性(shxng)的语法格式如下： outline : outline-color | outline-style | outline-width | outline-offset | inherit ;outlline属性值属性值属性值属性值说明说明outline-color用于指定轮廓边框的颜色。outline-style用于指定轮廓边框的样式。outline-width用于指定轮廓边框的宽度。outline-offset 用于指定轮廓