CSS如何控制超链接

发布网友发布时间：2022-04-21 05:01

共6个回答

热心网友时间：2022-04-06 12:54

先一个例子，比如说下面这段代码：
<style type="text/css"
a:link {text-decoration:none;color:blue;}
a:hover {text-decoration:underline;color:red;}a:active{text-decoration:none;color:yellow;}
a:visited {text-decoration:none;color:green;}</style
其效果是：未被点击时超链接文字无下划线，显示为蓝色；当鼠标放在链接上时有下划线，链接文字显示为红色；当点击链接时，即链接被激活，链接无下划线，显示为*；当点击链接后，也就是链接已被访问过后，链接无下划线，显示为绿色。其中：
a:link 指正常的未被访问过的链接；
a:hover 指鼠标在链接上；
a:active 指正在点的链接；
a:visited 指已经访问过的链接。参数设置：
text-decoration是文字修饰效果的意思；none参数表示超链接文字不显示下划线；underline参数表示超链接的文字有下划线；如果是overline则给超链接文字加上划线；换成line-through则是给超链接文字加上删除线；blink则使文字在闪烁。
color:blue，color:red等是给链接文字加颜色。
还可以添加其他参数，如：
font-weight:bold给链接文字加粗；font-size:16pt设置链接文字字体大小；background:#ffd306给链接文字加背景颜色；font-style:italic链接文字倾斜；border-bottom:1pxdashed#51bfe0给链接文字加虚线，其中1px是虚线的粗细度，数值越大越粗，dashed表示虚线，#51bfe0是虚线颜色，如果要给链接文字加虚线的话，就不用加下划线了。
例如下面这两段代码：
<style type="text/css"
a:hover {text-decoration:none;border-bottom:1px dashed red;}</style
其效果是当鼠标放在链接上的时候链接出现红色虚下划线。
<style type="text/css"a:hover{text-decoration:underline;font-weight:bold;color:red;background:blue;font-style:italic;}</style
其效果就是当鼠标放在链接上的时候，链接有下划线，字体加粗，链接文字为红色，背景为蓝色，文字倾斜。
这样可以么？

热心网友时间：2022-04-06 14:12

超链接的样式有以下四种状态：

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF}   /* 被选择的链接 */

通过以上方法可以对超链接的不同状态进行设置，如下这个例子：

这样就给class为demo的这个超链接在不同的状态设置了不同的文字颜色。

注：需要注意的是，这四个状态在设置的时候顺序必须按照这个方式，不然个别浏览器会无效。

热心网友时间：2022-04-06 15:46

首先针对你的问题，有不同的解决方案：

如果把样式直接写在标签里可以这样做，这样的坏处是不易于后期维护

<div>
<a href="/login" style="color:red">我是红色的超链接</a>
</div>

======

如果把样式分离

(指的是外部引用比如在<head></head>之间加入<link .... 引入，或者直接在同一个页面<style></style> 之间写css代码)，

方法一：在div上定义，则为

----html 部分

<div class="hiDiv">
<a href="/login">我是红色的超链接</a>
<a href="/reg">我也是红色的超链接</a>
</div>

----css 部分 (这里指的是.hiDiv 类下的所有 a 标签)

.hiDiv a{
color:red;
}

方法二：当然也可以在<a>标签上定义类

----html 部分

<div>
    <a href="/login" class="hia">只有我是红色的超链接，因为我有hia类</a>
    <a href="/reg">我不是红色超链接，因为我没有hia 类</a>
</div>

----css 部分

.hia {
color: red;
}

追问样式都是分离的和有区别吗?

追答有区别，是给div 标签加类, 是给 a标签加类，当然都可以达到同样的效果，只是可以通过给父标签也就是 div 添加样式来控制 a 也可以直接在a上添加类控制

热心网友时间：2022-04-06 17:38

<div class=""><a href=""></a></div>
<div><a href="" class=""></a></div>

这两个都可以，class是命名的

热心网友时间：2022-04-06 19:46

<div class="w">
<a href="http://www.baidu.com">百度一下</a>
</div>
<style>
.w a:link{font-size: 40px;color: green;}
.w a:visited{color:black}
.w a:hover{color:red;}
</style>

热心网友时间：2022-04-06 22:10