Jorux Notebook

Just a web designer's blog

属性篇(3)—If you love css …

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

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

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

j

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

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

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;

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

24 Responses to “属性篇(3)—If you love css …”

  1. leizi says:

    leizi先來支持一下!

    Jorux的CSS教程我全部收藏

  2. leavic says:

    那个链接不同状态显示不同图片的问题,还真有点像C语言中的指针偏移。
    不过C语言中可以很轻松的重新把指针指向到变量的首地址,CSS中就不太清楚要怎么处理了,难道可以再刷新后重置所有超链接的状态?

    或者,会在下一篇解答?

  3. “一次性链接”问题, 确实像Leavic所说的那样, 存在类似C语言中的指针偏移现象. 基于一个基本事实, 一个链接被点击后, 它的状态就是”visited”.
    想要将指针重指向, 方法只能是”清除浏览器的历史记录”或者提高浏览器的安全级别, 让其”记不住”访问历史. 但强制更改访客浏览器设置, 不仅有违道德, 没有效率, 而且违背了”:visited”伪类的存在目的.

    “:visited”的意义在于提示访客这个链接是被访问过的, 我们无需也不能更改”visited”这个事实. 之所以说那个按钮是”一次性”的, 不是因为它显示”灰色图标”, 而是因为伪类”:hover”和”:active”失效问题. 希望Leavic或其他朋友在解决这个问题时, 考虑到这一点.

    指针确实偏移, 但无需重指向. 因为在没有鼠标动作时, 确实应该显示灰色图标. 我们要解决的问题就是怎样使伪类”:hover”和”:active”重新生效.
    这点我可能在文章中没有说明清楚, 在这借着回复Leavic的机会说明一下. CSS中的问题就像”怎样让一个鸡蛋直立于平面上”的问题一样, 想到了就极为简单. 大家再努力想想, 希望在留言中看到你们的解决方法!

  4. 红鼻子 says:

    最近比较忙,好久没有来Jorux这里,讲了这么多内容了,辛苦辛苦

  5. irini says:

    再次感谢Jorux在百忙中的帮助!

    我是用Opera看这篇文章的,在这个浏览器下点击那个botton不会出现灰色的图标,就直接显示成一开始的黄色。

  6. To IRINI:
    因为那个链接的地址为”#”, Opera可能对于链接”#”有特殊认识, 所以不能显示”a:visited”状态, 只要刷新一下那个页面就会显示灰色图标了.
    另外与opera的历史设置状态也有关, 必须让其记住”访问历史”.

  7. 红鼻子 says:

    修改成为
    Link
    Visited
    Hover
    Active
    顺序这样,后面的优先级大于前面的,就行了
    记住就是LVHA这个样子的顺序就不会有错了

  8. 红鼻子的答案是正确的.
    之所以排在后面的优先级大, 是因为浏览器读取css文件时是自上而下的.
    但这并不是充分条件. visited, hover, active这三种状态不是独立的, 它们存在交集.
    比方说一个按钮, 如果它被点击过, 而且你正点击这个按钮, 那么这个按钮既是visited, 也是active, 而且因为鼠标悬于按钮之上, 所以它也处在hover的状态. 那么这个时候, 你把css文件中的visited置于最后的话, 那么hover和active两种状态的属性都会被visited的属性所覆盖而不显示.
    同理, active必须置于hover之后才能显示其属性.
    要点:
    1.visited必须置于hover和active之上;
    2.active必须置于hover之后;
    3.link的位置无所谓, 所以你只需保证VHA的顺序即可.

  9. dai says:

    读你的文章就好象在听我最喜欢的一个教授的课,因为你们的风格相同:严谨清晰,易于理解!再次感谢!

  10. 角虫 says:

    原来讨论的魅力就是发现更多别人知道而自己不知道的。

    很喜欢你的教程,请继续写下去。

  11. sdwart says:

    写A:伪类的顺序:LoVe,HAte 记住大写字母就可以了L:link V:visited H:hover A:active

  12. Bush says:

    Hello, nice site look this:
    http://sold.solidno.com/moto-usato/ , moto usato, [URL=http://sold.solidno.com/moto-usato/]moto usato[/URL]

    End ^) See you

  13. Treno says:

    ..Rather helpful information you have here. Grazie!

  14. W.l says:

    关于链接实例部分是否已将example2.css文件移除?无法正常显示效果。

  15. To W.I: 可以正常显示。

  16. 木木 says:

    你要多多休息,我们等着你。呵呵。

  17. gemini says:

    呵呵,现在才发现了这么好的地方。来晚了,但是还是会从头看起的。以后跟上队伍。嘿嘿,辛苦jorux了

  18. Hauran says:

    阅读完毕。谢谢。

  19. ingls says:

    这个教程非常好
    尤其对我这初学者
    思路清晰/容易理解和记忆

    感谢jorux!辛苦了

  20. 木可木可 says:

    新公司,新的一个行业,学习CSS,可是身边又没有人指点,只好在网上搜集教程自己学习~
    无意中来这里,发现站长的教程与其他的都不同,很受益~~
    辛苦了~~

  21. neil says:

    其实,从用户体验的角度来讲,所谓”一次性链接”用处很大,但也有局限.比如新闻这样一次性阅读的文章,使其visited的表现区别于link,能有效的将读过与未读过的文章区分开, 方便浏览者了解自己的”足迹”, 但如果用在导航中,显然会让浏览者产生某些误会

  22. lkaxb says:

    受益了,学习中

  23. darki says:

    在网页设计种,那种图片中的图片 排列过程中,CSS如何精确把握尺寸了?
    我一直不解…

Leave a Reply

Designed by Jorux. Proudly powered by WordPress    Except where otherwise noted, this site is licensed under a Creative Commons License.