(1) :link:设置a对象在未被访问前的样式表属性。
(2) :visited:设置a对象在其链接地址已被访问过时的样式表属性。
(3) :hover:设置对象在其鼠标悬停时的样式表属性。
(4) :active:设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。
定义超链接的样式:
定义超链接样式的一般格式是:
选择符:伪类名 { 样式表 }
css中关于超链接的四个属性正确顺序为:
a:link {}
a:visited {}
a:hover {}
a:active {}
伪类名字对大小写不敏感,但在定义顺序上有要求。:hover必须被置于:link和:visited之后才是有效的,:active必须被置于:hover之后才是有效的。
如果没有指定伪类,则默认为 :link。
超链接默认情况下是始总有下滑线的,如果要去掉下划线,则需要添加样式text-decoration: none
例子:
a:link { color:#dd3409text-decoration:nonefont-size:13px}/**//* 超链接的样式 */
a:visited { color:#9f301dtext-decoration:none}
a:visited:hover { color:#9f301dtext-decoration:underline}
a:hover { color:#dd3409text-decoration:underline}
a:active { color:#ff3300text-decoration:underline}
1、打开html编辑器,新建一个html文件,写入一个div容器,容器里面有一个a标签:
2、给div设置class属性container,给它宽度和高度,背景颜色;然后给a标签设置display属性为block,设置宽度为100%,高度为auto,这样a标签就会铺满上层的div,此时点击整个div都会打开链接:
3、打开浏览器,在div的边缘点击:
4、接着浏览器是可以进入链接的。以上就是div加整个超链接的而方法:
效果如图:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<title></title>
<!-- 默认打开目标 -->
<base target="iframe"/>
<style>
#page{
width: 800px
height: 400px
}
#left{
float: left
background: #ccc
}
#right{
float: leftbackground: #fff
}
</style>
</head>
<body>
<div id="page">
<div id="left">
<p>左侧</p>
<div>
<ul>
<li><a href="1.html" >分类管理</a></li>
</ul>
<ul class="con">
<li><a href="2.html" >标签管理</a></li>
</ul>
</div>
</div>
<!-- 右侧 -->
<div id="right">
<iframe frameboder="0" border="0" scrolling="yes" name="iframe" src="3.html"></iframe>
</div>
</div>
</body>
</html>
其中的html 页面分别如下:
html <body>中写上:分类管理在右侧、 2.html<body>中写上:标签管理在右侧 3.html<body>中写上: 我是右侧div