同一html页面中不同链接的不同样式
2012-03-02 16:54
197 查看
超链接的样式有:
大家都知道想要设置统一的连接样式,只要在css文件中设置a:link,a:visited,ahover,a:active就行了。可以设置全局的连接样式。比如:
但是有的时候为了一些效果,想要设置一些针对某些特殊连接的样式,就需要在CSS中继续进行加工了。常用的方式有:
1.增加连接样式命名:
调用a1即可,同样方式可以定义a2,a3……或你自己起的名字(a1,a2……为我自己起的名字)
注:IE下的写法在Chrome中有着同样的效果,Chrome中的写法在IE下有时可能不起作用
2、div定义命名:
在调用处写other即可,同样方式,还可以起其它名字
a:link 链接未点击上去时候 a:visited 链接已经点击过的 a:hover 鼠标放在链接上未点击 a:active 是介于hover visited 之间的一个状态,可以说是链接被按下时候的状态
大家都知道想要设置统一的连接样式,只要在css文件中设置a:link,a:visited,ahover,a:active就行了。可以设置全局的连接样式。比如:
<!--chrome浏览器下可以将链接原始属性都写在a:link中,IE内核的浏览器中链接的原始属性中除下划线之外的属性需写在a中--> a { font-size: 12px; color: #4C4C4C; } a:link { text-decoration: none; } a:visited { text-decoration: none; color: #990000; } a:hover { text-decoration: underline; color: #0D488C; } a:active { text-decoration: none; color: #0D488C; }
但是有的时候为了一些效果,想要设置一些针对某些特殊连接的样式,就需要在CSS中继续进行加工了。常用的方式有:
1.增加连接样式命名:
<!--chrome浏览器下写法--> a.a1:link { color: #FF0000; text-decoration: none;} a.a1:visited { color: #FF0000; text-decoration: none;} a.a1:hover { color: #606060; text-decoration: underline;} a.a1:active { color: #606060; text-decoration: underline;}
<!--IE下写法,Chrome下适用--> a.a1{ color: #FF0000; text-decoration: none;} a.a1:visited { color: #FF0000; text-decoration: none;} a.a1:hover { color: #606060; text-decoration: underline;} a.a1:active { color: #606060; text-decoration: underline;}
<!--IE、Chrome下都适用--> a.a1,a.a1:link{ color: #FF0000; text-decoration: none;} a.a1:visited { color: #FF0000; text-decoration: none;} a.a1:hover { color: #606060; text-decoration: underline;} a.a1:active { color: #606060; text-decoration: underline;}
调用a1即可,同样方式可以定义a2,a3……或你自己起的名字(a1,a2……为我自己起的名字)
注:IE下的写法在Chrome中有着同样的效果,Chrome中的写法在IE下有时可能不起作用
2、div定义命名:
div.other a:link{……},a:visited{……},a:hover{……},a:active{ text-decoration:none; color:#eefffe; font-size:28; }
在调用处写other即可,同样方式,还可以起其它名字
相关文章推荐
- 同一html页面中不同链接的不同样式的css代码
- 同一html页面中不同链接的不同样式
- html 链接到同一个页面的不同位置
- iOS 直接改变.html后缀的链接所对应的html页面样式,并获取html的标题,图片地址,id,内容
- PHP传值到不同页面的三种常见方式及php和html之间传值问题
- 如何在HTML不同的页面中,共用头部与尾部?
- html页面不同分辨率下居中显示同样效果
- [C#]同一自定义控件的在不同页面有不同的样式
- HTML学习---------1.20 使用<a>标签链接到另一个页面
- 使用js实现不同终端引入不同的html页面css样式js等
- 关于html中charset与<title>位置不同页面空白的问题及解决方法
- html页面中打印样式
- 如何在HTML不同的页面中,共用头部与尾部?
- 为什么写好的HTML页面在IE上样式失灵
- 点击不同链接,显示同一个页面下的不同页面
- python模块之HTMLParser抓页面上的所有URL链接
- html超链接样式(四种不同状态)设置示例
- 利用Freemarker生成html静态页面,也可利用模版功能生成不同格式的文件
- html中的页面跳转对于ios与android不同
- html页面公共样式(推荐)