CSS应用基础教程(3) 应用补充

【 tulaoshi.com - Web开发 】

在讲挑选者的特性之前，要提一下的是ＣＳＳ继承的特性。所谓的继承的特性是指被包在内部的标签将拥有外部标签的样式性质。继承的特性最典型的应用通常发挥在预设整份网页的样式，而要指定为其它样式的部份再依要设定在个别元素里即可。这项特性可以提供网页设计者更理想的发挥空间。

　　接下来就要讲挑选者特性的应用！其实这部份应该算是声明的一种方式，但是在您看过第二章的基本的声明与应用後，到这边再讲挑选者您会比较有概念点。在ＣＳＳ应用或设计的时候，有几种依据元素的关系或性质来设定显示特定性质的方法，就是挑选者特性的应用，能让您在控制与应用上更加灵活。

一、前後文挑选者：依声明标签前後文关系显示特定性质的方法。
前後文挑选者便是当浏览器在显示HTML原始码所指定的内容时，会考虑元素标签的前後关系，而去显示指定的样式声明。也就是说只要HTML原始码内的标签排列前後顺序符合时，该项声明便会发生作用了！

元素A(标签A) 元素B(标签B) 元素C(标签C) ... { 样式规则}
要注意的是，前後文挑选者的声明跟集体声明很像，但是集体声明的元素标签间要用逗号隔开，而用前後文挑选者声明时元素标签间要用空格隔开；而这两种声明方式您可以混合使用。
元素A 元素B, 元素C 元素D 元素E, ... { 样式规则}
这样您就可以用集体声明的方式，声明数组前後文挑选者的样式规则。

二、类别挑选者：让单一或数个标签使用同组样式规则的方法。
类别(class)可以让不同的元素标签共同套用同一组样式性质或相同的元素标签套 用不同组的样式性质。首先介绍的是如何让不同的元素套用同一组样式性质，如下面范例所写即可。
HTML
HEAD
STYLE
--
　　.blue { color : BLUE }
--
/STYLE
/HEAD
BODY
　　　...
　H1 class="blue".../H1
　　　...
　P class="blue"... /P
　　　...
/BODY
要注意在声明时前面的小点，CLASS名称可任取。而要让相同的元素标签套用不同组的样式性质时，也可以应用类别特性来设定。
HTML
HEAD
STYLE
--
　　P.blue { color : BLUE }
　　P.red { color : RED }
--
/STYLE
/HEAD
BODY
　　　...
　P class="blue".../P
　　　...
　P class="red".../P
　　　...
/BODY
要注意同样是在声明时的小点，CLASS名称可任取。灵活运用类别特性，可以让您的样式设定更具机动性唷！

三、ＩＤ挑选者：与类别挑选者类似，不同的是在『唯一性』。
ＩＤ特性的使用与类别特性十分雷同，但是，文件里的各个ＩＤ都是唯一的。换句话 说，类别特性可以重复套用在单一或数个元素标签之上，但是ＩＤ属性在一份文件里只能出现一次。如下面范例所写即可。
HTML
HEAD
STYLE
--
　　#blue { color : BLUE }
--
/STYLE
/HEAD
BODY
　　　...
　P ID="blue".../P
　　　...
/BODY
可以看到，声明的方式是利用井字号『#』。而ＩＤ的这种『唯一性』正是让javascript或 VBScript能够对元素进行控制的关键。

　　透过以上的介绍的挑选者特性的声明与使用，可以让您的样式设定更具机动与变化 。其实您可以先熟悉上一章为您介绍的基本的声明与应用方法，再应用本章所讲的挑选者特性，一步步地去熟悉样式表的使用。

连　结　拟　似　特　性　的　应　用

　　还记得在HTML的基本语法，在BODY标签中可 以用link、alink、vlink属性去控制可连结或已连结的字体颜色吗？现在亦可用ＣＳＳ去控制这些性质，称为『拟似类别』（pseudo class）。您可以将其当作一般类别，声明其样式规则，而实际上，这些拟似类别并不用像上面讲的类别挑选者，在HTML原始码中再 行设定指向的类别（CLASS）。下面介绍拟似类别的声明与应用。

一般的声明方式：拟似类别是以冒号来声明。
只要在STYLE.../STYLE架构中加入下面的声明後，则页面中的连结文字就会依您设定的样式显式了！
A:link { 样式 规则 }
A:active { 样式规则 }
A:visited { 样式规则 }
A:hover { 样式规 则 }
A:link用以设定未参观连结的样式规则。A:active用以设定作用中连结的样式规则。A:visited用以设定已参观连结的样式规则。A:hover用以设定滑鼠移到 连结之上时的样式规则。而其中hover并不被NC4所支援，其它三个特性两大浏览器都有支持。

　　如果您用的是IE4以上的浏览器，从本站链接您就可以知道 hover作用的妙处，以简单的样式设定就可以达成以往要写好长一串设定的相同效果 。这个连结拟似类别也可以与上面说过的类别挑选者特性合并使用。

Ｄ　Ｉ　Ｖ　与　Ｓ　Ｐ　Ａ　Ｎ　的　比　较

　　虽然样式表可以套用在任何标签之上，但是 ＤＩＶ和ＳＰＡＮ元素的使用更是大大地扩展了HTML的应用层面。ＤＩＶ和ＳＰＡＮ这 两个元素在应用上十分类似，使用时都必加上结尾标签，也就是 DIV.../DIV和SPAN.../SPAN 。两个可以应用的属性与事件处理也很类似，都可以配合前面提过的挑选者特性来编写。两者也都不强加显示功能于页面内容之上，可以说是使用上十分广泛的元素标签。

　　而ＤＩＶ和ＳＰＡＮ的不同之处在于：ＤＩＶ元素定义为区块（block），在 DIV.../DIV之间是一个很完整的段落区块。 而ＳＰＡＮ元素则是定义为同轴（in-line），SPAN... /SPAN应用于于小范围内的设定。两者可以彼此混合，夹杂使用，因为彼此是相互独立的。也因此，您可以利用这两个元素，配合其它性质，灵活地调整您的网页 显示的内容。