第五章--对连接应用样式

来源:互联网 发布:淘宝我的回答能删除么 编辑:程序博客网 时间:2024/06/01 07:56
第五章 对链接应用样式
在本章中,你将学习以下内容:


☆基于层叠对连接选择器进行排序
☆创建应用了样式的链接选择器
☆使用属性选择器对外部链接应用样式
☆使链接表现的像按钮
☆创建已访问链接的样式
☆创建纯CSS的工具提示


5.1简单的链接样式
最容易的办法就是使用锚类型选择器 a{color:red;}
但是他可以用内部的内容也可以引用外部的链接所以用它不总是很理想的。伪类选择器: a:link a:visited a:hover a:active a:focus 
a:focus 可以使用户用键盘访问的时候和用鼠标访问时候的样式相同。 所以最好添加上:focus
a:active:,a:hover,a:focus{color:red;}
其他元素也可以使用:hover、:active、:focus伪类选择器。 例如在表格上添加:hover伪类,在提交按钮上添加:active伪类,在输入框上添加:focus伪类。从而突出显示各种交互形式。IE7和更低版本的浏览器不支持在其他元素上使用伪类选择器,但是所有的现代浏览器都支持。
/*make table rows yellow when hovered over*/
tr:hover{
background:yellow;
}
/*makes some submit buttons in some browsers yellow when pressed*/
input[type="submit"]:active{
background:yellow;
}
/*make inputs yellow when selected*/
input:focus{
background:yellow;
}


大多数人做的第一件事就是把默认的搓逼样式下划线去掉,当鼠标悬停在链接上时显示下划线。 
a:link,a:visited{
text-decroration:none;
}
a:hover,a:focus,a:active{
text-decoration:underline;
}
但是不能把顺序放反了,放返会由于层叠的原因后面的:link和:visited覆盖掉前面的。为了确保不会发生这种情况所以我们要按一下的顺序应用连接样式:
a:link,a:visited,a:hover,a:focus,a:active
记住这个顺序的有效办法是:Lord Vader Hates Furry Animals.


5.2让下划线更有趣
2.1简单的链接修饰
1简单的无下划线何有下划线的交互状态,但是下划线还是影响美观。 可以用边框创建不太影响美观的下划线,取消默认的下划线:
a:link,a:visited{
text-decroation:none;
border-bottom:1px dotted #000;/*虚线变实线*/
}
a:hover,a:focus,a:active{
border-bottom-style:solid;
}


   2.2奇特的链接下划线


使用图像创建链接下划线,可以产生非常有意思的效果。 
a:link,a:visited{
color:#666;
text-decoration:none;
background:url(underline.gif)repeat-x left bottom;
}


5.3已访问连接的样式
开发人员常常忘记处理已访问连接的样式,为了避免不必要的“回溯”操作。现在给每个已访问的链接旁边添加一个复选框, 可以创建非常简单的已访问连接的样式。
a:visited{
padding-right:20px;
background:url(check.gif) no-repeat right middle;
}


5.4为链接目标设置样式
链接除了可以链接到特定的文档之外,还可以使用包含片段标志符的连接到页面的特定部分。实现的方法是在herf结尾加上一个#字符,然后加上要连接的元素的ID。
假设我想连接到这个页面的第三个评论:
<a herf="story.html#comment3">
A great comment by Simon
</a>


使用伪类target为目标元素设置样式
.comment:target{
background-color:yellow;
}
Safari和FireFox近期的版本都支持target选择器,但是IE还不支持。


5.5显示不同类型的链接
对于不同站点和同站点的不同页面设计的问题, 用户常常犯不清,而且会失去控制能力。为了使外部的链接看起来不一样,让用户知道自己是要离开这个站点还是在新的窗口中打开这个链接。可以在这个链接上加一个小图标。 页面包含外部链接的最容易的方法是在所有外部连接上添加一个类,然后将图标作为背景图像引用。 


.external{
background:url(externalink.gif) no-repeat right top;
padding-right:10px;
}
尽管这个方法是很好的有效地但是不够灵巧,也不够优雅,必须手动地为每一个外部连接上添加一个类。




前面讲过用属性选择器来寻找元素,CSS3扩展了他的功能,提供了子字符串匹配。  大多数符合标准的CSS3 已经支持css3选择器了。 


这种技术的工作方式就是根据[att^=val]属性选择器寻找以文本http:开头的所有连接:


a[herf^="http:"]{
background:url(externalink.gif) no-repeat right top;
padding-right:20px;
}
但是这回突出显示所有的外部链接。但是它也会选择使用绝对URL路径而不是相对URL路径的内部链接。 
为了避免这个问题,就要重新设置只想自己站点的所有连接,删除它们的外部连接图标。方法是匹配自己域名的链接,重新设置右内边距,删除外部链接图标。


a[herf^="http://www.yoursite.com"],a[herf^="http://yoursite.com"]{
background-image:none;
padding-right:0;
}




如果你愿意也可以扩展这种技术,对邮件链接也进行突出显示:


a[herf^="mailto:"]{
background:url(/mailto.jpg) no-repeat top right;
padding-right:10px;
}


甚至可以突出显示非标准的协议,比如用笑的AIM图标突出显示AIM即时消息协议:
a[herf^="aim:"]{
background:url(im.png) no-repeat right top;
padding-right:10px;
}


<a herf="aim:goim?screenname=andbudd">instant message</a>


突出显示可下载的文档和提要
css区分下载的这些链接。 要使用[att$=val]属性选择器,寻找他的特定值(比如.pdf or  .doc ect)几位的属性:
a[herf$=".pdf"]{
background:url(pdflink.png) no-repeat right top;
padding-right:10px;
}
a[herf$=".doc"]{
background:url(doc.png) no-repeat right top;
padding-right:10px;
}


可以显示不同的图标突出显示Word和pdf,告诉访问者是下载的链接,而不是另一个页面的链接。
最后许多网站上都提供了RSS提要(feed),区分这些链接使用同样的方法。 




5.6创建类似按钮的链接
锚是行内元素,这意味着只有再单击链接的内容的时候才能激活它们。 但是,有时候希望实现更像按钮的效果,有更大的可单机区域。 为此可以讲锚的display属性设置为block,然后修改width height 和其他属性来创建需要的样式区域。 
a{display:block;
width:6.6em;
line-height:1.4;/*不用height这是为了让链接文本垂直居中而设置的*/
text-align:center;
text-decoration:none;
border:1px solid #66a300;
background-color:#8cca12;
color:#fff;
}
链接显示变为块级元素,单机块中的任何地方都会激活链接。
1.简单的翻转 


过去使用庞大而复杂的javascript实现翻转,现在用a:hover 和a:focus就可以实现。 
对上面的属性进行扩展就可以实现非常简单的翻转效果:
a:hover,a:focus{
background-color:#f7a300;
border-color:#ff7400;
}


2.图像翻转
与前面的示例相似,只是使用的背景图像而不是背景颜色。
a:link,a:visited{
dispaly:block;
width:203px;
height:72px;
text-indent:-1000em;
background:url(button.png) no-repeat left top;
}
a:hover,a:focus{background:url(button-hover.png) left top no-repeat;
}
a:active{
background-image:url(button-active.png);
}
把按钮文本直接放在图像上,然后使用大的副文本缩进隐藏锚文本。 


3.Pixy样式的翻转
多图像的缺点是第一次鼠标放在上面时有第一此加载的短暂的延迟,这会造成山所得效果感觉按钮有点迟钝。 可以将悬停的图像作为背景应用于父元素,让浏览器提前加载它们。 
但是还有另一种方法:不切换多个背景图像,而是使用一个图像并切换他们的背景位置。 好处是减少了服务器请求的数量,而且可以将所有按钮放在一个地方。 这种方法加Pixy方法, pixy是 Stanicek的昵称。 


首先,
创建组合的按钮图像。 
代码几乎和上面示例中的相同,只是改变每个状态的图像的对齐方式:
a:link,a:visited{
dispaly:block;
width:203px;
height:72px;
text-indent:-1000em;
background:url(button.png) no-repeat -203px 0;
}
a:hover,a:focus{background-positon:right top;
}
a:active{background-positon:left top;
}


但是Windows中的IE任然会向服务器请求新的图像,这回产生轻微的闪烁。  避免闪烁的方法:
在IE专用的CSS代码中加入代码:
html{
filter:expression(document.execCommand("backgroundImageCache",false,true));
}




4.CSS精灵
多个服务器的请求会对站点的性能产生显著的影响,所以pixy的方法就是把所有按钮状态包含在一个图像中,从而减少请求的数量。 但是我们还可以更进一步,把所有的图标甚至站点的导航都包含在一个图像中。。。。。这样就可以吧多个图像的服务器请求调用数量减少到两三个。 这就是CSS精灵----包含许多不同的图标,按钮或图形的单个图像。 许多大型网站使用这种技术,包括Yahoo主页。 


#nav li a {
diaplay:block;
text-indent:-999px;
height:119px;
width:100px;
background-image:url(img/nav.png);
background-repeat:no-repeat;
}


#nav li.home a,
#nav li.home a:link,
#nav li.home a:visited{
background-position:0 0;
}


#nav li.home a:hover,
#nav li.home a:focus
   #nav li.home a:active
{
background-position:0 -119px;
}






把所有的图片放在一张图像上面,利用背景图像的位置的属性进行控制,显著加快下载速度,还提高了维护的便利性。




5.用CSS3实现翻转


css3包含text-shadow\box-shadow和border-raidus等属性,可以创建出丰富的按钮图形,不需要任何图像。 


按钮:
a{
display:block;
width:6.6em;
height:1.4em;
line-height:1.4;
text-align:center;
textdecoration:none;
border:1px solid #66a300;
background-color:#fff;
}
接下来,添加曲线边框和投影,还要让文本按钮有点投影:
a{
display:block;
width:6.6em;
height:1.4em;
line-height:1.4;
text-align:center;
textdecoration:none;
border:1px solid #66a300;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
background-image:-webkit-gradient(linear,left top,left bottom,from(#abe142),to(#67a400));
background-color:#8cca12;
color:#fff;
text-shadow:2px 2px 2px #66a300;
-moz-box-shadow:2px 2px 2px #ccc;
-webkit-box-shadow:2px 2px 2px #ccc;
box-shadow:2px 2px 2px #ccc;
-webkit-box-reflect:below 2px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(0.52,transparent),to(white));
}
为了实现渐变,Safari 4 bata版有专有的值-webkit-gradient。 尽管我不建议使用专用的代码,但这是展示CSS以后的发展。 这个专有的属性包括几个参数,渐变的类型(直线后放射状)、渐变的方向(这里是从左上到左下)、初始颜色,结束颜色和中间的过渡点。 显然如果不想用这样的代码可以用渐变的背景图像代替之。紫红色的代码为添加进去的。


最后,Safari还提供了称为box-reflect的专用属性, 顾名思义,他可以创建对象的倒影。  这个属性包括多个参数,倒影的位置和距离以及蒙版图像。 有意思的是,可以用-webkit-gradient值自动生成这个蒙版。 在这里我们打倒影的位置定位在按钮下面2像素, 并且使用一个褪色到白色的蒙版。 绿色的代码为本次添加进去的。
关于是否用这些属性实现这些效果还有争议,原因是跨浏览器的支持问题,不确定他们是否会成为正式的规范, 所以不应该在生产环境中使用这些技术。






5.7纯CSS工具提示
工具提示是当鼠标悬停在具有title属性元素上的浏览器弹出的黄色文本框。 一些开发人员使用JAVASCRIPT和CSS3创建了独特样式的自定义工具提示。  但是通过css工具提示可以创建出纯CSS的工具提示。 这种技术需要具有符合标准的现代的了浏览器(FireFox)才能正确的工作他不是日常使用的技术,但是演示了高级CSS的能力。
首先创建结构良好有意义的HTML


<p>
<a href="http://www.xxxx.xxx" class="tooltip">Andy Budd<span>(This websites rocks)</span></a>web developer based in birghton England.
</p>


在这个例子中首先添加希望现实链接文本的文本,然后将提示文本包含在<span>中。 首先将锚的position属性值设为relative。 这样就可以相对于父元素的位置对<span>进行绝对定位。 不需要将他直接现实出来所以display的值设置为none;


a.tooltip{
position:relative;
}
a.tooltip span{
display:none;
}


当鼠标悬停在锚上面时,希望显示<span>的内容,所以将他的display的值设置为block. 但是只在鼠标悬停在这个链接上时才这样做。 


为了使<span>的内容出现在链接文本的右下方,需要将<span>的position值设置为absolute,并且使它距离锚顶1em 距离左边2em的地位。
a.tooltip:hover span{
diaplay:block;
position:abusolute;
top:1em;
left:2em;
}
这里已经做完了主体的部分余下的工作是做一些修饰让<span>看起来像工具提示。 
a.tooltip:hover span,a.tooltip:focus span{
diaplay:block;
position:absolute;
top:1em;
left:2em;
padding:0.2em,0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:#000;
}
在FireFox中查看,效果应该是这样的。



原创粉丝点击