CSS定义网页局部链接的技巧

2016-02-19 23:19 50 1 收藏

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程，今天给大家分享CSS定义网页局部链接的技巧教程,希望对大家能有一点小小的帮助。

【 tulaoshi.com - Web开发】

例如定义了链接主样式如下：

A:link { color:#FFFFFF; text-decoration:none }
A:active { color:#FFFFFF; text-decoration:none }
A:visited { color:#FFFFFF; text-decoration:none }
A:hover { color:#FFFFFF; text-decoration:underline }

局部链接样式一般的写法是这样：

.myClass:link { color:#000000 }
.myClass:active { color:#000000 }
.myClass:visited { color:#000000 }
.myClass:hover { color:#000000 }

下面这种则是简略写法，需要用 ID

#myId A { color:#000000 }

如果父 ID 内有多个子 ID：

#myId #myIdB A { color:#000000 }

如果父 ID 内有多个子样式：

#myId .myClass A { color:#000000 }

局部样式在继承主/父样式的前提下，附属己样式，写法灵活，可自行揣摩。

来源:http://www.tulaoshi.com/n/20160219/1629642.html

上一篇： win10隐藏重要硬盘分区的方法
下一篇： CSS框架带来的效率提升

看过《CSS定义网页局部链接的技巧》的人还看了以下文章更多>>

CSS网页布局教程：CSS伪类定义3种方法

标签： Web开发

在CSS网页布局中，不可避免的会涉及到CSS伪类的问题。到底该如何正确的定义CSS伪类呢？虽然webjx中有很多相关的介绍，但复习一下也无妨。大家看下面的代码就能明白。 a.webjxcom{text-decoration:none;} a.webjxcom:link{color:#f90;} a.webjxcom:hover{color:#fff;background-color:#FF5900;} a.webjxcom:active{color:#FF5900;} a href=&...

CSS学习之CSS网页制作的10个技巧

标签： Web开发

1.marquee 滚动样式是IE独有的,FF不支持 2.css中的filter效果是IE的私有属性,同样所有的非IE浏览器都不认识的. 3.text-transform:capitalize 强制第一个字母大写； text-transform:lowercase 强制所有字母小写 text-transform:uppercase 强制所有字母大写 4.按钮陷下去的效果 a:hover { position:relative; top:...

CSS技巧:网页文字渐变效果

标签： Web开发

本文介绍的技术很经典，也算是一篇老文章了，相信很多人也都看过，之前神飞有注意到国内有些翻译，但是不全面，这里我就将其完整的翻译了一下。你想制作漂亮的标题而不用将每个标题都做成图片吗？这里是一个简单的CSS技巧，它将向你展示使用一个png图片制作渐变文字的方法(纯CSS、无Javascript或Flash)。而你所需要的仅仅是在标题里面的一...

CSS网页隔行换色技巧

标签： Web开发

CSS隔行换色的问题，其实很简单，您可以根据您的需要，采用下面的任何一种方法，当然，要适合你的编码与需求情况：一、background背景图片如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。二、CSS Expression 文字：color:expression(this.sourceIndex%2 ？ '#ff0000':'#000000')...

利用CSS 链接下划线也玩自定义

标签： Html CSS布局 Div+CSS XHTML

由 A List Apart 杂志及作者授权翻译。（Translated with the permission of A List Apart Magazine and the author[s].）说明：文章中“[补充]”内容系译者所补充添加（来自 CSS 2.0 中文手册），目的是方便读者理解相关内容。虽然网页设计师通常有大量的方法控制文档如何呈现，但是基本的CSS不能为页面中链接下方的下划线样...

查看更多精彩>>