Jorux Notebook

本篇主要介绍css对边框(border)的属性控制和链接(link)的伪类选择器.

边框(border): css控制的边框属性包括border-width, border-color, border-style.

Border之所以让人很困惑主要源于IE5错综复杂的BUG, 由于IE5是一个”will soon be dead“ 的浏览器, 这里只例举一个最为知名的关于border-width的BUG, 让大家更好的理解border的含义, 先看下图:

如上图所示, 对象A(白色矩形)周围有蓝色边框B, 可以看出A的实际宽度为ef, 而IE5不这么认为, 它把cd的长度定义为对象A的宽度, 这个bug在边框的宽度小时几乎察觉不到, 但在边框与对象宽度相差不大时显得尤为明显.

现在, 结合以上说明, 可以看出border是独立于对象之外, 位于magin与padding之间(后说明), 具有固定宽度, 颜色和样式的区域.

1. border-width: 其可有具体数值(如1px, 2px等)或是描述性(thin, medium, thick)的属性值. 由于浏览器及个人设置的不同导致thin, medium, thick这些属性值的表现不一, 不推荐使用. css代码如下:

border-width: 1px;
border-width: 2px;
border-width: thin;
border-width: medium;
border-width: thick;

宽度效果如下(注意不同浏览器下的区别):

 1px    2px    thin    medium    thick 

2. border-style: 边框样式包括solid, dashed, dotted, double, groove, ridge, inset, outset等, 代码如下:

border-style: solid;
border-style: dashed;
border-style: dotted;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

样式效果如下(你可能需要Firefox或是Opera才能看到后四种效果):

 solid   

 dashed   

 dotted   

 double   

 groove   

 ridge   

 inset   

 outset   

3. border-color: 边框颜色属性和一般颜色属性是一样的, 可以参看属性篇(1).

Summary: 以上例举的都是四边相同样式的情况, 其实可以分别设置border-top, border-right, border-bottom, border-left四边的属性, 比方说想要表现一个宽2px, 蓝色(blue), 样式为solid的上下边框, 代码如下:

border-top-width: 2px;
border-top-color: blue;
border-top-style: solid;
border-bottom-width: 2px;
border-bottom-color: blue;
border-bottom-style: solid;

简写为: 

border-top: blue 2px solid;
border-bottom: blue 2px solid;

表现如下: 

 宽2px, 蓝色, 样式为solid的上下边框 

以下内容不再属于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属性.(正文完)

《If you love css …》已经有四篇文章发表了, 更新速度比较慢, 原因有三:
1, css教程内容本身的难度在加大, 又奢望在说明方法方式上比前人有所进步;
2, 接手一个web design的project, 到了最后调试阶段, 那位美国大哥说了声”perfect”, 就声称太忙就不再回复mail, 使我认识到网络之不可靠, 绝不只发生在别人身上. 严重打击我的网络热情;
3, 毕竟我还不是个专业网虫, 现实生活中, 还是有那么多我所关心的, 不得不干的事, 仍旧未完成.
即使每天上网时间很短, 但我依然努力挤出时间, 在某天集中精力完成某篇文章, 感谢那些订阅本网站FEED的朋友(目前每天有20个左右的订阅流量). 更要鸣谢那些在本站留言, 纠正错误, 提出建议的朋友, 如果没有你们, 可能这个教程早就 ……