CSS——链接

来源：互联网发布：linux 获取未激活网卡编辑：程序博客网时间：2024/05/22 13:09

链接样式

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时

a:link {color:#000000;}      /* 未访问链接*/a:visited {color:#00FF00;}  /* 已访问链接 */a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */a:active {color:#0000FF;}  /* 鼠标点击时 */文本修饰a:link {text-decoration:none;}a:visited {text-decoration:none;}a:hover {text-decoration:underline;}a:active {text-decoration:underline;}背景颜色a:link {background-color:#B2FF99;}a:visited {background-color:#FFFF85;}a:hover {background-color:#FF704D;}a:active {background-color:#FF704D;}

添加不同样式：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>再见二逼K</title> <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:monospace;}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><p><b><a class="one" href="/css/" target="_blank">这个链接改变颜色</a></b></p><p><b><a class="two" href="/css/" target="_blank">这个链接改变字体大小</a></b></p><p><b><a class="three" href="/css/" target="_blank">这个链接改变背景颜色</a></b></p><p><b><a class="four" href="/css/" target="_blank">这个链接改变字体类型</a></b></p><p><b><a class="five" href="/css/" target="_blank">这个链接改变文字修饰</a></b></p></body></html>

高级-创建链接框

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>再见二逼K</title> <style>a:link,a:visited{    display:block;    font-weight:bold;    color:#FFFFFF;    background-color:#98bf21;    width:120px;    text-align:center;    padding:4px;            <!--填充-->    text-decoration:none;}a:hover,a:active{    background-color:#7A991A;}</style></head><body><a href="/css/" target="_blank">这是一个链接</a></body></html>

0 0