Html去除a标签的默认样式的操作代码

  发布时间:2024-09-25 16:37:28   作者: kfepiza   我要评论
在Html中,a标签默认的超链接样式是蓝色字体配下划线,这可能不满足所有设计需求,如需去除这些默认样式,可以通过CSS来实现,本文给大家介绍Html去除a标签的默认样式的操作代码,感兴趣的朋友跟随小编一起看看吧

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

Html去除a标签的默认样式,
a标签超链接字体默认蓝色带下划线;
去除可用:

1
2
3
4
5
a{
    text-decoration:none;
    color:inherit;
    cursor:auto;
}

测试代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="zh-CN" dir="ltr"><head><meta charset="utf-8"/><title>Ctrl ae uk ak Bash</title><style id="Style001">
a{
    text-decoration:none;
    color:inherit;
    cursor:auto;
}
</style></head><body>
<div>
    <a>这是一个a标签, 去掉a标签的样式, 用了👇</a>
    <a></a>
    <script>
        const Style001 = document.getElementById("Style001");
        document.currentScript.previousElementSibling.innerHTML = '<pre style="font-size:66px;">' + document.getElementById("Style001").innerHTML + '</pre>';
    </script>
</div>
</body></html>

效果

text-decoration 属性

text-decoration CSS 简写属性设置文本上的装饰性线条的外观。它是 text-decoration-linetext-decoration-colortext-decoration-style 和较新的 text-decoration-thickness 属性的缩写。

MDN text-decoration

text-decoration 可以设置1到4个参数, 允许不分先后, 分别为:

  • line划线种类 text-decoration-line
  • color划线颜色 text-decoration-color
  • style划线样式 text-decoration-style
  • thickness划线厚度 text-decoration-thickness

text-decoration-line

  • none 无修饰。
  • overline 上划线。
  • line-through 中划线, 有一条贯穿文本中间的修饰线。
  • underline 下划线。

text-decoration-color

设置划线颜色

1
2
3
text-decoration-color:red; text-decoration-line:underline
可写成, 不分前后
text-decoration: red underline;

text-decoration-style

1
2
3
4
5
text-decoration-style: solid;   /*** 实线 ***/
text-decoration-style: double/*** 双实线 ***/
text-decoration-style: dotted/*** 点划线 ***/
text-decoration-style: dashed/*** 虚线 ***/
text-decoration-style: wavy;    /*** 波浪线 ***/

text-decoration-thickness

文本装饰线厚度 (粗细)
CSS 属性 text-decoration-thickness 用于设置元素中文本所使用的装饰线(如 line-through、underline 或 overline)的笔触厚度。
取值:

  • auto : 由浏览器为文本装饰线选择合适的厚度。
  • from-font : 如果字体文件中包含了首选的厚度值,则使用字体文件的厚度值。如果字体文件中没有包含首选的厚度值,则效果和设置为 auto 一样,由浏览器选择合适的厚度值。
  • 长度, 如 1em , 2px,
  • 百分比, 如 10%
1
2
3
4
5
6
7
8
/* Single keyword */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;
/* 长度*/
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;
/* 百分比*/
text-decoration-thickness: 10%;

可以写在text-decoration 四个参数位置的任意位置

到此这篇关于Html去除a标签的默认样式的文章就介绍到这了,更多相关html a标签内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

蓄力AI

相关文章

  • html post请求之a标签的两种用法解析

    这篇文章主要介绍了html post请求之a标签的两种用法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-05-12
  • HTML常用meta大全(推荐)

    这篇文章主要介绍了HTML常用meta大全(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-30
  • 详解 html area标签

    area 元素总是嵌套在 <map> 标签中。本文重点给大家介绍html area标签的相关知识,需要的朋友参考下吧
    2018-10-15
  • HTML中的<meta>标签的使用详解

    这篇文章主要介绍了HTML中的<meta>标签的使用,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-06-05
  • html中meta标签及用法详解

    <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。这篇文章给大家介绍了html中meta标签及用法详解,感兴趣的朋
    2018-02-23
  • HTML超链接a标签_动力节点Java学院整理

    <a>是超链接标签,什么是超链接呢?这篇文章主要介绍了HTML超链接a标签的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-21
  • html meta标签的使用总结(推荐)

    下面就为大家带来一篇html meta标签的使用总结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • HTML的meta标签常见用法集锦

    写在Web的head头部中的mata标签看似不起眼,实则可以设置非常多种的功能,包括页面编码等重要设定,这里我们便来总结HTML的meta标签常见用法集锦:
    2016-07-11
  • HTML的a标签href属性指定相对路径与绝对路径的用法讲解

    href是链接前端文件的一个最常用的重要属性,这里我们就来看一下HTML的a标签href属性指定相对路径与绝对路径的用法讲解,需要的朋友可以参考下
    2016-07-11
  • 举例讲解HTML中META标签的一些使用技巧

    这篇文章主要介绍了HTML中META标签的一些使用技巧,共举了10个小例子,HTML5中META标签也有演进,可以说是HTML学习中的重要知识点,需要的朋友可以参考下
    2015-12-08

最新评论