超链接如何加下划线 css

Posted 2023-03-25

我已经在CSS文件中定义超链接无划线，可现在又想让网页中的几个超链接有下划线，其它的没有！！

怎么做？代码？？能只改这几个吗？？让他不受原来的CSS控制

给需要添加下划线的超链接添加单独样式或者一个class，包含关键代码：text-decoration:underline。

实例演示如下：

1、设计一个html页面，放入一些a标签超链接：

2、给a便签全部取消下划线:

3、此时的页面展示如下：

4、在样式中添加一个class，去掉下划线：

5、演示：给一些a便签添加第四步的class：

6、刷新页面，此时效果如下：

参考技术A

超链接加下划线的方法如下：

1、首先在新建的文档里面输入文字内容，示例代码如下：<a>文字内容，超链接的名字</a>。

2、进行预览，可以看到目前只有一个文字，没有任何的形式。

3、先进行设置超链接，代码如下：href="链接的网址"。

4、然后对网址文字进行下划线的设置，代码如下：class="noline"。

5、现在进行预览，就可以看到超链接有下划线了，整体代码如下：<a class="noline" href="http://ceshi.com">文字内容，超链接的名字</a>

参考技术B CSS超链接加下划线通过设置text-decoration属性来实现。
CSS也可以实现设置一部分超链接有下划线，一部分没有下划线。
<style>
.box1 acolor:#000;text-decoration:none;
.box2 acolor:#000;text-decoration:underline;
<style>
<div class="box1"><a href="链接一">这里没有下划线的链接</a></div>
<div class="box2"><a href="链接一">这里有下划线的链接</a></div>

text-decoration 属性规定添加到文本的修饰。
语法：
text-decoration：<' text-decoration-line '> || <' text-decoration-style '> || <' text-decoration-color '>
默认值：看每个独立属性
适用于：所有元素
继承性：无
动画性：看每个独立属性
计算值：看每个独立属性
相关属性：<' text-decoration-skip '> || <' text-underline-position '>
取值：
<' text-decoration-line '>：
指定文本装饰的种类。相当于CSS2.1的 <' text-decoration '> 属性，可取值：none | underline | overline | line-through | blink
<' text-decoration-style '>：
指定文本装饰的样式。
<' text-decoration-color '>：
指定文本装饰的颜色。 参考技术C 你再另外起个名字，写上超链接的代码，然后在你网页中要用到的地方调用就行了。其它的都不用修改。
样式
.test a text-decoration:underline;
调用
<div class="test"><a href="#">网页中要有下划线的地方</a></div> 参考技术D

css部分：

.noline 
text-decoration: underline;

或者：

.noline 
a:hover:text-decoration: underline;

html部分：

<a class="noline" href="http://ceshi.com">链接</a>

a标签的几种状态和顺序： 
a:link
    描述页面上的超级链接的文本的颜色、状态等
 
a:active
  超级链接激活时，也就是当鼠标左键按下时，超级链接的文本的颜色、状态等
   
a:visited  已经看过的超级链接的文本的颜色、状态等
 
a:hover
   当鼠标移动到超级链接上时，超级链接的文本的颜色、状态等