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

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

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

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

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

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

text-decoration代表的是下划线。

color代表的是颜色。

a标签去掉下划线:

<a href="#" style="text-decoration: none;">没有下划线的超链接</a>

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

<a href="#" style="text-decoration: underline;">有下划线的超链接</a>

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

<a href="#" style="text-decoration: none;">我是一个超链接</a>

a标签下划线和颜色的css样式设置(使用其他颜色代替,比如红色、黑色等):

<a href="#" style="color: #F00; text-decoration: none;">红色无下划线的超链接</a>(color: #F00代表红色)

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

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

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

<a href="#" style="color: #000; text-decoration: none;">黑色无下划线的超链接</a>(color: #000代表黑色)

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

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

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

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

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

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

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

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

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

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

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

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

也可以在<style></style>标签里面添加以下代码: a{text-decoration: none;}

支付宝扫码打赏支付宝扫码打赏 微信打赏微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者,可备注文章信息、联系方式 。

如果您觉得小编这篇文章写得不好、观点有问题、说的不对,欢迎注册账号来怼小编,可使用qq、微信二维码登录。如果觉得写的不错,也欢迎留言赞小编。
欢迎关注本站微信公众号:撑船人网(wwwchengchuanren)。
打开微信->点击右上角加号->添加朋友-> 公众号->搜索:撑船人网->或者:wwwchengchuanren->关注即可。
也可以扫描二维码:

欢迎关注本站微信公众号:撑船人网(wwwchengchuanren)

手机支付宝扫一扫,领红包,保存这张图片,每天都可以领取。

最后编辑于:2019/7/24作者:6ahp9hcdlk

该用户很懒,还没有介绍自己。