设置2种不同的超级链接样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置2种不同的超级链接样式</title>
<style type="text/css">
a{
color: black;
text-decoration: none;
}
a#red{
background-color: red;
}
a.blue{
background-color: blue;
}
div.box1,div.box2{
width: 100px;
height: 100px;
}
div.box1{
background-color: red;
}
div.box2{
background-color: blue;
}
</style>
</head>
<body>
<!--背景为红色-->
<a href="#" id="red">空连接</a><br />
<!--背景为蓝色-->
<a href="#" class="blue">内部链接</a><br />
<a href="#" class="blue">外部链接</a><br />
<a href="#" class="blue">锚记</a><br />
<a href="#" class="blue">发邮件</a><br />
<a href="#" class="blue">运行JS脚本</a><br />
<a href="#" class="blue">点击下载</a>
</body>
</html>
超级链接的4个伪类状态
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超级链接的4个伪类状态</title>
<style type="text/css">
a{
/*该文本颜色为黑色*/
color: black;
/*去掉下划线装饰*/
text-decoration: none;
}
a:link{}
a:visited{color: green;}
a:hover{background-color: orange;}
a:active{background-color: yellow;}
</style>
</head>
<body>
<h1 class="link">
<a href="#">我是超级链接1</a>
</h1>
<h1 class="link">
<a href="#">我是超级链接2</a>
</h1>
</body>
</html>
补充
<!--三种基本选择器-->
标签选择器
div{
}
类选择器
.class{
}
id选择器
id{
}
<!--三种扩展选择器-->
并集选择器
div,.class{
}
标签指定选择器
div.class{
}
后代选择器
div .class{
}
浙公网安备 33010602011771号