伪类--动态链接

bluemoon132

bluemoon132

2016-02-19 17:23

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享伪类--动态链接,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

  伪类可以看做是一种特殊的类选择符,是能被支持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的顺序书写。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  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="..."这是第一组链接/aa class="blue" href="..."这是第二组链接/a

  4. 其他伪类

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  此外CSS2还定义了首字和首行(first-letter和first-line)的伪类,可以对元素的首字或首行设定不同的样式。

  下面看这个例子,我们在段落标记里定义文本首字尺寸为默认大小的3倍:

style type=text/cssp:first-letter {font-size: 300%}/stylep这是一个段落,这个段落的首字被放大了。/p

  我们再定义一个首行样式的例子:

style type=text/cssdiv p:first-line {color: red}/styledivp这是段落的第一行这是段落的第二行这是段落的第三行/p/div

  (上例中段落的第一行为红色,第二、三行为默认颜色)

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

展开更多 50%)
分享

猜你喜欢

伪类--动态链接

Web开发
伪类--动态链接

css伪类伪元素

Web开发
css伪类伪元素

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

图形超链接类

C语言教程 C语言函数
图形超链接类

学习CSS的伪类

Web开发
学习CSS的伪类

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

链接库动态链接库详细介绍

编程语言 网络编程
链接库动态链接库详细介绍

Delphi 动态链接库编程

编程语言 网络编程
Delphi 动态链接库编程

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Oracle数据库系统使用经验六则

Oracle数据库系统使用经验六则

Oracle 9i产品文档

Oracle 9i产品文档
下拉加载更多内容 ↓