05.对连接应用样式

2017-10-24  本文已影响0人  专吃小蘑菇的马里奥

对连接应用样式:

1 简单的链接样式:

1.1 包含片段标识符的锚(页面将跳转到第二个锚点的位置)

<p> <a href="#mainContent"></a> </p>
<h1> <a name="mainContent"></a> </h1>

1.2 伪类选择器:

1.3 下划线:


2 链接修饰:


3 为链接目标设置样式:

链接到页面特定部分的做法是:在href的末尾添加一个#字符,然后加上要链接元素的ID。这非常适合指向很长的评论页面中的某一评论。

上述方法的缺点是: 如果页面内容比较多的时候,不容易看出链接到了哪个元素上。

So,CSS3允许使用 :target 伪类为目标元素设置样式。
比如,用于高亮显示跳转到的元素。

:target {
font-weight:bolder;
background-color:#abc;  /*设置跳转后链接目标元素的背景色和字粗*/
}
#first:target{
font-weight:bolder;
background-color:#abc;  /*设置跳转后ID为first的链接目标元素的背景色...*/
}

4 突出显示不同类型的链接:

4.1 离站链接:

像维基百科一样在链接右后边加一个背景小图标(一个框加一个箭头),告诉用户这个链接将离开站点。

4.1.1 比较好的做法是:

4.1.2 最好的做法是:

a[href^="http:"]{ 
    background:url(/img/externalink.gif) no-repeat right top;
    padding-right:10px;
}

4.2 下载链接:

a[href$=".doc"]{
    background:url(/img/wordLink.gif) no-repeat top right;
    padding-right:10px;
}

5. 创建类似按钮的链接:

将锚的 display 属性设置为 block ,然后修改 width、height和其他属性来创建需要的样式和单击区域。

{
display:block;
text-decoration:none;
line-height:1.4;  /*设置行高的同时使得文本居中*/
width:6.6em;
text-align:center;
border:1px solid #66a300;
background-color:#8cca12;
color:#fff;
}

5.1 简单的翻转:

在鼠标悬停时,通过设置背景色和文本颜色,实现简单的翻转效果。以前都是使使用庞杂的JS实现,现在只需要使用 :hover 伪类就可以轻松实现。

5.2 图像翻转:

设置 :active 伪类的背景图像,并把按钮文本放在图像上边,同时在 :link、:visited 下设置 大的负文本缩进

5.3 用 css3 实现翻转:

css3 包含 text-shadow、box-shadow、boder-radius 等属性,就不需要使用背景图像来实现翻转效果了。

5.4 纯 css 工具提示:

比如:在具有 title 属性的元素上悬停鼠标时,一些浏览器会弹出文本框。鉴于此,可以使用 css 定位技术穿件纯 css 工具提示。


上一篇 下一篇

猜你喜欢

热点阅读