第12章+css美化页面元素.pptVIP

WEB DESIGNS CS 第12章 css美化页面元素 田兵 软件工程系 tianbing2001@126.com WEB DESIGNS C 目录 12.1~12.4 WEB DESIGNS C 1、CSS 链接 以不同的方法为链接设置样式。 设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。 能够根据链接所处的状态来设置它们的样式。 链接的四种状态： a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 WEB DESIGNS C 实例 a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {color:#00FF00;} /* 已被访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */ a:active {color:#0000FF;} /* 正在被点击的链接 */ 常见的链接样式 在上面的例子中，链接根据其状态改变颜色。 让我们看看其他几种常见的设置链接样式的方法： WEB DESIGNS C 文本修饰 text-decoration 属性大多用于去掉链接中的下划线： 实例 a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;} WEB DESIGNS C 背景色 background-color 属性规定链接的背景色： 实例 a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;} WEB DESIGNS C 向链接添加其他样式 !DOCTYPE html html head style a.one:link {color:#ff0000;} a.one:visited {color:#0000ff;} a.one:hover {color:#ffcc00;} a.two:link {color:#ff0000;} a.two:visited {color:#0000ff;} a.two:hover {font-size:150%;} a.three:link {color:#ff0000;} a.three:visited {color:#0000ff;} a.three:hover {background:#66ff66;} a.four:link {color:#ff0000;} a.four:visited {color:#0000ff;} a.four:hover {font-family:微软雅黑;} a.five:link {color:#ff0000;text-decoration:none;} a.five:visited {color:#0000ff;text-decoration:none;} a.five:hover {text-decoration:underline;} /style /head body p请把鼠标指针移动到下面的链接上，看看它们的样式变化。/p pba class=one href=/index.html target=_blank这个链接改变颜色/a/b/p pba class=two href=/index.html target=_blank这个链接改变字体尺寸/a/b/p pba class=three href=/index.html target=_blank这个链接改变背景色/a/b/p pba class=four href=/index.html target=_blank这个链接改变字体/a/b/p pba class=five href=/index.html target=_blank这个链接改变文本的装饰/a/b/p /body /html WEB DESIGNS C 把链接显示为方框 !DOCTYPE html html head style a:link,a:visited { display:block; font-weight:bold; font-size:14px; font-f