《七章节用CSS设置页面和浏览器元素》由会员分享,可在线阅读,更多相关《七章节用CSS设置页面和浏览器元素(11页珍藏版)》请在金锄头文库上搜索。
1、第七章第七章用用CSS设置页面设置页面和浏览器的元素和浏览器的元素网络工程系网络工程系 张红芳张红芳qqqq:162038565162038565Tel:15531199167Tel:主要内容:主要内容:v用CSS设置丰富的超链接特效v鼠标特效重点:用CSS设置超链接的特效7.1 丰富的超链接特效丰富的超链接特效 v动态超链接(7-1.html)v按钮式超链接 (7-2.html)v浮雕式超链接 (7-3.html)7.1.1 动态超链接动态超链接v超链接标记超链接文字在默认的浏览器浏览方式下,超链接统一为蓝色并且有下划线,被点击过的超链接则为紫色并且也有下划线,如下图所示:7.1.1 动态超
2、链接动态超链接v用CSS设置超链接的属性及动态效果例如:a /*超链接的样式*/ text-decoration:none; /*去掉下划线*/ 7.1.1 动态超链接动态超链接vCSS的伪类别(7-1.html)可制作动态效果的可制作动态效果的CSS伪类别属性伪类别属性属性属性说明说明a:link超链接的普通样式,即正常浏览状态的样式a:visited被点击过的超链接的样式a:hover鼠标指针经过超链接上时的样式a:active在超链接上单击时,即“当前激活”时,超链接的样式7.1.2 按钮式超链接按钮式超链接v按钮式超链接(7-2.html)通过CSS的普通属性来模拟按钮的效果。关键:加
3、入CSS的3个伪属性,对a标记进行整体控制。对于普通超链接和点击过的超链接采用同样的样式,并且利用边框的样式模拟按钮效果。而对于鼠标指针经过时的超链接,相应地改变文字颜色、背景色、位置和边框,从而模拟按钮“按下去”的特效。7.1.3 浮雕式超链接浮雕式超链接v浮雕式超链接(7-3.html)通过超链接背景图片的变换,实现浮雕的效果。7.2 鼠标特效鼠标特效vCSS控制鼠标箭头CSS通过cursor属性可以设置各式各样的鼠标指针样式。该属性可以在任何标记里使用,从而可以改变各种页面元素的鼠标效果。其他鼠标指针效果见书164页。如: body cursor:pointer; 7.2 鼠标特效鼠标特效v鼠标变换的超链接(7-4.html)