码迷,mamicode.com
首页 > Web开发 > 详细

CSS3秘笈:第九章

时间:2015-12-23 00:26:47      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:

1.链接状态:大部分浏览器支持4中基本的链接状态:未访问的链接、已访问的链接、访问者的鼠标正悬停在上方的链接、正被单击的链接。这些状态的4个对应伪类选择器分别是:link、:visited、:hover、:active。

为了实现最大程度的设计控制,必须对所有不同的访问状态都定义样式,但是必须按照指定顺序:

a : link{color : #F60; }

a : visited{color : #900; }

a : hover{color : #F33; }

a : active{color : #B2F511; }

如果改变上述顺序,hover和active将不起作用。因为样式具有相同权重,但是出现的顺序决定了哪种样式胜出,如果改变了顺序,那么hover可能永远不会被访问。

2.给链接定义样式:

(1)给链接添加下划线:

①完全取消下划线:要取消普通的下划线可以使用text-decoration属性,并将它的值设为none:a {text-decoration:none;}

②在鼠标经过时添加下划线:首先取消链接的下划线然后使用伪类重新引入:

a {

         text-decoration:none;

         background-color:#f00;

}

a:hover{

                  background-color:transparent;

                  text-decoration:underline;

}

③使用底部边框线:隐藏普通的下划线然后添加一条边框:

a{

         text-decoration:none;

         border-bottom:dashed 2px #9f3;

}

④使用背景图片:取消普通的下划线并添加背景

a{    text-decoration:none;

         background:url(images/underline.gif) repeat-x left bottom;

         padding-bottom:5px;

}

3.创建导航栏:

(1)使用无序列表:导航栏实际上就是一连串的链接,可以使用<ul>标签创建:

<ul>

         <li><a href=“index.html”>Home</a></li>

         <li><a href=“news.html”>News</a></li>

</ul>

这样写出的导航只是一连串的链接而已不够美观,我们需要做一些调整:

①取消项目符号:将list-style-position属性值设置为none就可以取消项目符号。

②消除padding和margin:由于浏览器会从左侧缩进列表项目,所以要去除增加的这部分空间。

(2)垂直导航栏:垂直导航栏其实就是一连串的链接互相叠在一起。

①吧链接当成块显示:标签<a>是一个行内元素,因此它和它的内部的内容一样宽。要避免这种情况就要将链接定义为块元素:

ul.nav a{

                  display:block;

                  }

②限制按钮的宽度:可以通过设置width的值来限制宽度。

(3)水平导航栏:创建水平导航栏有两种办法:

①利用display:inline-block属性。

②使用浮动列表项目。定义float属性值让列表浮动。

4.CSS的预载替换法:JS中有一种被称作预加载的方法,能在需要之前自动下载好替换的图片因此可以避免延迟问题。但是CSS没有这种选择因此需要采用CSS精灵策略。它使用一张图片就可以创建同一个按钮的不同状态。

实施步骤如下:

(1)在你最喜欢的图像编辑软件中创建一张带有不同按钮版本的图片。可以把这些图片一张张地叠起来,让普通的链接图片放在最上面,替换图片放在最下面。

(2)测量从整张图片的顶部到每张图片顶部之间的距离。

(3)给普通的链接创建一个CSS样式。例如,将图片放进背景并把它放在样式的左上方,这个样式看起来像这样:

a { background:#E7E7E7 url(images/pixy.png)no-repeat  left  top;}

(4)创建:hover样式。

利用background-position属性使图片的方向转成朝上,因此第一张图片消失,替换图片变成可见。a:hover { background-position:0  -39px;}

除了防止讨厌的下载延迟之外,这种方法也有助于帮助你将导航图片放在一个单独的文件里面。

5.给特殊的链接类型定义样式:

(1)指向网站外部的链接:<a href=“http://…….”></a>。外部链接的路径必须是绝对URL。

(2)链接到电子邮箱:所有的邮箱链接都是以mailto:开头。<a href=‘mailto:’}

(3)链接到特殊类型的文件:例如指向一个PDF文件代码为:<a href=“annual_report.pdf”>

 

CSS3秘笈:第九章

标签:

原文地址:http://www.cnblogs.com/koto/p/5068461.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!