发信人: parislenin()
整理人: eagle(2000-06-03 10:51:42), 站内信件
|
说链接样式前，我要向大家介绍一下，在CSS中存在“假类(pseudo-classes)”和
“假元素(pseudo-elements)”这样的概念。我先把其它的元素简单介绍一下，然
后重点说说其中的链接样式的部分。
定义第一个字母first-letter，使用它的目的是让一段文字的开头第一个字母与
其它字母不同，写法象这样：
P:first-letter {font-size : 20pt}
这样一来，所有<P>标签后的第一个字母，也就是下一个自然段的第一个字母
都是 20pt 大小。
定义第一行文字first-line，它可以使一段文字的第一行的样式有别于其它的部
分，例如
BODY:first-line {font-variant : small-caps}
不过大家要注意，这两种元素和马上我要说的 HOVER 只有在微软的IE中才能
被支持。
关于链接的样式，我在其它的许多章节都说过一些，大概就是这样几部分：
A:link 页面上的超级链接的文本的颜色、状态等
A:active 超级链接激活时，也就是当鼠标左键按下时，超级链接
的文本的颜色、状态等
A:visited 已经看过的超级链接的文本的颜色、状态等
A:hover 当鼠标移动到超级链接上时，超级链接的文本的颜色、
状态等
今天我要将这些重新提出来说，是因为几日前，有朋友需要我帮助他解决一
个他的麻烦，象下面的这种麻烦：
在同一幅网页中，不同的链接显示不同的颜色，当鼠标移动到不同的链接上
时，显示的也是不同的式样。
嗯？如果你将鼠标挨个去激活上面的四个链接，你会看到在同一个页面上显
示了不同的链接式样，可能吗？
完全可能！而且从理论上说，我还可以告诉你，在同一页面上，就象这样实
现不同链接的式样的数目是无限大的。
如何实现呢？其实也不复杂，代码就是这样写的：
A.a:link,A.a:visited,A.a:active {COLOR: #0000ff; TEXT-DECORATION: none
}
A.a:hover {COLOR: #ff0000; TEXT-DECORATION: none}
A.b:link,A.b:visited,A.b:active {COLOR: #00ff00; TEXT-DECORATION: none
}
A.b:hover {COLOR: #00a000; TEXT-DECORATION: underline}
A.c:link,A.c:visited,A.c:active {COLOR: #ff0000; TEXT-DECORATION: none
}
A.c:hover {COLOR: #ffffff; TEXT-DECORATION: underline;background-color
: #000000}
A.d:link,A.d:visited,A.d:active {COLOR: #000000; TEXT-DECORATION: none
}
A.d:hover {COLOR: #ff0000; TEXT-DECORATION: none;font-weight : bold}
A .e:link {. . .} A .e:active {. . .} A .e:visited {. . .} A .e
:hover {. . .}
A .f:link {. . . . . .} . . . . . .
A .g:link {. . . . . .} . . . . . .
A .h:link {. . . . . .} . . . . . .
我定义了a、b、c、d、e、f、g、h 八个不同的类，就象你看到的是这样写的
：A . g : link {. . . . . .}。类名g前加了小数点。
在具体的链接中，你需要页面的链接文本使用何种式样时，就这样写：<A h
ref="abc.htm" class="g">
这下你应该是很容易就会做和范例相同的链接样式了，不对吗？
--
庞磊 ---- 网络安居工程倡导者！
倡导网络安居工程，人人都有一个家！！一切从学会制作网页开始。
>>http://www9000.126.com<<>>http://www9000.cn99.com<<
>>http://www9000.yeah.net<<>>http://www9000.home.china.com<<
>>>>>>>>>>>><<<<<<<<<<<<
※ 来源:．月光软件站 http://www.moon-soft.com．[FROM: 202.98.195.2]
|
|