链接上的CSS应用

来源：互联网发布：淘宝账户被冻结编辑：程序博客网时间：2024/06/05 05:21
<!DOCTYPE html><html><head><meta charset="utf-8"><style>/**    关于a的各种样式：        1. a:link 普通的 未被访问的链接        2. a:visited 已经被访问的链接        3. a:hover 鼠标位于链接上方        4. a:active 链接被点击的时刻        5. text-decoration：none用于去掉下划线    */    a.one:link {color:#ff0000; text-decoration:none;}    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;}/*下面加一个链接框：*/    a.link:link,a.link:visited    {        display:block;        font-weight:bold;        font-size:14px;        font-family:Verdana, Arial, Helvetica, sans-serif;        color:#FFFFFF;        background-color:#98bf21;        width:120px;        text-align:center;        padding:4px;        text-decoration:none;    }        a.link:hover,a.link:active    {        background-color:#7A991A;    }    </style></head><body><p>请把鼠标指针移动到下面的链接上，看看它们的样式变化。</p><p><b><a class="one"    href="/index.html" target="_blank">这个链接改变颜色  没有下划线</a></b></p><p><b><a class="two"    href="/index.html" target="_blank">这个链接改变字体尺寸</a></b></p><p><b><a class="three"  href="/index.html" target="_blank">这个链接改变背景色</a></b></p><p><b><a class="four"   href="/index.html" target="_blank">这个链接改变字体</a></b></p><p><b><a class="five"   href="/index.html" target="_blank">这个链接改变文本的装饰</a></b></p><!-- 链接框 --><h5 ><a href="" class="link">Link</a></h5></body></html>
0 0