新萤火虫论坛

 找回密码
 注册
查看: 2375|回复: 12

[07/07][教程]小诗老师来讲CSS伪类(pseudo-class)

[复制链接]
发表于 2006-7-7 10:35:41 | 显示全部楼层 |阅读模式
和一般的CSS语法不同CSS伪类的语法有两种。
第一种: selector:pseudo-class {property: value}
例句: a:link {color:red}
第二种: selector.class:pseudo-class {property: value}
例句: a.c1:link {color:red} 锚(a)伪类 锚(a)伪类是最常用的伪类。例句如下: a:link {color: #FF0000} /* 未被访问的链接 红色 */ a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
也可以用HTML的class属性来设定伪类。例句如下: a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */ a.c1:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
注:由于CSS优先级的关系(后面比前面的优先级高),在写a的CSS时,一定要按照a:link, a:visited, a:hover, a:actived的顺序书写。

1. CSS代码示例-锚(a)伪类(pseudo-class)示例:为HTML超链接的不同状态设定CSS:
  1. <html>
  2. <head>
  3. <title>CSS伪类 pseudo-class</title>
  4. <style type="text/css">
  5. a:link {color: #FF0000} /* 未被访问的链接 红色 */
  6. a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
  7. a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
  8. a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
  9. </style>
  10. </head>
  11. <body>
  12. <a href = "http://www.xyhc.com/viewthread.php?tid=666964&extra=page%3D1">欢迎光临小诗的PP贴</a>
  13. </body>
  14. </html>
复制代码

  1. 其中:<a href = "这里写网址">这里写标题</a>
复制代码



2. CSS代码示例-锚(a)伪类(pseudo-class)示例:为HTML超链接的不同状态设定CSS,用到a的class属性
  1. <html>
  2. <head>
  3. <title>CSS伪类 pseudo-class</title>
  4. <style type="text/css">
  5. a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */
  6. a.c1:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
  7. a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
  8. a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
  9. </style>
  10. </head>
  11. <body>
  12. <p><a class = "c1" href = "http://www.xyhc.com/forumdisplay.php?fid=165&page=1">欢迎光临会员风采区</a></p>
  13. <p><a href = "http://www.xyhc.com/viewthread.php?tid=666964&extra=page%3D1">欢迎光临偶的PP贴</a></p>
  14. </body>
  15. </html>
复制代码


效 果 CSS伪类 pseudo-class 欢迎光临小诗的PP贴



[ 本帖最后由 月儿 于 2006-7-9 23:28 编辑 ]

评分

1

查看全部评分

发表于 2006-7-7 11:01:19 | 显示全部楼层
吖。。看的出小诗很认真在学哦 过不了小诗就超厉害的说 恩恩 偶可以放心拉
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-7-7 11:02:22 | 显示全部楼层
……哈哈,偶买了一本代码书看,现在悠闲在家学代码也8错!
回复 支持 反对

使用道具 举报

发表于 2006-7-7 11:03:54 | 显示全部楼层
吖。。有书的哦? 恩 过段时间我不能上网了 也看书 叫什么名字?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-7-7 11:06:55 | 显示全部楼层
原帖由 绯舞 于 2006-7-7 11:03 发表 吖。。有书的哦? 恩 过段时间我不能上网了 也看书 叫什么名字?
叫《网页制作范例》,里面有一章专门谈了代码哦~!舞舞过段时间去哪呀?
回复 支持 反对

使用道具 举报

发表于 2006-7-7 11:22:18 | 显示全部楼层
去旅行
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-7-7 11:26:40 | 显示全部楼层
哇?这时候去旅行哦?偶要能去就好了,顺便写生
回复 支持 反对

使用道具 举报

发表于 2006-7-7 11:59:38 | 显示全部楼层
恩 去比较凉快的地方就行拉 嘿嘿 现在还没决定去哪里
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-7-7 12:31:45 | 显示全部楼层
趁现在8上班,偶也出去玩去,恩恩,决定了
回复 支持 反对

使用道具 举报

发表于 2006-7-7 12:44:45 | 显示全部楼层
偶只能放暑假 寒假的时候去玩一下 都不是好日子 不素太热就素很冷 55555
PS:把这贴给水了 小诗莫怪莫怪 嘿嘿^^
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|萤火虫

GMT++8, 2024-12-24 03:00 , Processed in 0.281471 second(s), 6 queries , File On.

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表