CSS 链接
2016-06-19 16:30
501 查看
1、链接样式
链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。特别的链接,可以有不同的样式,这取决于他们是什么状态。这四个链接状态是:
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
当设置为若干链路状态的样式,也有一些顺序规则:
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
2、文本修饰
text-decoration 属性主要用于删除链接中的下划线:
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
3、背景颜色
背景颜色属性指定链接背景色:
链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。特别的链接,可以有不同的样式,这取决于他们是什么状态。这四个链接状态是:
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
<!DOCTYPE html> <html> <head> <style> a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ </style> </head> <body> <p><b><a href="/css/" target="_blank">这是一个链接</a></b></p> </body> </html>
当设置为若干链路状态的样式,也有一些顺序规则:
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
2、文本修饰
text-decoration 属性主要用于删除链接中的下划线:
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
3、背景颜色
背景颜色属性指定链接背景色:
<!DOCTYPE html> <html> <head> <style> a:link {background-color:#B2FF99;} /* unvisited link */ a:visited {background-color:#FFFF85;} /* visited link */ a:hover {background-color:#FF704D;} /* mouse over link */ a:active {background-color:#FF704D;} /* selected link */ </style> </head> <body> <p><b><a href="/css/" target="_blank">This is a link</a></b></p> <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p> <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p> </body> </html>
相关文章推荐
- css盒子模型
- CSS(3) 字体
- 精通css 高级web标准解决方案——可视化格式模型-盒模型
- CSS(3) Text(文本)
- CSS3的REM设置字体大小
- CSS(3) Background(背景)
- 9-4CSS重要性
- 9-3CSS层叠
- 9-2CSS特殊性
- 9-1CSS的继承
- css 绘制圆形 扇形
- 史上最详细 纯CSS打造3D文本滚动
- 7-2嵌入式css样式,写在当前的文件中
- 7-1内联式css样式,直接写在现有的HTML标签中
- css文字分散对齐
- 6-3CSS代码语法
- 6-2CSS样式的优势
- 6-1认识CSS样式
- css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
- Flex 布局教程:实例篇