《精通CSS（第二版）》--给链接增加样式

《精通CSS（第二版）》给链接增加样式给链接添加样式

1.链接选择器有哪些,应用顺序是什么？

答：

• 锚类型选择器：即标签选择器 a{color:red;}
• 链接伪类选择器 ： 1）a:link{color:blue;}//没有被访问过的链接呈蓝色

2）a:visited{color:red}//被访问过的链接呈红色

• 动态伪类选择器：1）a:hover,a:active,a:focus{color:red;}//鼠标悬停、单击、键盘移动时，呈红色
• 考虑到层叠和特殊性，按照如下顺序应用链接样式：LVHFA（link-visited-hover-focus-active）

2.链接的默认样式是什么？

答：链接默认带有下划线，如果要去除下划线，需要使用text-decoration属性设置为none。改变下划线的样式，可以使用下边框

border-bottom属性。

3.链接的下划线可以是图片或者动画吗？

答：可以的，设置background属性。backgroud:url(/img/underline.gif) left bottom repeat-x;

4.给链接添加标志的方法？

答：给出链接的右内边距，给右侧图片留出位置

代码说明：a:link{ padding-right: 20px;background: url(/img/check.gif) right center no-repeat;}

5.怎样链接到页面目标？

答：链接目标，即：使用包含片段标识符的链接，链接到页面的特定部分，方法：在href末尾加上#，然后加上链接的元素的ID

代码说明：<a href="http://example.com//story.htm#commet3">A great comment by Simon</a>

6.怎样给链接目标加样式？

答：存在即使跳转到新的页面，也不确定哪一部分是目标元素的情况，解决办法是为目标元素增加样式

方法：使用CSS3支持的:target伪类选择器

代码说明：.comment:target{background:yellow;}

7.查找不同类型链接的方法？

答：使用属性选择器--允许根据特定属性是否存在或属性值来查找元素，CSS3上进一步扩展为：可以提供子字符串匹配

语法：[attribute^=value]

• 外部链接：a[href^="http:"]{background:red;}//其中存在是绝对URL的内部链接，进一步筛选
• 绝对URL：匹配指向自己域名的链接 a[href^="http://www.yoursite.com"],a[href^="http://yoursite.com"]{background:none;}
• 邮件链接：a[href^="mailto:"]
• AIM即使消息协议：a[href^="aim:"]

8.绝对URL和相对URL？

答：

• 绝对URL：完全网址
• 相对URL：相对于当前页面的网址，相同部分用dc/代替

9.链接样式翻转的闪烁问题?

答:使用多图像方法，在浏览器第一次加载鼠标悬停的图像时存在延迟

解决方法：

1）将鼠标悬停的图片作为背景应用于父元素，从而预先加载

2）使用一个图像并且切换背景位置：减少服务器的请求数量，称为Pixy方法

3）在IE专用的CSS文件中包含以下代码，启动背景缓存机制：

html{

filter:exprssion(document.execCommand("backgroundImageCache",false,true));

}

10.什么是CSS精灵？

答：将所有图标甚至站点导航都包含在一个图像中，即包含许多不同图标、按钮或图形的单个图像，通过改变位置坐标而改变图像。

11.创建类似按钮的链接？

答：目的是扩大单击区域，需要将行内元素a设置为块状元素：display:block;这样才能设置垂直方向参数，如行高，高度等。一般制作按钮一定不要使用这种用连接代替按钮的情况，google加速进程会访问这些链接以便缓存他们，会导致意外删除情况。

12.CSS3属性设置样式丰富的链接按钮

答：

• text-shadow：文本阴影
• box-shadow：外围边界阴影
• border-radius：圆角边框
• -webkit-gradient：渐变
• box-reflect：倒影

代码说明：

text-shadow: 2px 2px 2px #66a300;

-webkit-box-shadow:2px 2px 2px #ccc;

-webkit-border-raidus:6px;

background-image: -webkit-gradient(linear,left top,left bottom,from(#a12345),to(#567890));

-webkit-box-reflect:below 2px -webkit-gradient(linear,left top,left bottom,from(#a12345),to(#567890));