对链接应用样式
- 1.基于层叠对链接选择器进行排序
- 2.创建应用样式的链接的下划线
- 3.使用属性选择器对外部链接应用样式
- 4.使链接表现得像按钮
- 5.创建已访问链接样式,创建纯css的工具提示
一.简单的链接样式
1.对链接应用样式最容易的方式是使用锚类型选择器,如:
a{color: #666666;}
使用锚也有弊端,就是锚既可以内部引用也可以外部链接
为了解决 不想让没有必要的a链接有css样式,可以使用 “链接伪类选择器”
2.伪类选择器:link用于寻找没有被访问过的链接,visited用于寻找被访问过的链接,这两个为静态的
还有两个动态的hover(鼠标悬停处的元素),active(寻找被激活的元素对于链接,激活发生在链接被单击)
提高可访问性还有个属性focus
a:hover,a:focus{color: red;}
3.其他元素也可以使用伪类选择器
tr:hover{background: #000;}
input[type="submit"]:active{background: #000000;}
input:focus{background: yellow;}
a:link,a:visited{text-decoration: none;}//鼠标悬停时取消下划线
a:hover,a:focus,a:active{text-decoration: underline;}//已激活时有下划线
注意:选择器的次序非常重要,次序反过来,鼠标悬停和激活样式就不齐什么作用了。这是层叠性的原因
最好的应用链接样式的次序:a;link,a:visited,a:hover,a:focus,a:active
二.已访问链接的样式
1.通过在每个已访问链接的旁边添加一个复选框,就可以创建一种非常简单的已访问链接的样式
a:visited{ padding-right: 20px;
background: url("") no-repeat right center;}
2.为特定链接设置样式:实现的方法是在href的末尾加一个#字符,然后加上要链接的元素的ID
。
3.使用[att^=val]属性选择器(序号选择器)寻找以文本http:开头的所有链接
a[href^="http"]{background: url("") no-repeat right top;}
4.例子
a{
color: #666666;
text-decoration: none ;
}
a:hover,a:focus{
color: red;
}
.external{
font: 30px 微软雅黑;
background: url("img/01.png") no-repeat right top;
padding-right: 25px;
background-size: 6%;//等比例缩放
}
img/01.png图片
效果:鼠标滑过
三.创建类似按钮的链接
1.锚是行内元素,只有单击链接的内容时才会激活,为了让锚使用时候更像按钮的效果,增加一个display的属性
a{
display: block;
width: 6.6em;
line-height:1.4;
text-align: center;
text-decoration: none;
border: 1px solid #66a300;
color: #fff;
}
2.简单的翻转(js函数可以实现),现在使用hover伪类创建翻转效果
在原代码的基础上加个hover 和focus
a{
display: block;
width: 16.6em;
line-height:3.4;
text-align: center;
text-decoration: none;
border: 1px solid #66a300;
background: greenyellow;
color: #000;
}
a:hover,a:focus{
background: #f7a300;
border-color: #ff7400;
}
效果: 鼠标滑过
3.图像翻转
更改的是背景图像而不是背景颜色
4.Pixy样式的翻转
四.css精灵:包含许多不同的图标,按钮或者图形的单个图像
通过图片距离x y轴的距离定位找到
五.css3实现翻转
1.增加曲线边框和投影的效果(还让按钮文本有点投影)
a{
display: block;
width: 16.6em;
line-height:3.4;
text-align: center;
text-decoration: none;
border: 1px solid #66a300;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
background: #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;
}
2.实现渐变 -webkit-gradient,包括渐变的类型(直线或放射状),渐变方向(左上到左下)
,初始颜色,结束颜色,中间的过度点。不使用这种专有代码也可以使用渐变的背景图像
a{
display: block;
width: 16.6em;
line-height:3.4;
text-align: center;
text-decoration: none;
border: 1px solid #66a300;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-image: -webkit-gradient(linear,left top, left bottom,from(#abe142), to(#67a400));
background: #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;
}