利用css样式控制超链接颜色显示

很多人在网页上实现不同链接有不同的颜色上不知如何处理,如果改a的属性,好像所有的链接的颜色都改了。

四中超链接状态分别对应的css属性:a{}、a:hover{} 、a:visited{}、a:active{},通常只写a{}、a:hover{}即可,如果你需要其他两种字体颜色设置请参照一下顺序来书写

a{color:red;}
a:visited{color:green;}
a:hover {color:yellow;background:blue;}
a:active {color:lime;background:red;}

放出一个其他字体颜色设置技巧:当文本在被选中时的字体和背景颜色(默认为蓝底白字),通过下面的设置可以改变这种默认效果。

::-moz-selection { background:#d3d3d3; color:#555;}
::-webkit-selection { background:#d3d3d3; color:#555;}
::selection { background:#d3d3d3; color:#555;}

事实上,采用css样式实现这个效果比较简单。

先看一下常用设置:

a:link 超链接的普通样式
a:visited 点击过的
a:hover 鼠标经过时的
a:active 单击时
a:link{text-decoration:none;}       无下划线
a:link{text-decoration:underline;}   有下划线

为了实现不同链接不同效果,我们要为不同效果的那个链接专门定义一个css规则。
比如:

我们常规css是这样的:
a:link{color:#ff0000}
那么网页上所有链接的颜色都是:#ff0000。
现在我们改一下:
a:link{color:#ff0000}
.line1 a:link{color:#000000}

同时,在要改变颜色的链接前加上css定义,像这样:<span class=line1><a href="/">不同颜色的超链接</a></span>,这样的话,这个链接的颜色就改变了。

时间: 2024-09-23 20:14:47

利用css样式控制超链接颜色显示的相关文章

CSS样式控制图片裁切显示

css|控制|显示 我们在论坛新闻系统的时候,其中的有些图片会比较大破坏了整体布局的美观,现通过CSS定义方式使图片进行裁切显示,即,当图片的容器不足以显示整个图片时,会以左上角为开始显示,不足显示的将会隐藏.相关各位同仁也有此想法.现有以下CSS样式,所以贴出来同各位WEB 开发者共享! 当然有人用img 的onload 事件对其宽高进行js控制,不过经招有时会因网页加载过快,或过慢而来不及执行,现向大家推荐代码如下,自行研究. <html><head><meta http

利用CSS准确控制页面和元素背景

css|控制|页面 在CSS出现以前,Web开发者只能对页面和背景元素进行少量的控制.当然,那时候他们能使用background属性将一个图像在整个页面上进行平铺,他们能用bgcolor属性来控制图像的背景颜色.但是他们的控制仅仅这些--例如,他们不能调节页面背景图像的位置,不能控制平铺(tiling),也不能生成页面水印. 现在有了CSS,这些都得到了改变,它可以通过一组background-*指令准确控制页面和元素背景.另外,它还提供了大量优化了的函数.使用CSS指令控制背景元素有很多优势:

两种利用CSS样式截取标题长度的示例

用CSS样式进行截取标题的长度.   第一.用于SPAN或者LI的标题样式    代码如下 复制代码 .text-css { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) :需与ov

在Dreamweaver中利用CSS样式表设置网页

了解 CSS 层叠样式表 (CSS) 是一系列格式设置规则,它们控制 Web 页面内容的外观.使用 CSS 设置页面格式时,内容与表现形式是相互分开的.页面内容(HTML 代码)位于自身的 HTML 文件中,而定义代码表现形式的 CSS 规则位于另一个文件(外部样式表)或 HTML 文档的另一部分(通常为 部分)中.使用 CSS 可以非常灵活并更好地控制页面的外观,从精确的布局定位到特定的字体和样式等. CSS 使您可以控制许多仅使用 HTML 无法控制的属性.例如,您可以为所选文本指定不同的字

如何用CSS样式控制图片之间的间距

css|控制 图片之间的间距不用CSS也可以搞定: <img src=http://www.webjx.com/htmldata/2007-05-04/my.jpg vspace=8 hspace=6> vspace: 竖直方向空出的象素数 hspace: 水平方向空出的象素数

使用CSS样式控制浏览器滚动条的参数总结【zz】

在做到一定特殊风格的网站时候常常为了美观我们需要更改滚动条的颜色及相关设置.那么如何使用标准的样式来控制滚动条呢?经过多次的尝试和总结,我们来简单地介绍一下涉及浏览器滚动条的样式表内容(某些样式需ie5.5+才能支持): 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)    overflow-x水平方向内容溢出时的设置    overflow-y垂直方向内容溢出时的设置    以上三个属性设置的值为visible(默认值).scroll.hidden.auto. 2.scr

利用CSS样式表改善网站可访问性

最近,我不得不对我的一个客户的旧网站进行更新,使得它能够达到可访问性的标准.对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经使用的很多编程惯例已经不再适用,特别是从可访问性上来讲.我曾经使用绝对的字体大小,固定的页面宽度和表格来做版面设计和空间分配. 像那时建构的很多网站一样,我的客户的网站使用了Cascading Style Sheets (CSS)来格式化文本.它没有使用任何CSS的更加强有力的版面设计功能,也没有允许HTML设备独立,而这是CSS可访问性的主要优点之一. 问

网站制作如何用CSS控制超链接样式

  网站制作用CSS可控制超链接样式,一般分为四个部分:a:active是超级链接的初始状态:a:hover是把鼠标放上去时的状况:a:link 是鼠标点击时:a:visited是访问过后的情况. CSS控制超链接的三种方法 1.通过对应超链接外的父级的css类的css样式来控制超链接的样式 案例超链接代码<div class="yangshi"><a href="http://www.wangqi.com/">CSS</a>&l

利用css修改复选框的样式做出如下的样式

问题描述 利用css修改复选框的样式做出如下的样式 解决方案 你这个单css搞不了,要结合js <!doctype html> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script> <style> ul,li{list-style:none;padding:0px;