分享
 
 
 

CSS对页面文字链接的设置大全

王朝html/css/js·作者佚名  2008-10-08
窄屏简体版  字體: |||超大  

如何使有超级链接的文字不出现下划线?

如何使鼠标移动到超连上产生变色的效果?

如何使鼠标移动到超连上产生文字大小变化的效果?

如何使访问过的链接变成不同的颜色?......

这些问题经常会困扰刚做网页的网友,其实这些问题解决起来是非常简单的,使用CSS的控制就可以非常轻松地做到,而且可以在整个页面上进行设置,不用一个一个链接改的,怎么样,很方便是吧,看完下面的这些,你的问题就会迎刃而解,不多废话了,跟我来吧...

一、看下面的样式:

在<head>和</head>之间加上如下的CSS语法控制:

<style type="text/css"> //也可以直接就写<style>

<!--

a:link { text-decoration: none} //a:link 指正常的未被访问过的链接

a:active { text-decoration: none } //a:active 指点击链接的瞬间出现的链接情况

a:visited { text-decoration: none } //a:visited 指已经访问过的链接

a:hover { text-decoration: none; } //a:hover 指鼠标放上去链接出现的情况

-->

</style>

hover是一个经常会被混淆的属性,一般大家都认为链接是三个属性:link,active,visited,而且一般的网页制作软件里也只有这三个设置,但是hover其实也是一个非常重要的属性,它还可以在链接上加上背景色(BACKGROUND:#ccffcc;),其它的设置与上面三个一样,所以大家现在可以记住,链接上可以做四个属性设置,分别是:link,active,visited,hover

text-decoration是文字修饰效果的意思,none参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline就表示有下划线,换成overline则给超连文字加上划线,换成 line-through给超连文字加上删除线。还有一个是blink参数,顾名思义是闪烁效果,但是他要在NetScape浏览器上才能显示。

二、使粗体文字加上删除线。

粗体文字使用的代码是:B { text-decoration: line-through }

使粗体文字中所有的字母大写。使用代码: B { text-transform: uppercase }(这个在NS中才显示出来,IE没有相应效果显示)

产生既大写,又有颜色,又有删除线的效果 i love you!

以上的代码是:b { text-decoration: line-through; text-transform: uppercase; color: #66FFFF}

另外,用lowercase使所有字母小写显示,capitalize 使每个单词的首字母大写显示。

三、产生链接变色效果:

经过在对链接的几个属性进行颜色设置后,可以使具有link,active,visited属性的链接显示不同的颜色,但是却不会产生鼠标覆盖变色效果。

<style type="text/css">

<!--

a:link { text-decoration: none ; color: green } //正常链接文字显示绿色

a:active { text-decoration: none ; color: yellow } //点击瞬间的链接显示黄色

a:visited { text-decoration: none ; color: red } //已经访问过的链接显示红色

-->

</style>

要想产生鼠标放上去产生变色效果,就要用到另一个属性了,这就是 hover(上面提到过的)。

a:hover { text-decoration: none ; color: yellow;background:white; } 表示鼠标移动到链接文字上时,文字修饰风格为“无”,同时链接文字显示黄色,链接文字的底色显示为白色。

四、看一下下面链接设置的总体运用情况:

<style type="text/css">

<!--

a:link { text-decoration: none ; color: blue ; font-size: 9pt }

a:active { text-decoration: underline ; color: yellow;font-size: 10pt }

a:visited { text-decoration: none ; color: red;font-size: 10.5pt }

a:hover { text-decoration: underline; color: green ; font-size: 11pt;background:white; }

-->

</style>

上面这样设置的总体解释为:

1,链接文字没有下划线,蓝色(blue)显示,字为9pt大小;

2,鼠标点击链接的瞬间文字再现下划线,颜色变成黄色(yellow),并且文字大小变成10pt;

3,访问过的链接没有下划线,文字变成红色(red),同时文字大小变成10.5pt;

4,鼠标放到链接上时出现下划线,颜色为绿色(green),字符大小11pt,同时文字上出现一个白色(white)的背景区域。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有