css学习1----css超链接效果
css超链接标签<a>伪类别：
a:link 超链接的普通样式，正常浏览状态的风格
a:visited 被单击过的超链接的风格
a:hover 鼠标指针经过超链接上的样式风格
a:active 在超链接上单击时，即当前激活时，超链接的样式风格
css通过以上4个伪类别，再配合各种属性风格制作出千变万化的动态超链接。
html文件如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test3_css.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../css/test3_css.css" type="text/css"></link></head>
<body>
<a href="#">首页</a>
<a href="#">心语</a>
<a href="#">开题</a>
<a href="#">那双手</a>
<a href="#">水面上的落叶</a>
<a href="#">日暮</a>
<a href="#">卷尾</a>
</body>
</html>
css 文件如下：
a{
font-family: Arial;
font-size: 2em;
text-align: center;
margin: 3px;
}
a:link,a:visited{
color: #A62020;
padding: 4px 10px 4px 10px;
background-color: #ecd8db;
text-decoration: none;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-bottom: 1px soild #717171;
border-right: 1px soild #717171;
}
a:hover{
color: #821818;
padding: 5px 8px 3px 12px;
background-color: #e2c4c9;
border-top: 1px soild #717171;
border-left: 1px soild #717171;
border-bottom: 1px soild #EEEEEE;
border-right: 1px soild #EEEEEE;
}
