CSS语法来控制超链接的形式、颜色变化

最新推荐文章于 2021-08-03 21:17:26 发布
最新推荐文章于 2021-08-03 21:17:26 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： div+css 程序积累 文章标签： css

 

我们可以用 CSS语法来控制超链接的形式、颜色变化。

　　下面我们做一个这样的链接：未被点击时超链接文字无下划线，显示为蓝色；当鼠标在链接上时有下划线，链接文字显示为红色；当点击链接后，链接无下划线，显示为绿色。

　　实现方法很简单，在源代码的<head>和<head>之间加上如下的CSS语法控制：

　　 <style type="text/css">
　　 <!--
　　 a:link { text-decoration: none;color: blue}
　　 a:active { text-decoration:blink}
　　 a:hover { text-decoration:underline;color: red}
　　 a:visited { text-decoration: none;color: green}
　　 -－>
　　 </style>

　　其中：
　　a:link 指正常的未被访问过的链接；
　　a:active 指正在点的链接；
　　a:hover 指鼠标在链接上；
　　a:visited 指已经访问过的链接；
　　text-decoration是文字修饰效果的意思；
　　none参数表示超链接文字不显示下划线；
　　underline参数表示超链接的文字有下划线

　　下面这行文字就是我们刚才做的效果。

效果演示

　　同样，如果讲none替换成overline则给超链接文字加上划线，换成line-through给超链接文字加上删除线，blink则使文字在闪烁。


让网页中的链接去掉下划线

<style type="text/css">
<!--
A { text-decoration: none}
-->
</style>

将代码插入在<head></head>之间.<title>之前即可
CSS实现链接的虚线/下划线效果

003CSS实现链接的虚线/下划线效果
a {
color:#3399FF;
font-weight:Normal; /*CSS字体效果 普通 可以改成bold粗体*/
text-decoration:none; /*CSS下划线效果：无下划线*/
}

a:hover {
color:#4499EE;
text-decoration:none; /*CSS下划线效果：无下划线*/
border-bottom: 1px #0099CC dotted /*CSS加一个只有下边的框 边框为虚线*/
}

a{}控制连接的效果 a:hover{}控制鼠标移上去的效果。

xigl0727
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 链接变颜色 （加边框设置样式）
ios0213的专栏
05-14 2636
无标题文档 .wrap{ width:90%; height:1000px; border:2px solid #CCC; margin:0 auto; } .wrap_01{ height:900px; margin:0px 10px 0px 10px; background-color:#EFEFEF; } .footer{ height:40px; backg
用CSS设置超链接时的文字颜色、样式。
zfq_jxj的专栏
04-16 1847
用CSS设置超链接时的文字颜色、样式。 注意顺序： a:hover必须位于a:visted之后 a:active必须位于a:hover之后 　　<!-- a:link { text-decoration: none;color: green}　 a:visited { text-decoration: none;color: white}　 a:hover { text-d
CSS改变链接的颜色和背景色
简生的代码备忘录
05-22 1972
<br /><ul>       <li id="wpub"><a href=#><strong>Publish</strong> thoughts</a></li>       <li id="wcon"><a href=#><strong>Get</strong> feedback</a></li>       <li id="wshr"><a href=#><strong>Post</strong> photos</a></li>       <li id="wpst"><a href=#><stro
CSS中超链接颜色变化
09-06 452
a:link {color: #FFFF00} /* 未访问的链接 */ a:visited {color: #FFFF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */
css 超链接的颜色,用css样式控制超链接颜色显示
weixin_28895791的博客
08-03 2995
用css样式控制超链接颜色显示用css样式控制超链接颜色显示,阅读用css样式控制超链接颜色显示,很多人在网页上实现不同链接有不同的颜色上不知如何处理，如果改a的属性，好像所有的链接的颜色都改了。事实上，采用css样式实现这个效果比较简单。先看一下常用设置：a:link 超链接的普通样式a很多人在网页上实现不同链接有不同的颜色上不知如何处理，如果改a的属性，好像所有的链接的颜色都改了。事实上，采用...
css对于颜色和文本属性的控制
09-27
【CSS颜色和文本属性控制详解】 CSS（层叠样式表）是网页设计中用来控制页面样式和布局的重要工具。在CSS中，颜色和文本属性的控制是基础且至关重要的部分，它们决定了网页内容的视觉呈现。 ### CSS语法基础 CSS...
html-Javascript语法和css语法手册
最新发布
01-18
CSS语法涵盖以下内容： 1. **选择器**：如`#id`（ID选择器）、`.class`（类选择器）、`element`（元素选择器）用于定位HTML元素。 2. **属性和值**：如`color: red;`、`font-size: 16px;`，定义元素的样式属性。 3. ...
css\html语法详解
09-19
在这份“css\html语法详解”中，我们将深入探讨这两个关键领域的基本概念、语法以及常见用法。 HTML是一种标记语言，用于描述网页内容的结构和意义。它的主要任务是组织网页上的文本、图像、链接等元素。以下是一些...
DIV+CSS语法.pdf
10-04
《深入理解DIV+CSS语法》 在网页设计领域，DIV+CSS是一种常用的...总的来说，熟练掌握这些DIV+CSS语法能帮助我们构建更灵活、响应式的网页布局，并提升用户体验。理解并运用这些技术，可以让你在网页设计中游刃有余。
css 超链接的颜色,css超链接字体颜色
weixin_35034536的博客
08-03 3172
css超链接字体颜色的方法如下：1、首先在菜单栏下的“格式”菜单中或在右键菜单中点击“幻灯片设计”，右侧会出现设计栏；2、再点“配色方案”对话窗，然后右下角有编辑配色方案，双击“自定义”选项卡中“强调文字和超级链接”左侧的颜色块；3、在“强调文字和超级链接颜色”对话框中选择适合的颜色；4、同样双击“强调文字和尾随超级链接”的颜色即可修改已访问超级链接的颜色；5、设置完毕后，点击“应用”即可。这样，...
css如何做到 鼠标移动到超链接时，超链接会发生改变，例如改变颜色、字体大小、背景颜色等
一个程序员-二白的博客
09-23 1万+
例如 你的城市 css: .a1:hover{ color:red;     改变超链接的字体颜色 background-color:red;  改变背景颜色 ｝ 而;active是当鼠标点击时发生的事件
HTML中怎么设置超链接字体颜色和点击后的字体颜色
热门推荐
白太白的博客
01-10 7万+
定义链接样式 CSS为一些特殊效果准备了特定的工具，我们称之为“伪类”。其中有几项是我们经常用到的，下面我们就详细介绍一下经常用于定义链接样式的四个伪类，它们分别是： :link :visited :hover :active 因为我们要定义链接样式，所以其中必不可少的就是超级链接中的锚标签--a，锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法
学习笔记 第七章 使用CSS美化超链接
dingling5406的博客
11-28 499
第7章 使用CSS美化超链接 学习重点 认识超链接 熟悉伪类 定义超链接样式 能够灵活设计符合页面风格的链接样式 7.1 定义超链接 在HTML5中建立超链接需要两个要素：设置为超链接的网页元素和超链接指向的目标地址。 7.1.1 URL格式 URL（Uniform Resource Locator，统一资源定位器）用语指定网上资源的位置和方式。通常由三部分...
超链接背景颜色变换
LIU_laolao的专栏
12-09 3385
注意1：要想超链接的一行背景颜色都改变，需要将a{display:block;} 问题2：怎么点击超链接后背景颜色改变，鼠标移走后继续保持？
用CSS怎样实现鼠标移上去背景颜色变色 onmouseover、onmouseout
z . s . j
07-25 3万+
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 table { border-collapse:collapse; } td { border:#000 solid 1px; }
如何用CSS控制超链接字体样式
乐吾天
08-11 3942
先一个例子，比如说下面这段代码： 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;}其效果是：未
使用CSS设置超链接
Xie_xie_ni_1的博客
09-06 638
设置伪类的顺序
Html设置超链接文字颜色
为了梦，爱一生
12-22 3万+
为了突出超链接，超链接文字通常采用与其他文字不同的颜色，超链接文字的下端还会加一条横线。网页的超链接文字有默认颜色，在默认情况下，浏览器以蓝色作为超链接文字的颜色，访问过的文字则颜色变成暗红色。在标记中也可以自定义这些颜色。 基本语法： 它对网页中所有未单独设置的元素起作用。 使用alink可以设置鼠标单击超链接时的颜色 基本语法： 使用vlink可以设置
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值