1.6.4其他样式应用

时间：2022-10-15 百科知识版权反馈

【摘要】：定义方法如下：p.myfont2{font-family:”宋体”;font-size:18px;color:blue;}这个标签类样式myfont2只能对p元素起样式控制作用，对其他元素不会产生影响。这四种状态的名称是确定的，在CSS看来，这就是名称已经被系统确定并有默认的显示样式的类——伪类。可将上述伪类定义，放置在网页head头部的style标签内，或编辑到CSS文件中再将CSS文件链接到网页里。

1.6.4　其他样式应用

1. 标签符内直接定义和应用样式

有一种简单应用样式的方法，就是直接在标签符内添加样式。直接定义与应用样式的格式如下：

<标签符 style=”属性名1:属性值1; 属性名2:属性值2;……”>……</标签符>

例如，在网页body主体内，有如下代码：

浏览效果如下：

2. 包含标签样式的定义

可以单独对某种标签元素包含关系定义样式表，譬如标签元素1里包含标签元素2，这种方式只对在标签元素1里的标签元素2进行定义，对单独的标签1或标签2无定义，格式如下：

标签1　标签2{属性1:值1; 属性2:值2; ……}

例如，定义table(表格)内a(链接)的样式：

table a{font-size: 15px;}

当在网页中建立表格，并在表格内创建链接时，表内链接元素将改变样式，文字大小为15像素，而表格外链接的文字仍为默认大小。

3. 标签类样式的定义与应用

第1.6.1节格式二是类样式的一般定义方法，用该方法定义的样式类可应用于所有能适用这个类的标签元素：

还有一种专为某种标签定义的类——标签类，定义方法是在类名“.”号前，再加一个HTML标签名。定义方法如下：

标签名.类名{属性1:值1; 属性2:值2; …… }

例如，一个标签类样式定义如下：

p.myfont2{font-family:”宋体”;font-size:18px;color:blue;}

这个标签类样式myfont2只能对p元素起样式控制作用，对其他元素不会产生影响。在网页应用这个标签类样式的方法仍然是：

4. 伪类的定义与应用

一般样式类的名字可由程序员随意选择，而伪类是一种能够被支持CSS的浏览器所识别的特殊类。伪类样式是CSS已经定义好的，是对象(标签元素)在某个特殊状态(伪类)下的样式。我们不能改变伪类的名称，但可以通过对伪类的重新定义来改变伪类原有的默认显示样式。

1)伪类基本应用

伪类定义的一般方法如下：

标签名:伪类名{属性1:值1; 属性2:值2;……}

伪类的最大用处，就是可以给链接的不同状态定义不同的样式效果。

HTML标签a可以实现超链接，超链接有四种不同状态：link、visited、hover、active(未访问的链接、已访问的链接、光标停留在链接上和激活链接)。这四种状态的名称是确定的，在CSS看来，这就是名称已经被系统确定并有默认的显示样式的类——伪类。标签a的四个伪类分别是：link、visited、hover和active。我们可以用伪类定义的方法给标签a的四个伪类重新设置样式，即为标签a的四种状态设置不同的显示效果。例如，对a的四个伪类定义如下：

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的四个伪类分别定义了其color属性和text-decoration属性，color属性指定四种不同状态的字颜色，text-decoration属性指定文本的装饰性质(值为none无下划线，值为underline则有下划线)。可将上述伪类定义，放置在网页head头部的style标签内，或编辑到CSS文件中再将CSS文件链接到网页里。

这样，网页中所有a元素的四种状态，都会按上面定义的样式显示。例如，

浏览效果如下：

(未访问)，(鼠标在链接上)，(激活链接)，(访问后)

上例中，链接文字“网易”未访问时其颜色是红色并无下划线，光标在链接上时其颜色为紫色并有下划线，激活链接时文字颜色为蓝色并有下划线，访问后文字颜色是绿色并无下划线。

注意：有时候，在链接访问前光标指向链接上时有效果，而链接访问后光标再次指向链接上时却无效果了。那是因为把a:hover放在了a:visited的前面，由于后面的优先级高，当访问链接后就忽略了a:hover的效果。所以根据叠层顺序，我们在定义这些链接样式伪类时，一定要按照a:link，a:visited，a:hover，a:actived的顺序书写。

2)标签类与伪类的混合使用

标签类和伪类可以混合定义与应用。对于有伪类的标签(如a标签)，可以为它定义不同的类(标签类)，从而实现在同一网页中伪类显示样式不一样的结果。标签类与伪类的混合定义格式如下：

标签名.类名:伪类名 {属性1:值1; 属性2:值2; ……}

上述格式中，标签名和伪类名是系统规定了的，但“.”后面的“类”名可由程序员自行命名。通过对专用于标签a的类及其伪类(link,visited,hover,actived)混合定义，可在同一个页面中做几组不同的链接效果。例如，下面是对标签a的类和伪类进行混合定义：

a.red:link {color: #ff0000;}　　　　　 /∗定义red类的link伪类颜色为红色 ∗/

a.red:visited {color: #0000ff;}　　　　/∗定义red类的visited伪类颜色为蓝色 ∗/

a.green:link {color: #00ff00;}　　　　 /∗定义green类的link伪类颜色为绿色 ∗/　

a.green:visited {color: #ff00ff;}　　　/∗定义green类的sisited伪类颜色为紫色 ∗/

我们把上述定义的red和green 两个类(包含伪类)样式应用于网页的a元素上，例如，

浏览网页，第一组链接字颜色为红色，访问后字颜色为蓝色；第二组链接字颜色为绿色，访问后字颜色为紫色。效果如下所示：

(访问前)，(访问后)。

5. 滤镜filter

CSS提供了一些内置的多媒体滤镜(filter)特效，使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素，如图片、文本容器及其他一些对象上。常用的CSS滤镜(filter)有以下几种。

alpha：设置透明度；blur：建立高速移动即模糊效果；wave：创建波纹效果；gray：去掉图像色彩显示为黑白图像；fliph：将图像作水平镜像；flipv将图像作垂直镜像；invert：将图像反色；dropshadow：创建固定阴影效果；shadow：创建偏移固定阴影效果。

下面通过几个例子来说明滤镜(filter)的应用。

为了使大家进一步熟悉样式(CSS)的各种用法，在alpha滤镜、blur滤镜、wave滤镜应用中采用：先在网页头部定义filter样式，再在img元素中应用样式的方式；在gray滤镜、fliph滤镜、flipv滤镜、invert滤镜的应用中，则采用直接在img标签里定义并应用filter样式的方法。

1)alpha滤镜

alpha滤镜的功能是设置对象的透明度。

按如下方式定义一个alpha滤镜样式：

.filter1 {filter: alpha(opacity=40);}

其中opacity参数设置alpha滤镜的不透明度(0~100)，值越大则越不透明。

在网页中对图像元素应用filter1滤镜类样式：

<img src="flower.jpg" />　　　　　　　　　　 /∗原图 ∗/

<img　class="filter1" src="flower.jpg" />　　/∗设置滤镜alpha后 ∗/

浏览网页，效果如图1-16所示。