css入门系列之css的应用补充(三)--.

css入门系列之css的应用补充(三)--.

ID:9507582

大小:59.50 KB

页数:7页

时间:2018-05-01

css入门系列之css的应用补充(三)--._第1页
css入门系列之css的应用补充(三)--._第2页
css入门系列之css的应用补充(三)--._第3页
css入门系列之css的应用补充(三)--._第4页
css入门系列之css的应用补充(三)--._第5页
资源描述:

《css入门系列之css的应用补充(三)--.》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库

1、css入门系列之CSS的应用补充(三)>>.挑 选 者 特 性 的 应 用  在讲挑选者的特性之前,要提一下的是CSS继承的特性。所谓的继承的特性是指被包在内部的标签将拥有外部标签的样式性质。继承的特性最典型的应用通常发挥在预设整份网页的样式,而要指定为其它样式的部份再依要设定在个别元素里即可。这项特性可以提供网页设计者更理想的发挥空间。  接下来就要讲挑选者特性的应用!其实这部份应该算是声明的一种方式,但是在您看过第二章的基本的声明与应用後,到这边再讲挑选者您会比较有概念点。在CSS应用或设计的时候,有几种依据元素的关系或性质来设定显示特定性质的方法,就是挑选者特性的应用,能让

2、您在控制与应用上更加灵活。一、前後文挑选者:依声明标签前後文关系显示特定性质的方法。前後文挑选者便是当浏览器在显示HTML原始码所指定的内容时,会考虑元素标签的前後关系,而去显示指定的样式声明。也就是说只要HTML原始码内的标签排列前後顺序符合时,该项声明便会发生作用了!元素A(标签A)元素B(标签B)元素C(标签C)...{样式规则}要注意的是,前後文挑选者的声明跟集体声明很像,但是集体声明的元素标签间要用逗号隔开,而用前後文挑选者声明时元素标签间要用空格隔开;而这两种声明方式您可以混合使用。元素A元素B,元素C元素D元素E,...{样式规则}这样您就可以用集体声明的方式,声明

3、数组前後文挑选者的样式规则。二、类别挑选者:让单一或数个标签使用同组样式规则的方法。类别(class)可以让不同的元素标签共同套用同一组样式性质或相同的元素标签套用不同组的样式性质。首先介绍的是如何让不同的元素套用同一组样式性质,如下面范例所写即可。<HTML><HEAD><STYLE><--  .blue{color:BLUE}--></STYLE></HEAD><BODY>   ... <H1class="blue">...</H1>   ... <Pclass="blue">...</P>   ...<

4、/BODY>要注意在声明时前面的小点,CLASS名称可任取。而要让相同的元素标签套用不同组的样式性质时,也可以应用类别特性来设定。<HTML><HEAD><STYLE><--  P.blue{color:BLUE}  P.red{color:RED}--></STYLE></HEAD><BODY>   ... <Pclass="blue">...</P>   ... <Pclass="red">...</P>   ...</BODY>要注意同样是在声明时的小点,CLASS名称可任取。灵活运用类别特性,可以让您

5、的样式设定更具机动性唷!三、ID挑选者:与类别挑选者类似,不同的是在『唯一性』。ID特性的使用与类别特性十分雷同,但是,文件里的各个ID都是唯一的。换句话说,类别特性可以重复套用在单一或数个元素标签之上,但是ID属性在一份文件里只能出现一次。如下面范例所写即可。<HTML><HEAD><STYLE><--  #blue{color:BLUE}--></STYLE></HEAD><BODY>   ... <PID="blue">...</P>   ...</BODY>可以看到,声明的方式是利用井字号『#』。而ID的这种『唯

6、一性』正是让JavaScript或VBScript能够对元素进行控制的关键。  透过以上的介绍的挑选者特性的声明与使用,可以让您的样式设定更具机动与变化。其实您可以先熟悉上一章为您介绍的基本的声明与应用方法,再应用本章所讲的挑选者特性,一步步地去熟悉样式表的使用。连 结 拟 似 特 性 的 应 用  还记得在HTML的基本语法,在BODY标签中可以用link、alink、vlink属性去控制可连结或已连结的字体颜色吗?现在亦可用CSS去控制这些性质,称为『拟似类别』(pseudoclass)。您可以将其当作一般类别,声明其样式规则,而实际上,这些拟似类别并不用像上面讲的类别挑选者

7、,在HTML原始码中再行设定指向的类别(CLASS)。下面介绍拟似类别的声明与应用。一般的声明方式:拟似类别是以冒号来声明。只要在<STYLE>...</STYLE>架构中加入下面的声明後,则页面中的连结文字就会依您设定的样式显式了!A:link{样式规则}A:active{样式规则}A:visited{样式规则}A:hover{样式规则}A:link用以设定未参观连结的样式规则。A:active用以设定作用中连结的样式规则。A:visited用以设定已参观连结的样式

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。