第8章 用CSS控制超链接样式.docVIP

用CSS控制超级链接样式 超级链接是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。在网页中能成为超级链接的元素可以是一段文本或者是一个图片。当浏览者选择已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型打开或运行。 改变超级链接的基本样式：网页上使用的超级链接通常是文字或图片。 使用文字和图片实现超级链接的语法： a href=””新浪网/a a href=”picture.jpg”img src=”picture.jpg” //a 超链接伪类表 a:link 设置超链接在未被访问前的样式 a:active 设置超链接在被用户激活（在鼠标点击与释放之间发生的事件）时的样式 a:visited 设置超链接在其链接地址已被访问过时的样式 a:hover 设置超链接在其鼠标悬停时的样式 伪类的CSS样式定义： style type=”text/css” a:link{color:green;} /*设置超链接的未被访问前文字颜色为绿色*/ a:active{color:red;} /*设置超链接在被用户激活时文字颜色为红色*/ a:visited{color:orange;} /*设置超链接已被访问过时文字的颜色为橘色*/ a:hover{color:blue;} /*设置超链接在其鼠标悬停时文字的颜色为蓝色*/ /style 在默认情况下，文字作为超级链接时会带有下划线，用于提示该文字可链接。若要消除该超级链接的下划线，就要将text-decoration属性设置为none。 使用text-decoration属性设置超级链接无下划线： a{text-decoration:none;} /*设置超级链接无下划线*/ 超级链接背景图的应用：使用background给超级链接添加背景图片。 使用background给超级链接添加背景图片： a{text-decoration:none; /*设置超级链接无下划线。 background:url(dot.jpg) repeat-x bottom; /*使用图片dot.jpg为超级链接的背景图片，以横向平铺，底部对齐。*/ } 超级链接翻转效果：除了能给a标签设置背景图片，也能给超级链接的伪类设置背景图片。若给a:hover设置背景图片，那么当鼠标滑过该超级链接就能使图片产生翻转效果。 使用颜色实现超级链接的翻转效果： a{background:red;} /*设置超级链接背景颜色为红色*/ a:hover{background:blue;} /*设置鼠标滑过超级链接时背景颜色为蓝色*/ 使用背景图片实现超级链接翻转效果：使用背景图片同超级链接的翻转效果需要准备两张图片。一张图片应用在a标签上，另一张图片应用在hover伪类上。当鼠标没有接触超级链接时，超级链接的背景就是应用a标签上的背景图片；当鼠标滑过超级链接时，背景图片会更换为应用在hover伪类上的背景图片，从而实现翻转效果。 使用背景图片实现超级链接翻转效果： a{background:url(image1.jpg) repeat-x;} /*设置超级链接的背景图片为image1.jpg，横向方式平铺。*/ a:hover{background:url(image2.jpg) repeat-x;} /*设置鼠标滑过超级链接时背景图片为image2.jpg，横向方式平铺。 20