1.为访问/未访问链接添加不同的颜色
a:link { color: black; /* 未访问链接*/ } a:visited { color: greenyellow; /* 访问后的链接*/ } a:hover { color: lightcoral; /* 鼠标移动到链接上*/ } a:active { color: blue; /* 鼠标点击链接*/ }
<body> <a href="https://www.baidu.com">这是一个链接</a> <P><b>注意:</b>a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</P> <p><b>注意:</b>a:active 必须在 a:hover 之后。</p> </body>
2.在链接上使用文本装饰
a:link {text-decoration:none;} /* unvisited link */ a:visited {text-decoration:none;} /* visited link */ a:hover {text-decoration:underline;} /* mouse over link */ a:active {text-decoration:underline;} /* selected link */
<body> <p><b><a href="/css/" target="_blank">This is a link</a></b></p> <p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p> <p><b>注意:</b>active必须在hover之后定义是有效的.</p> </body>
3.指定链接的背景颜色
a:link {background-color:#B2FF99;} /* 未访问链接 */ a:visited {background-color:#FFFF85;} /* 已访问链接 */ a:hover {background-color:#FF704D;} /* 鼠标移动到链接上 */ a:active {background-color:#FF704D;} /* 鼠标点击时 */
<body> <p><b><a href="/css/" target="_blank">这是一个链接</a></b></p> <p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p> <p><b>注意:</b>active必须在hover之后定义是有效的.</p> </body>
4.超链接添加其他样式
a.one:link {color:red;} a.one:hover {color:yellow;} a.one:visited {color:blue;} a.two:link {color:red;} a.two:hover {font-size:250%;} a.two:visited{color:blue;} a.three:link {color:red;} a.three:hover {background-color:yellowgreen;} a.three:visited{color:blue;} a.four:link {color:red;} a.four:hover {font-family:Georgia, serif;} a.four:visited{color:blue;} a.five:link {color:red; text-decoration:none;} a.five:hover {text-decoration:underline;} a.five:visited{color:blue;}
<p>将鼠标移至链接上改变样式.</p> <p><a class="one" href="https://www.baidu.com">这个链接改变颜色</a></p> <p><a class="two" href="https://www.baidu.com">这个链接改变字体大小</a></p> <p><a class="three" href="https://www.baidu.com">这个链接改变背景颜色</a></p> <p><a class="four" href="https://www.baidu.com">这个链接改变字体类型</a></p> <p><a class="five" href="https://www.baidu.com">这个链接改变文字修饰</a></p>
5.高级-创建链接框
a:link,a:visited { display: block; text-decoration: none; font-weight: bold; color: white; background-color: greenyellow; text-align: center; padding:4px; width: 120px; } a:hover { background-color: green; }
<body> <a href="#" target="_blank">这是一个链接</a> </body>