博卉网 | 知识让人进步-every thing

a标签去掉下划线和变色(HTMLcss样式)

原创版权 未知作者:缘起 字体大小选择: [ ]

HTML中超链接a标签加上或去掉下划线和颜色的css样式

使用Dreamweaver网页编辑软件来设置css比较直观。
text-decoration

使用Dreamweaver网页编辑软件来设置css比较直观。

可以使用自定义css样式代码的方式实现,直接找到HTML页面当中的相关链接,然后使用内联的方式就可以。

也可以更改相关的css文件代码。如果是dedecms或者WordPress的话,可以在HTML代码当中,找到所调用的css样式文件,然后再根据class或id属性、标签来查找并修改即可。比如在css文件里面查找text-decoration。

text-decoration意思是文本修饰,对应可以有下划线(underline)、上划线(overline)、删除线(line-through)、无(none)、继承(inherit)等。

color代表的是颜色。


a标签去掉下划线:

<a href="#" style="text-decoration: none;">没有下划线的超链接</a>
text-decoration: none;含义:(文本修饰:无、取消下划线。)

显示效果:没有下划线的超链接
<a href="#" style="text-decoration: none;">我是一个超链接</a>


a标签显示下划线:

<a href="#" style="text-decoration: underline;">有下划线的超链接</a>
text-decoration: underline;(文本修饰:下划线。)

显示效果:有下划线的超链接


a标签取消下划线,并设置颜色为红色:

<a href="#" style="color: #F00; text-decoration: none;">红色无下划线的超链接</a>
(color: #F00代表红色)
text-decoration: none;含义:(文本修饰:无、取消下划线。)

显示效果:红色无下划线的超链接


a标签显示下划线,颜色设置为红色:

<a href="#" style="color: #F00; text-decoration: underline;">红色有下划线的超链接</a>(color: #F00代表红色)
text-decoration: underline;(文本修饰:下划线。)

显示效果:红色有下划线的超链接


a标签取消下划线,颜色设置为黑色:

<a href="#" style="color: #000; text-decoration: none;">黑色无下划线的超链接</a>(color: #000代表黑色)
text-decoration: none;含义:(文本修饰:无、取消下划线。)

显示效果:黑色无下划线的超链接


a标签显示下划线,颜色设置为黑色:

<a href="#" style="color: #000; text-decoration: underline;">黑色有下划线的超链接</a>(color: #000代表黑色)
text-decoration: underline;(文本修饰:下划线。)

显示效果:黑色有下划线的超链接


a标签取消下划线,颜色设置为绿色:

<a href="#" style="color: #008040; text-decoration: none;">绿色无下划线的超链接</a>(color: #008040代表绿色)
text-decoration: none;含义:(文本修饰:无、取消下划线。)

显示效果:绿色无下划线的超链接


a标签显示下划线,颜色设置为绿色:

<a href="#" style="color: #008040; text-decoration: underline;">绿色有下划线的超链接</a>(color: #008040代表绿色)

text-decoration: underline;(文本修饰:下划线。)

显示效果:绿色有下划线的超链接


也可以在<style></style>标签里面添加以下代码:

(只能添加一句哦!多了无效!)

a{text-decoration: none;color: #000;}/*黑色*/

a{text-decoration: none;color: #F00;}/*红色*/

a{text-decoration: none;color: #30F;}/*蓝色*/


 

发表评论 (已有 条评论)

  

评论列表

    快来评论,快来抢沙发吧~