<a> 标签定义超链接,用于从一张页面链接到另一张页面。最重要的属性是 href 属性,它指示链接的目标,<href="#">表示跳转到自己。我们通常通过CSS伪类来添加样式
1、点击超链接后显示的窗口:
target属性:用来规定在何处打开链接:
(1)target="_blank":浏览器总在一个新打开、未命名的窗口中载入目标文档。 (2)target="_self": 在当前页面打开 (3)target="_parent": 在父级空间打开 (4)target="_top": 在顶级页面打开 其中(3)(4)是<iframe>配合<a>标签的使用效果
2、显示下画线:
text-decoration是一个CSS属性,但是在<a>标签中常被用来显示或者去除超链接的下划线。 属性值如下:
none :默认。定义标准的文本。参数表示超链接文字不显示下划线;
underline:定义文本下的一条线。参数表示超链接的文字有下划线;
overline:定义文本上的一条线。
line-through:定义穿过文本下的一条线。
blink:定义闪烁的文本。
inherit:规定应该从父元素继承 text-decoration 属性的值。
<a style="text-decoration:none;">
3、作为超链接的四种状态:
第一种状态: link (默认)正常状态(初始状态,不用鼠标去触碰)
第二种状态: hover 鼠标放上去的时候(但不点击)
第三种状态: active 点击的时候(鼠标还没放开)
第四种状态: visited 点击之后()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title>css 伪类</title> <meta http-equiv="Content-Type" content="text/html; charset= utf8" /> <style> a:link{ color: black; } a:visited{ color:blue; } a:hover{ color: orange; } a:active{ color: pink; } </style> </head> <body> <a href="http://www.baidu.com">jason</a> </body> </html>
使用时注意:
- active 一般不必写
- 四种状态控制一定要按照 LVHA 的顺序写
- link 可以省略
4、有的时候我们会遇到这种形式:
a:focus
{
color:lime;
background:red;
}
其中:focus是一种CSS伪类选择器,用于选取获得焦点的元素。常见形式如下:
a:focus
{
color:lime;
background:red;
}
input:focus
{
color:yellow;
background:blue;
}