对链接应用样式

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

二.已访问链接的样式

扫描二维码关注公众号，回复： 2892852 查看本文章

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;
}

css知识点整理（五）

对链接应用样式

猜你喜欢