精通CSS——chapter5（对链接应用样式）

5.1简单的链接样式 这里主要讲的就是伪类， ：link伪选择器用来寻找没有被访问过的链接， ：visited伪类选择用来寻找被访问过的链接。 a:link ,a:visited{ text-decoration: none; } a:hover,a:focus,a:active{ text-decoration: underline; } 这个是一个链接，当我们操作的时候就会有相应的反应 但是在这里我们需要强调的就是选择器的次序非常重要，如果次序反过来，那么鼠标悬停和激活样式就不起作用了。当两个规则具有相同的特殊性的时候，后定义的规则优先，所以：link和：visited样式将覆盖：hover和：active样式。为了保证不出现这种情况，最好按照以下的顺序： a:link, a:visited, a:hover , a:focus , a:active 记住这个方法的口诀：Lord Vader Hates Furry Animals（罗德瓦德讨厌毛绒绒的动物） 5.4为链接目标设置样式 /* Pretty */ body { font: 75%/1.5 “Myriad Pro”,”Myriad Web”,”Lucida Grande”,”Trebuchet MS”,”Tahoma”,”Helvetica”,”Arial”,sans-serif; color: #434343; } .comment { background-color: #ddd; border: 1px solid #ccc; width: 50em; padding: 1em; margin: 2em 0; background-image: none; } /* Technique */ .comment:target { background-color: yellow; }

Comments

Comment #1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam facilisis sapien ut ante. Curabitur pretium, risus sed tristique porttitor, nisl urna feugiat sem, quis laoreet velit dui in est. In hac habitasse platea dictumst. In a ligula. Donec dapibus. Praesent eu nulla ut tortor facilisis volutpat. Duis aliquet, elit et aliquam vehicula, est nibh pulvinar magna, non venenatis libero nisi sit amet mauris. Quisque volutpat mi vel dolor. Ut vitae mauris. Mauris felis enim, rhoncus in, feugiat posuere, venenatis ut, lorem.

comment2

Comment #2

Nulla facilisi. Nullam nisl libero, pulvinar non, ultricies non, luctus et, dui. Vestibulum elementum metus ut ligula. Donec blandit. Sed a diam. Maecenas accumsan. Suspendisse placerat est sit amet augue. Pellentesque sit amet ante ut velit semper feugiat. Curabitur sed mi in turpis congue congue. In consectetuer bibendum tellus. Phasellus magna. Proin laoreet metus et quam. Proin id ante. Vivamus ipsum justo, pharetra eget, auctor at, aliquet nec, tellus. Ut scelerisque viverra magna. Mauris sit amet nisl in eros porta faucibus.

comment3

Comment #3

Praesent odio lacus, malesuada vel, congue sit amet, porttitor quis, nibh. Etiam viverra lacus et dolor. Fusce diam nulla, molestie sit amet, commodo ut, feugiat vitae, ipsum. Ut vehicula posuere odio. Ut elit nunc, laoreet et, lacinia eget, pretium a, tortor. Phasellus consequat lectus. Curabitur fermentum, neque sed feugiat hendrerit, lectus orci molestie orci, ut commodo justo nulla non nisl. Vivamus sed libero. Maecenas quam pede, vulputate sit amet, euismod ut, viverra in, massa. Sed a sem.

comment1

</body>

如果我们点击了那个链接，这个target伪类为目标元素设置样式，三段文字的class都是一样的，但是当我们分别点击的时候就会有目标，然后我们就可以为目标元素设置样式了。

5.5突出显示不同类型的链接

这个就是在一个链接的右上角添加一个小图标，通过一个选择器建立连接。

body {
font: 120%/1.6 “Gill Sans”, Futura, “Lucida Grande”, Geneva, sans-serif;
color: #666;
background: #fff;
}

a:link, a:visited {
color:#666;
}

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

a[href^=”http://www.andybudd.com”], a[href^=”http://andybudd.com”] {
background-image: none;
padding-right: 0;
}

a[href^=”mailto:”] {
background: url(img/email.png) no-repeat right top;
padding-right: 15px;
}

a[href^=”aim:”] {
background: url(img/im.png) no-repeat right top;
padding-right: 15px;
}

–>

This is an external link

And here is a reasonably long line of text containing an absolute internal link, some text, an an external link, some more text, a relative internal link and then some more text.

Contact me by email
Send me an instant message using AIM/iChat.

这个就是效果图，还是挺漂亮的，使用的就是一个[att^=val]的属性选择器来寻找以文本http:开头的所有链接

有的时候，单击一个链接，本以为会进入另一个页面，却发现网站开始下载一个PDF或Microsoft Word文档，好在css也能帮助区分这些链接，这就要使用刚我们说的那种属性选择器了，它寻找以特定值结尾的属性

a[href$=”.pdf”]{ background: url(img/button-active.png) no-repeat right top; padding-right: 10px; } a[href$=”.doc”]{
background: url(img/button-over.png) no-repeat right top;
padding-right: 10px;
}

这个主意是用[att$=val]的，有这种方法就可以看是下载的还是转去一个别的链接。

5.6创建类似按钮的链接
line-height里有垂直居中的效果，如果我们想在一个按钮里面添加文字的话，那么我们就需要用到这个属性，因为它可以帮助文字一直处于垂直居中的位置，但是它有一个缺点，那就是如果按钮中的文本占据两行，那么按钮的高度就是需要高度的两倍，这样严重影响效果，所以我们还是要尽量一行解决

关于按钮的不同效果，有两种方法：
1、悬停，点击和静放的时候用不同的图片
a.two {
display: block;
width: 203px;
height: 72px;
text-indent: -1000em;
background: url(img/button.png) left top no-repeat;
}

a.two:hover {
background-image: url(img/button-over.png);
}

a.two:active {
background-image: url(img/button-active.png);
}

这是最简单的，换三种照片，但是这种就是增加对服务器请求的次数，非常的不好，会拖慢的程序的，所以这种方法也不值得推崇。

2、还有一种方法就是Pixy样式的翻转。

a.three {
display: block;
width: 203px;
height: 72px;
text-indent: -1000em;
background: url(img/buttons.png) -203px 0 no-repeat;
}

a.three:hover {
background-position: right top;
}

a.three:active {
background-position: left top;
}

这种就是我们把三种不同状态的图像放到一块去，然后通过background-position来调整。

当然还有一个进阶版的特别好用，之前我的第一个项目里面就用到了这个，这就是CSS精灵
也就是把一切的图标都放到一块去，这样整个导航页面也许就用了两三张图，这样是最省的
也跟pixy一样用background-position

我们也可以应用到一些CSS3的技术来做一个button

a.four {
display: block;
width: 6.6em;
height: 1.4em;
line-height: 1.4;
text-align: center;
text-decoration: none;
font-weight: 600;
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));
}

a.four:hover {
background-color: #f7a300;
text-shadow: 2px 2px 2px #ff7400;
border-color: #ff7400;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f7a300), to(#ff7400));
}

a.four:active {
background-color: #a7a7a7;
text-shadow: 2px 2px 2px #868686;
border-color: #868686;
background-image: -webkit-gradient(linear, left top, left bottom, from(#a7a7a7), to(#868686));
}

以下的都是safari浏览器才能用到的属性。
这里有用到渐变-webkit-gradiant（直线或者放射（linear）、初始方向（left top）、结束方向（left bottom）、颜色开始（from（#abc142））、颜色结束（to（#67a400）
还有一个是box-reflect是用来创建对象的倒影，还有蒙版图像。