CSS之——伪类选择器设置超链接样式和创建按钮式超链接（学习笔记）

Love The Way You Lie 2022-05-19 09:52 441阅读 0赞

### **一、使用CSS伪类别来设置超链接样式** ###

链接的四种状态：

a:link             普通的，未访问的链接

a:visited:       用户已访问的链接

a:hover         鼠标指针位于链接的上方

a:active:        链接被点击的时候

### **二、创建按钮式超链接** ###

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>使用CSS伪类来设置超链接样式</title>
    <style type="text/css">
    body {
    	margin: 20px;
    }
    a {
    	font-family:Arial;
    	margin:5px;
    }
    a:link,a:visited{
    	color: #A62020;
    	padding: 4px 10px;
    	background-color: #DDD;
    	text-decoration: none;
    	border-top: 1px solid #EEE;
    	border-left:1px solid #EEE;
    	border-bottom: 1px solid #717171;
    	border-right:1px  solid #717171;
    }
    a:hover{
    	color:#821818;
    	padding: 5px 8px 3px 12px;
    	border-top: 1px solid #717171;
    	border-left: 1px solid #717171;
    	border-bottom: 1px solid #EEE;
    	border-right:1px solid #EEE;
    }
    </style>
    </head>
    <body>
    <a href="http://www.baidu.com">Java</a>
    <a href="http://www.baidu.com">Php</a>
    <a href="http://www.baidu.com">.Net</a>
    </body>
    </html>

![70][]

![70 1][]

[70]: /images/20220519/2104e5935c9942ea96cf800e5af1eb46.png
[70 1]: /images/20220519/853feb9d36344d8eaaf669f14b6fa6c1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，441人围观）

还没有评论，来说两句吧...

相关阅读

相关 C# 如何给Word文档添加超链接及设置超链接的样式

在Word文档中我们经常可以看到很多超链接，其中最常见的是文本超链接，其次是图片超链接，通过点击这些超链接，我们可以快速地从当前文档跳转到指定的网站或打开指定的外部文件，非常方

秒速五厘米/ 2023年10月17日 16:59/ 0 赞/ 71 阅读

相关超链接

1、图片链接和文字连接 <!DOCTYPE html> <html> <head> <meta charse

小鱼儿/ 2023年08月17日 16:10/ 0 赞/ 67 阅读

相关超链接的内部链接和外部链接

超链接可以分为内部链接和外部链接两种。内部链接是指网站内部文件之间的链接，而外部链接是指网站内的文件链接到站点内容外的文件。代码如下： ![在这里插入图片描述][wat

妖狐艹你老母/ 2022年12月11日 13:36/ 0 赞/ 218 阅读

相关 bootstrap3 超链接_BootStrap 超链接变按钮的实现方法

BootStrap 超链接变按钮的实现方法 2019-01-01 编程之家收集整理的这篇文章主要介绍了BootStrap 超链接变按钮的实现方法，编程之家小编觉得挺不错的，

约定不等于承诺〃/ 2022年10月24日 05:58/ 0 赞/ 287 阅读

相关 HTML之超链接

HTML文本之所以被称为超文本，就是因为它具有普通文本所不具有的超链接功能。我们在浏览HTML文档时，可以通过点击关键字（一个超链接），来跳转页面。要让超链接能够正常工作，

分手后的思念是犯贱/ 2022年06月04日 09:11/ 0 赞/ 250 阅读

相关 CSS复习之用用 CSS 设置超链接样式

今日目录 1、使用 CSS 伪类别来设置超链接样式 2、创建按钮式超链接一、使用 CSS 伪类别来设置超链接样式

待我称王封你为后i/ 2022年05月25日 10:24/ 0 赞/ 306 阅读

相关 CSS之——伪类选择器设置超链接样式和创建按钮式超链接（学习笔记）

一、使用CSS伪类别来设置超链接样式链接的四种状态： a:link 普通的，未访问的链接 a:visited: 用户已访问的链接

Love The Way You Lie/ 2022年05月19日 09:52/ 0 赞/ 442 阅读

相关 CSS改变超链接字体样式

一应用网站中会有多种超链接，当我们将鼠标移动到某一超链接上时，超链接就会以不同的字体样式显示。例如超链接的字体样式显示为斜体、粗体、下划线、删除线或粗斜体等。

绝地灬酷狼/ 2022年05月12日 00:18/ 0 赞/ 352 阅读

相关 CSS链接样式设置

<a herf= ""> 这是第一个链接</a> <a herf= ""> 这是第二个链接</a> a\{ color: yellow; \}

朱雀/ 2022年04月03日 12:18/ 0 赞/ 291 阅读

相关 HTML示例02---插入超链接以及超链接颜色设置

这里主要讲了下超链接在不同时刻时候的颜色设置，包括：未访问的链接、已访问的链接、鼠标移动到链接上时的颜色设置代码如下： <!DOCTYPE html> <

浅浅的花香味﹌/ 2022年03月19日 10:56/ 0 赞/ 346 阅读