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

Love The Way You Lie 2022-05-19 09:52 562阅读 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 条评论，562人围观）

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

相关阅读

相关超链接

基础知识定义：超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的页面或者当前页面中的某个部分。语法： `<a href

怼烎@/ 2023年10月18日 21:04/ 0 赞/ 172 阅读

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

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

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

相关复合选择器-链接伪类选择器（HTML、CSS）

复合选择器-链接伪类选择器（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

谁借莪１个温暖的怀抱￠/ 2023年10月03日 12:49/ 0 赞/ 98 阅读

相关超链接

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

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

相关 markdown设置超链接

形式 [链接文字](链接网址 "标题") 例子 [百度](https://www.baidu.com/) [百度][Link 1] [Lin

今天药忘吃喽~/ 2023年05月31日 07:30/ 0 赞/ 120 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 CSS链接样式设置

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

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