网络编程
位置:首页>> 网络编程>> 网页设计>> [翻译]标记语言和样式手册 Chapter 7 锚点(2)

[翻译]标记语言和样式手册 Chapter 7 锚点(2)

作者:zhaozy 来源:3user.com 发布时间:2008-01-28 14:01:00 

标签:样式,标记,css,手册,锚点

方法B:全部在名称之内

<p><a href="#oranges">About Oranges</a></p>
...一些文字...
<h2><a name="oranges">Oranges Are Tasty</a></h2>
...更多文字...

与方法A一样,我们仍然使用<a>标签配上name属性,但这次我们把它包在我想要链接的标题外面,这么做看起来的确比较符合语义,在方法A里头,我们的连接对象是...恩,什么都没有,但是在方法B里,我们不仅说明了这段文字是标题标签的一部分,同时也是这个页面的连接锚点之一.

小心<a>的全局样式

如果使用了方法B的话,有个地方必须要注意.如果你为所有的<a>元素指定了全局的CSS样式的话(颜色,文字大小,文字装饰等等),这些样式就会覆盖你为<h2>元素指定的样式.会发生这种情况的原因是,在这个例子里头,<a>标签是位于包围它的<h2>标签之内的子元素.

举例来说,假如你的CSS内有类似这样的声明:

a{
  color:green;
  font-weight:bold;
  text-decoration:underline;
}

方法B配上这段CSS就会让标题与其他页面内的<a>一样变成绿色,粗体,加上下划线,或许与你期望的<h2>样式不同.

我们能使用<a>的:link伪类以避免这种现象(同时也能获得其他好处),在本章稍后的"技巧延伸"中会详细讨论.

更丰富的名称属性

使用方法B(以及方法A)的好处之一,就是name属性可以处理更丰富的锚点名称,具体来说,就是能在名称之内使用符号

举例来说,如果使用方法B的话,你可以这么做(在此é代表符号"e"):

<p><a href="#resum&#233;">My Resum&#233;</a></p>
...一些文字...
<h2><a name="resum&#233;">Dan's Resum&#233;</a></h2>
...更多文字...

在处理不属于英文字母的字符时,这个功能十分重要.

但是还有几个方法值得一提,下面这个方法完全不需要使用<a>设定锚点,让我们看看方法C.

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com