第五章：超链接伪类

敖游

2015-12-23

来源：遨游建站

　　代码如下：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }

　　a:hover { color: #FFF; text-decoration: none; background: #333; }

　　</style>

　　</head>

　　<body>

　　<p><a href="#">这里是链接</a></p>

　　<p><a href="10.html">这里也是链接</a></p>

　　</body>

　　</html>

　　三、用css制作按钮

　　学会了把超链接转换为块级元素，想制作个css按钮简直太简单了，只需在上一步的基础上增加一个按钮的背景图片即可实现。下面以制作淘宝网首页的免费注册按钮来讲解，设置最常用的默认样式和鼠标移上时的样式，如下图

　　首先需要准备默认状态和鼠标划过状态的图片如下：

　　修改之前的html如下，然后重新定义css样式：

　　代码如下：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: url(/upload/2010-08/14/014304_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; }

　　a:hover { background: url(/upload/2010-08/14/014304_btn_bg_hover.gif) no-repeat 0px 0px;}

　　</style>

　　</head>

　　<body>

　　</body>

　　</html>

　　本例中运用到了背景图片，有关背景图片的详细运用将在下一节中讲解

　　四、首字下沉

　　首字下沉是css伪类上的又一个运用，它可以直接通过css样式表向某个选择器中的文本首字母添加特殊的样式，而不需要把首字添加一个标签或通过程序来实现，今天以制作word里的首字下沉为例来讲解，应用如下伪元素：

　　:first-letter

　　在页面中添加如下一段内容，只用设置样式就可以实现首字下沉了：

　　<p>标准之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS视频教程,web2.0标准,DIV+CSS布局入门教程,网页布局实例,css布局实例,div+css模板,div+css实例解析,网站重构，网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习!</p>