css基础教程属性篇之二（2）

以下内容不再属于css属性, 但暂时归入属性篇中.

链接(link): 在html里用<a></a>标明链接, 在css里用a作为链接的选择器名.

css的缺点和它的优点一样明显, 其最大的缺陷就在于网页的动态表现不足, 在这一点上和Flash差距尤为突出.

好在css还是留了一手, 那就是链接的伪类选择器, 所谓伪类就是指依赖于浏览器或是用户的状态. 对于链接来讲, 存在link, hover, visited, active四种状态, 即四种伪类选择器: a:link(存在链接, 但无鼠标动作), a:visited(被点击或访问过), a:hover(鼠标悬停于链接上时的状态), a:active(鼠标点击与释放之间的状态).

css便是以这几个伪类选择器实现了其为数不多的动态效果. 目前最为常用的就是导航条和按钮的动态显示. 以下用一个动态按钮的实例来说明这四个伪类选择器.

1. 首先准备一副图片(button.png), 如下图(160px*240px), 其由四幅160px*60px的小图自上而下排列而成.

2. 接着需要往你的本地调试文件夹(调试环境的建立方法参考属性(1)中的说明)的index.htm中写入html代码, 如下:

<div id=”button”><a href=”#”></a></div>

3. 在style.css中写入以下代码:

body {background-color: #FFF;}
#button a{
width:160px;
height:60px;
display:block;
background:url(../image/button.png) no-repeat 0 0;
}
#button a:link { background-position:0 0;}
#button a:hover { background-position:0 -60px;}
#button a:active { background-position:0 -120px;}
#button a:visited { background-position:0 -180px;}

可以看到如 Example2 的效果.

4. 代码解释:

<div id=”button”><a href=”#”></a></div>

在index.htm写入如上代码, 目的在于插入一个id名为”button”的盒子(div),且其内含有一个链接<a href=”#”></a>.

#button a{
width:160px;
height:60px;
display:block;
background:url(../image/button.png) no-repeat 0 0;
}

在css文件中写入以上代码, 目的在于控制盒子中链接的表现, 通过名为”#button a”的选择器来实现. 链接的宽高为160px*60px, 背景为图片button.png.

在这强调一下display:block的作用. 由于在html文件中,链接<a href=”#”> </a>中没有任何的内容(content)填充, 如果没有声明”display:block”, 那么即使声明了选择器”#button a”的宽高, 浏览器也会因为html文件中没有内容而无法显示链接. 所以”display:block”在这里的作用就在于强制浏览器显示没有内容填充的链接. 

#button a:link { background-position:0 0;}

用伪类选择器a:link声明链接的背景图片在左上角显示, 即距离左边和顶边分别0, 0. 但由于已经在选择器 “#button a”中声明了图片位置, 此代码可有可无.

#button a:hover { background-position:0 -60px;}
#button a:active { background-position:0 -120px;}
#button a:visited { background-position:0 -180px;}

用伪类选择器a:hover声明鼠标悬停时, 背景图片上移60px, 而使排在第二位的绿色小图片显示出来;

用伪类选择器a:active声明在鼠标点击与释放之间的状态时, 背景图片上移120px, 而使排在第三位的红色小图片显示;

用伪类选择器a:visited声明在链接被点击或访问过时, 背景图片上移180px, 而使排在第四位的灰色小图片显示;

现在你基本了解了css动态按钮的制作过程, 但以上css代码还存在一个严重的缺陷, 相信你会很快发现问题所在——这个按钮居然是一个”一次性按钮“, 也就是说这个按钮在点击第一次后, 就一直显示那个灰色小图片, 你能想出解决方法吗? 请在留言中指出.

答案会在下一篇文章中说明! 下篇将会涉及css的核心内容——盒子模型, margin和padding属性.(正文完)