关于定义a:visited后a:hover不起作用

转载时请标明文章原始出处和作者信息, 作者: lostsnow.
http://www.lsproc.com/blog/anchor_pseudo_classes/

在CSS中,定义了被访问过的链接的颜色(a:visited),结果当链接被访问过后,该链接的颜色不再改变,即定义鼠标在超级链接上的颜色(a:hover)不起作用了。我找到这里

锚点伪类 Anchor Pseudo-classes
A link that is active, visited, unvisited, or when you mouse over a link can all be displayed in different ways in a CSS-supporting browser:
当一个连接处于 活动,被访问,未访问或是当你鼠标移动到上面的时候都可以给它以不同的方式来表现,前提是浏览器支持CSS:

a:link {color: #FF0000}     /* unvisited link */
a:visited {color: #00FF00}  /* visited link */
a:hover {color: #FF00FF}   /* mouse over link */
a:active {color: #0000FF}   /* selected link */

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
注意 a:hover 必须在a:link和 a:visited后出现,要有顺序才能正常显示效果!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
注意: CSS中a:active必须出现在a:hover定义后才能有效果!

无意之间发现的问题,对 css 还是缺乏了解。

-- EOF --

css简写用法说明

转载时请标明文章原始出处和作者信息, 作者: lostsnow.
http://www.lsproc.com/blog/css-shorthand-guide/

转自:http://my.donews.com/htmlor/2006/10/16/css_shorthand_guide/

font

简写:

font:italic small-caps bold 12px/1.5em arial,verdana;

等效于:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;

顺序:font-style | font-variant | font-weight | font-size | line-height | font-family

(注:简写时,font-size和line-height只能通过斜杠/组成一个值,不能分开写。)

background

简写:

background:#fff url(bg.gif) no-repeat fixed left top;

等效于:

background-color:#fff;
background-image:url(bg.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;

顺序:background-color | background-image | background-repeat | background-attachment | background-position

Continue reading

-- EOF --

Web设计札记

转载时请标明文章原始出处和作者信息, 作者: lostsnow.
http://www.lsproc.com/blog/web-design-tips/

IE中处理空白字符的问题

按通常的理解,HTML文档中的空白字符如空格、回车、制表符等都应当被忽略,但IE处理这些字符时有可能会出现一些问题,尤其是和<img>标签相关的时候。

比如下面一段代码:

<div>
<img src="banner.png" />
</div>

在IE中的图片下方多出了不应有的空白,原因是<img>和<div>之间的回车被IE理解为空格,并在页面上显示出来。解决方法很简单:

<div><img src="banner.png" /></div>

现在就正常了。

在Firefox中不存在上述问题。

Continue reading

-- EOF --