分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

css链接link

发布时间:2023-09-06 02:28责任编辑:蔡小小关键词:暂无标签

链接可以使用任何css属性,包括字体、颜色、背景等等、

链接有四个状态,可在四个状态时设置不同的属性

a:link - 正常,未访问过的链接

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

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

当为链接的不同状态设置样式时,需要遵循a:hover 必须位于a:link 和a:visited之后,a:active 必须位于 a:hover 之后

例如编辑一个如下的html文件

<!DOCTYPE html><html> ???<head> ???<meta charset="utf-8"> ????<title>菜鸟教程(runoob.com)</title> ????<style> ???????a:link {color:red;} ?????/* 未访问链接*/ ???????a:visited {color:green;background-color:gray} ?/* 已访问链接 */ ???????a:hover {color:pink;font-size:20px} ?/* 鼠标移动到链接上 */ ???????a:active {color:yellow;} ?/* 鼠标点击时 */ ???</style> ???</head> ???<body> ???????<p><b><a href="http://www.baidu.com" target="_blank">这是一个链接</a></b></p> ???????<p><b>注意:</b> a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。</p> ???????<p><b>注意:</b> a:active 必须在 a:hover 之后。</p> ???</body></html>

初次点开时显示如下,将鼠标放在链接上显示粉色,并且字体变大;点击时显示黄色;点击之后显示绿色,并且背景为灰色

链接还可以使用text-decoration:none来设置去掉链接的下划线

css链接link

原文地址:https://www.cnblogs.com/Forever77/p/10204396.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved