CSS:CSS 链接
ylbtech-CSS:CSS 链接 |
1.返回顶部 |
CSS 链接
不同的链接可以有不同的样式。
链接样式
链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。
特别的链接,可以有不同的样式,这取决于他们是什么状态。
这四个链接状态是:
- a:link - 正常,未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
实例
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
当设置为若干链路状态的样式,也有一些顺序规则:
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
常见的链接样式
根据上述链接的颜色变化的例子,看它是在什么状态。
让我们通过一些其他常见的方式转到链接样式:
文本修饰
text-decoration 属性主要用于删除链接中的下划线:
实例
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
背景颜色
背景颜色属性指定链接背景色:
实例
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
更多实例
添加不同样式的超链接
这个例子演示了如何为超链接添加其他样式。
高级 - 创建链接框
这个例子演示了一个更高级的例子,我们结合若干CSS属性显示为方框。
2.返回顶部 |
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
6.返回顶部 |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
CSS:CSS 链接的更多相关文章
- css远距离链接
远距离链接主要运用了hover伪类,但是运用了两次 <!DOCTYPE html> <html lang="en"> <head> <me ...
- Bulma CSS - CSS类
Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...
- Nginx下css的链接问题
放在 Nginx 下的网页代码,在链接外部 css 文件时,可能出现没有链接成功的问题.需要在 nginx.conf 里的 http 下添加一行. http { include mime.types;
- CSS中链接文本为图片时的问题(塌陷、对应的图片建立倒角的问题)
我在做Javascript DOM编程艺术的时候,在12章自己做练习时遇到了一个问题,<a>的内容<img>从<a>的盒子中溢出.代码如下: <a href= ...
- CSS之链接
改变链接样式 当设置为若干链路状态的样式,也有一些顺序规则: a:hover 必须跟在 a:link 和 a:visited后面 a:active 必须跟在 a:hover后面 <!DOCTYP ...
- 三、CSS样式——链接
CSS链接的四种状态: a:link ——普通的.未被访问的链接 a:visited ——用户已访问的链接 a:hover ——鼠标指针位于链接的上方 a:active ——链接背点击的时刻 常见的链 ...
- CSS基础-链接
链接的状态 link 没有访问过的 visited 访问过的 hover 用户鼠标刚好停留在这个链接上时 focus 通过TAB键或者编程方法将一个链接选中时 active 链接被激活时 默认的链 ...
- 【静态页面架构】CSS之链接和图像
CSS架构 一.链接: 链接元素:通过使用a元素的href属性设置跳转到指定页面地址 <style> a{ color: blue; text-decoration: none; } a: ...
- JavaScript HTML CSS外部链接
HTML文件 <!--<html> <head><link rel="stylesheet" type="text/css" ...
- CSS去除链接虚线(兼容IE6、IE7)
在css里加入以下代码: a{ hide-focus: expression( this.hideFocus=true ); outline: none;}
随机推荐
- dotnet core项目的nuget存储路径
Where's the package location in aspnet core For project.json the nuget directory is in the user prof ...
- crontab定时执行datax
记录下使用crontab,datax定时同步数据遇到的问题. 1.开始使用如下配置,死活不执行.网上说crontab环境便利的问题,设置了也没反应. [root@hxjk_test_mysql_red ...
- ubuntu安装完成后需要做的事情
1.删除libreoffice libreoffice虽然是开源的,但是Java写出来的office执行效率实在不敢恭维,装完系统后果断删掉 [html] view plain copy sudo a ...
- Vue实现无痕刷新
一.什么是无痕刷新 在不刷新浏览器的情况下,实现页面的刷新. 传统的刷新页面方式 window.location.reload()原生 js 提供的方法 this.$router.go(0)vue 路 ...
- jmeter 响应超时时间设置 压力增大,不能正常退出全部线程
当压力增大会出现connect timeout error 压力增大,不能正常退出全部线程: 解决办法:http request default--advance--timeouts 如填写1,表示大 ...
- kafka安装指导
本篇博客主要讲解在虚拟机安装之后,从如下五个方面进行讲解kafka的安装过程. (1)如何配置虚拟机网络 (2)如何安装JDK (3)如何安装zookeeper (4)如何安装kafka (5)kaf ...
- 33-python基础-python3-列表插入元素-insert()方法-append()方法-extend()方法
1-insert()方法 insert()方法可以在列表任意下标处插入一个值. insert()方法的第一个参数是新值的下标,第二个参数是要插入的新值. 2-append()方法 调用 append( ...
- Spring学习笔记(8)——依赖注入
spring依赖注入使用构造器注入使用属性setter方法注入使用Field注入(用于注解方式) 注入依赖对象可以采用手工装配或自动装配,在实际应用中建议使用手工装配,因为自动装配会产生未知情况,开发 ...
- 七牛云关联Windows图床
1. 注册七牛云 七牛云 地址,需要在这里进行注册 2.完成实名认证 需要上传身份证的正反面以及支付宝做一下认证即可. 首先进入个人中心 然后进行实名认证 由于我已经认证过了,所以显示认证完成,未认证 ...
- idae父子项目Test执行报Result Maps collection already contains value for xxx
现象:同一个springmvc工程使用eclipse和idea用Tomcat启动都没问题,但是如果走单元测试使用到了@ContextConfiguration这个spring的上下文注解idea出问题 ...