<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none; /* 去掉下划线 */
color: #000000;
}
/* link(未访问的链接) > visited(已访问的链接) > hover(鼠标悬停的) > active(激活的)*/
/*在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效*/
/*鼠标悬停的状态*/
a:hover{ /* :hover 选择器用于选择鼠标指针浮动在上面的元素。*/
color: khaki; /* :hover 选择器可用于所有元素,不只是链接。*/
font-size: 40px;
}
/*鼠标按住未释放的状态*/
a:active{
color: #711471;
font-family: 华文楷体;
}
/*
text-shadow: h-shadow v-shadow blur color;
h-shadow:必需。水平阴影的位置。允许负值。
v-shadow:必需。垂直阴影的位置。允许负值。
blur:可选。模糊的距离。
color:可选。阴影的颜色。
*/
.money{
text-shadow: 3px 0px 3px #000000;
}
</style>
</head>
<body>
<a href="#">
<img src="images/2.jpg" alt="">
</a>
<p>
<a href="">这是一只猫头鹰</a>
</p>
<p>
<a href="">咕咕咕</a>
</p>
<p class="money">售价:$999</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hover</title>
<style>
a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}
a.ex3:hover,a.ex3:active {background:red;}
a.ex4:hover,a.ex4:active {font-family:'微软雅黑';}
a.ex5:visited,a.ex5:link {text-decoration:none;}
a.ex5:hover,a.ex5:active {text-decoration:underline;}
</style>
</head>
<body>
<p>请把鼠标指针移动到这些链接上。</p>
<p><a class="ex1" href="/index.html">这个链接改变颜色。</a></p>
<p><a class="ex2" href="/index.html">这个链接改变字体大小。</a></p>
<p><a class="ex3" href="/index.html">这个链接改变背景色。</a></p>
<p><a class="ex4" href="/index.html">这个链接改变字体。</a></p>
<p><a class="ex5" href="/index.html">这个链接会出现下划线。</a></p>
</body>
</html>