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

Kim_Kim · 发表于 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：

<html>
<head>
<title>CSS伪类 pseudo-class</title>
<style type="text/css">
a:link {color: #FF0000} /* 未被访问的链接红色 */
a:visited {color: #00FF00} /* 已被访问过的链接绿色 */
a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接橙色 */
a:active {color: #0000FF} /* 鼠标点中激活链接蓝色 */
</style>
</head>
<body>
<a href = "http://www.xyhc.com/viewthread.php?tid=666964&extra=page%3D1">欢迎光临小诗的PP贴</a>
</body>
</html>

复制代码

其中：<a href = "这里写网址">这里写标题</a>

复制代码

2. CSS代码示例-锚(a)伪类(pseudo-class)示例：为HTML超链接的不同状态设定CSS，用到a的class属性

<html>
<head>
<title>CSS伪类 pseudo-class</title>
<style type="text/css">
a.c1:link {color: #FF0000} /* 未被访问的链接红色 */
a.c1:visited {color: #00FF00} /* 已被访问过的链接绿色 */
a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接橙色 */
a.c1:active {color: #0000FF} /* 鼠标点中激活链接蓝色 */
</style>
</head>
<body>
<p><a class = "c1" href = "http://www.xyhc.com/forumdisplay.php?fid=165&page=1">欢迎光临会员风采区</a></p>
<p><a href = "http://www.xyhc.com/viewthread.php?tid=666964&extra=page%3D1">欢迎光临偶的PP贴</a></p>
</body>
</html>

复制代码

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

<html> <head> <title>CSS伪类 pseudo-class</title> <style type="text/css"> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FFCC00}a:active {color: #0000FF}</style> </head> <body> <a href = "http://www.xyhc.com/viewthread.php?tid=666964&extra=page%3D1">欢迎光临小诗的PP贴</a> </body> </html>

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

绯舞 · 发表于 2006-7-7 11:01:19

吖。。看的出小诗很认真在学哦过不了小诗就超厉害的说恩恩偶可以放心拉

Kim_Kim · 发表于 2006-7-7 11:02:22

……哈哈，偶买了一本代码书看，现在悠闲在家学代码也8错！

绯舞 · 发表于 2006-7-7 11:03:54

吖。。有书的哦？恩过段时间我不能上网了也看书叫什么名字？

Kim_Kim · 发表于 2006-7-7 11:06:55

原帖由绯舞于 2006-7-7 11:03 发表吖。。有书的哦？恩过段时间我不能上网了也看书叫什么名字？

叫《网页制作范例》，里面有一章专门谈了代码哦~！舞舞过段时间去哪呀？

绯舞 · 发表于 2006-7-7 11:22:18

去旅行

Kim_Kim · 发表于 2006-7-7 11:26:40

哇？这时候去旅行哦？偶要能去就好了，顺便写生

绯舞 · 发表于 2006-7-7 11:59:38

恩去比较凉快的地方就行拉嘿嘿现在还没决定去哪里

Kim_Kim · 发表于 2006-7-7 12:31:45

趁现在8上班，偶也出去玩去，恩恩，决定了

绯舞 · 发表于 2006-7-7 12:44:45

偶只能放暑假寒假的时候去玩一下都不是好日子不素太热就素很冷 55555
PS：把这贴给水了小诗莫怪莫怪嘿嘿^^

账号		自动登录	找回密码
密码			注册

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

评分