0610月

hover属性兼容性以及伪类之动态链接

SEO/网站推广, 前端开发DIV+CSS

由于浏览器对CSS的解释与理解不同,IE6不支持除a标签以外的hover属性,我们了解hover属性是鼠标悬停效果。在IE7和FF中,对几乎任意元素都可以设置hover属性效果。而此属性效果的设置在IE6中,只对a标签有效,也就是说,IE6只能解释链接元素的悬停效果。其他元素的悬停效果IE6就不行。

Example Source Code:
<body>
<p><a href=”http://blog.onlygrape.com/” target=”_blank”>hover属性兼容性以及伪类之动态链接</a></p>
</body>

Example Source Code:
p {
    width : 360px;
    height : 80px;
    padding : 20px;
    margin : 50px auto 0 auto;
    border : 1px solid #ccc;
    line-height : 25px;
    background : #fff;
}
p:hover {
    border : 1px solid #000;
    background : #ddd;
}
p a {
    color : #00f;
    text-decoration : none;
    font-size : 13px;
}
p a:hover {
    color : #036;
    text-decoration : underline;
}

如上代码我们在IE6中打开时,只有移至于链接文件上,才会引起链接文本的变化,而对于P标签的hover效果,IE6是不能解释的。

在定义的CSS里会看到这两种方式
redlink a:active {
        color: FFFFFF;
}
redlink a:hover {
        color: 00CCFF;

a white:link {
        color: FFFFFF;
}
a white:hover {
        color: 00CCFF;
}

redlink a:active   定义redlink的ID下的伪类   你的HTML里应该有 class=”redlink” 才有用,比如 <div class=”redlink”><a href=” ” target=”_blank”>onlygrape</a></div>

a white:hover 应该这样应用 <div><a href=” ” target=”_blank” class=”white”>heihei</a></div>

redlink a:active {
    color: FFFFFF;
}
redlink a:hover {
    color: 00CCFF;
是不规范的伪类;
a white:link {
    color: FFFFFF;
}
a white:hover {
    color: 00CCFF;
}
是规范的伪类。参考

CSS教程第二期–伪类之动态链接

伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。

1. 语法

伪类的语法是在原有的语法里加上一个伪类(pseudo-class):
selector:pseudo-class {property: value}
(选择符:伪类 {属性: 值})
伪类和类不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,根据上面的语法可以解释为对象(选择符)在某个特殊状态下(伪类)的样式。

类选择符及其他选择符也同样可以和伪类混用:
selector.class:pseudo-class {property: value}
(选择符.类:伪类 {属性: 值})

2. 锚的伪类

我们最常用的是4种a(锚)元素的伪类,它表示动态链接在4种不同的状态:link、visited、active、hover(未访问的链接、已访问的链接、激活链接和鼠标停留在链接上)。我们把它们分别定义不同的效果:
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
(上面这个例子中,这个链接未访问时的颜色是红色并无下划线,访问后是绿色并无下划线,激活链接时为蓝色并有下划线,鼠标在链接上时为紫色并有下划线)
注意:有时这个链接访问前鼠标指向链接时有效果,而链接访问后鼠标再次指向链接时却无效果了。这是因为你把a:hover放在了a:visited的前面,这样的话由于后面的优先级高,当访问链接后就忽略了a:hover的效果。所以根据叠层顺序,我们在定义这些链接样式时,一定要按照a:link, a:visited, a:hover, a:actived的顺序书写。

3. 伪类和类选择符

将伪类和类组合起来用,就可以在同一个页面中做几组不同的链接效果了,例如,我们定义一组链接为红色,访问后为蓝色;另一组为绿色,访问后为黄色:
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
现在应用在不同的链接上:
<a class=”red” href=”…”>这是第一组链接</a>
<a class=”blue” href=”…”>这是第二组链接</a>

4. 其他伪类

此外CSS2还定义了首字和首行(first-letter和first-line)的伪类,可以对元素的首字或首行设定不同的样式。
下面看这个例子,我们在段落标记里定义文本首字尺寸为默认大小的3倍:
<style type=”text/css”>
p:first-letter {font-size: 300%}
</style>
……
<p>
这是一个段落,这个段落的首字被放大了。
</p>

我们再定义一个首行样式的例子:
<style type=”text/css”>
div:first-line {color: red}
</style>
……
<div>
<p>
这是段落的第一行
这是段落的第二行
这是段落的第三行
</p>
</div>
(上例中段落的第一行为红色,第二、三行为默认颜色)

注意:首字和首行的伪类需要IE5.5以上的版本支持。 

标准DIV+CSS英文网站建设www.onlygrape.com


分享到:



No comments

星期一, 十月 6th, 2008 | 分类:SEO/网站推广, 前端开发DIV+CSS | RSS 2.0 | 留言/评论 | Trackback

留言