第29章 伪类.pptVIP

第29章 伪类 伪类是选择符的螺栓，用来指定链接或者与其相关的选择符的状态；它是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符，伪类最常用的用法表示对链接对象的不同状态下定义不同的样式效果。在本章内容中，先介绍伪类的概念，然后着重讲述以下四个在链接中常用的伪类，再简单地介绍一些其他伪类。 伪类与选择符间用冒号相连，在CSS中，伪类对文本或图像处于链接状态的修饰，故选择符大部分下是a标记，本章主要对a标记做实例讲解，其中伪类有四种常用形式是本章要讲解的，内容如下： “:link”用在为访问的链接上 “:hover”用于鼠标光标置于其上的链接 “:active”用于获得焦点（如“被单击”）的链接上 “:visited”用在已经访问过的链接上 29.1 伪类概念 伪类可以看作是一种特殊的类选择符，是能被支持CSS的浏览器所自动识别的特殊选择符，最大的用处是对链接在不同状态下定义不同的样式。伪类的语法是在原有的语法里加上一个伪类，在选择符中用冒号接上伪类的类型，然后在大括号中输入CSS样式，来修饰页面。伪类的作用很大，最关键的是链接前后过程中的状态，其语法形式如下： selector:pseudo-class { property: value; } 伪类的表示（选择符:伪类 {属性: 值}）中，选择符如链接的a，伪类类型是有4种，分别是link、hover、active和visited，大括号里面的就是的就是CSS代码。在前面中提到过，伪类的选择符（selector）主要是a标记，故在稍后的语法详解中都以a作为选择符，其中selector会省略。 29.2 伪类的四种状态 伪类的使用使网页效果更丰富，特别是在链接状态下，整个互联网因有了链接而不用记地址直接可以到达目标地址，通过链接完成。 对链接的控制是伪类的主要功能，如刚设置文本的链接时，文本对象会出现蓝颜色，而单击链接时颜色又变化，等访问过后，颜色又不同了。除了默认的链接显示颜色外，还可以通过伪类来改变链接的状态，使不同的状态下颜色或其他样式不同，下面来介绍伪类的四种状态。 29.2.1 访问链接的状态 在做好链接时，链接默认状态下都会变成蓝色，而且如果是文本链接则会出现下划线，是图片链接会出现边框，当然边框的默认颜色也为蓝色。为了更好地体现网页外观效果，有的网页设计师不喜欢默认的样式，那么怎么样来设置成用户喜欢的呢？ 要改变默认状态，使访问链接时的状态不一样的样式，不一样的效果。设置这些效果用到伪类选择器。选择器（selector）是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。只需要通过选择器，即可对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。 而访问链接的状态是伪类选择器的一种，用“:link”表示，表示当文本或图片处于链接状态时的样式，link的语法如下。 a:link { /*property: value;*/ } 29.2.2 鼠标光标置于其上的状态 与link语法一样，鼠标光标置于其上的状态也属于伪类的一种，其语法标记用hover表示，在链接标记符a后面接冒号，然后接上hover，用大括号把CSS样式包围起，则表示鼠标光标放置到链接对象时，出现的效果，其语法形式如下： a:hover{ /*property: value;*/ } 上面表示的是设置对象在其鼠标光标悬停时的样式。在CSS1中此伪类仅可用于a 对象。对于无href 属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。 当没有设置hover状态时，按默认状态鼠标指针放到链接对象中，指针立刻变成手型，而且颜色也不是蓝色，如果想修改默认的状态，用hover表示，如代码29.3表示hover在网页链接中的用法。 29.2.3 获得焦点的状态 获得焦点的状态也是伪类的一种，表示鼠标单击链接时，获得的焦点时的状态，其语法用active表示，完整语法如下表示： a:active{ /*property: value;*/ } 说明：设置对象在被激活（在鼠标单击与释放之间发生的事件）时的样式；在CSS1中此伪类仅可用于a对象，对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象，并且:active可以和:link以及:visited状态同时发生。 获得焦点的状态是链接对象，当链接被获得焦点时，这时的效果就像active设置效果，代码29.4表示active的用法。 29.2.4 访问过后的状态 在浏览网页中，发现有的链接颜色发生变化了，刚变化后的颜色刚好是访问过后的链接，那些都是默认的访问过后的状态，从默认情况上看，访问过后的颜色不是很好看。要想改变访问过后的