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

2016-02-19 23:19 49 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 }

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

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

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

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

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

标签： Web开发

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

CSS网页隔行换色技巧

标签： Web开发

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

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的常用技巧放送(一) 一.使用css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。二.明确定义单位，除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width: 100px width:100...

网页技巧之怎样编写CSS

标签： Html CSS布局 Div+CSS XHTML

一种是把CSS文档放到＜head＞文档中：＜style type=“text/css”＞ …… ＜/style＞其中＜style＞中的“type=‘text/css’”的意思是＜style＞中的代码是定义样式表单的。另一种方法是把CSS样式表写在HTML的行内，比如下面的代码：＜p style=“font-size：14pt；color...

查看更多精彩>>