PHP全栈开发（八）：CSS Ⅴ 超链接 style

CSS里面有专门针对超链接的选择器，也就是他们：

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

可以通过这些超链接状态选择器来根据超链接的状态设置不同的样式。

不仅可以通过这些选择器改变超链接的修饰，还能改变他们的颜色、背景色、字体、字体大小等等，以此来实现效果。

<style>

/*one这个类的超链接样式，在鼠标移动到上面时会改变颜色*/

a.one:link {color:#ff0000;}

a.one:visited {color:#0000ff;}

a.one:hover {color:#ffcc00;}

/*two这个类的超链接样式，在鼠标移动到上面时字体会增大*/

a.two:link {color:#ff0000;}

a.two:visited {color:#0000ff;}

a.two:hover {font-size:150%;}

/*three这个类的超链接样式，在鼠标移动到上面时会改变背景颜色*/

a.three:link {color:#ff0000;}

a.three:visited {color:#0000ff;}

a.three:hover {background:#66ff66;}

/*four这个类的超链接在鼠标移动到上面时，会改变字体*/

a.four:link {color:#ff0000;}

a.four:visited {color:#0000ff;}

a.four:hover {font-family:Georgia, serif;}

/*five这个类的超链接，在鼠标移动到上面时，会增加下划线*/

a.five:link {color:#ff0000;text-decoration:none;}

a.five:visited {color:#0000ff;text-decoration:none;}

a.five:hover {text-decoration:underline;}

</style>

巴特西

PHP全栈开发（八）：CSS Ⅴ 超链接 style

最新文章

热门文章