CSS Link(链接)
CSS Link(链接)
不同的链接可以有不同的样式。
一、链接样式
链接的样式,可以用任何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后面
二、常见的链接样式
根据上述链接的颜色变化的例子,看它是在什么状态。
让我们通过一些其他常见的方式转到链接样式:
1,文本修饰
text-decoration 属性主要用于删除链接中的下划线:
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
2,背景颜色
background-color 背景颜色属性指定链接背景色:
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
三、添加不同样式的超链接
为超链接增加不同样式,示例代码:
/*改变颜色*/
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;} /*改变字体大小*/
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;} /*改变背景颜色*/
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;} /*改变字体类型*/
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:Georgia, serif;} /*改变文字修饰*/
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
四、创建链接框
结合若干CSS属性显示为方框,示例代码:
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
效果:
CSS Link(链接)的更多相关文章
- css远距离链接
远距离链接主要运用了hover伪类,但是运用了两次 <!DOCTYPE html> <html lang="en"> <head> <me ...
- link链接外部样式表
一个完整的link标签: <link href="[css adress]" rel="stylesheet" type="text/css&q ...
- 【静态页面架构】CSS之链接和图像
CSS架构 一.链接: 链接元素:通过使用a元素的href属性设置跳转到指定页面地址 <style> a{ color: blue; text-decoration: none; } a: ...
- css中链接的4个状态 link、visited 、hover、active 顺序与设置
link 未点时链接色visited 已点过的链接色hover 光标放入链接上的色active 点击时的样式 顺序一定要按link.visited.hover.active来设置 ...
- css link import
link和@import的区别 页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import.外部引用CSS两种方式 ...
- 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 链接被激活时 默认的链 ...
- JavaScript HTML CSS外部链接
HTML文件 <!--<html> <head><link rel="stylesheet" type="text/css" ...
随机推荐
- 2D绘图引擎比较
这个问题很普遍.最近在研究这个问题,在网上搜了一些资料,再结合自己的经验,谈谈自己的一些想法. 一.双缓存能提高绘图效率吗? 网上有篇文章:绘图效率完整解决方案——三种手段提高GDI/GDI+绘图效率 ...
- Django学习笔记第十篇--实战练习六--发送邮件
一.发送邮件需要引入的包依赖文件(Django1.8 Python2.7) from django.core.mail import send_mail,send_mass_mail 其中send_m ...
- Eclipse常用快捷键(转载)
编辑相关快捷键 Eclipse的编辑功能非常强大,掌握了Eclipse快捷键功能,能够大大提高开发效率.Eclipse中有如下一些和编辑相关的快捷键. 1. [ALT+/] 此快捷键为用户编辑的好帮手 ...
- maven发布项目的snapshot到nexus
1.配置发布地址信息 <repositories> <repository> <id>nexus</id> <name>Local Repo ...
- java项目中初期常见的错误及解决方案
在做项目的初期,想必总会有各种奇奇葩葩的错误出现,本博文主要整理了博主在项目初期遇到的错误,希望能为大家减少犯这些错误 1.Env 名字写错了,图片中错误类型是名字没有发现的异常,因此需要检查后面报错 ...
- nginx.conf常用配置解析
一.全局配置 user username groupname 运行用户及用户组 worker_processes auto 启动进程,通常设置成和cpu数量相等的一个数值,默认为1.可以设置为auto ...
- 系列:每日一linux命令(转)
原文:http://www.cnblogs.com/peida/archive/2012/12/05/2803591.html 一. 文件目录操作命令: 1.每天一个linux命令(1):ls命令 2 ...
- 关于android:windowNoTitle不起作用的解决办法
今天测试一个新功能的时候,在styles.xml设置<item name="android:windowNoTitle">true</item>并没有生效, ...
- Spark源码分析之Sort-Based Shuffle读写流程
一 .概述 我们知道Spark Shuffle机制总共有三种: 1.未优化的Hash Shuffle:每一个ShuffleMapTask都会为每一个ReducerTask创建一个单独的文件,总的文件数 ...
- 页面优化——减少HTTP请求数
1.关于减少http请求数 关于减少http请求数,是前端开发性能优化的一个非常重要方面,所以在基本所有的优化原则里,都有这一条原则:减少http请求数. 先不考虑其他的,我们先考虑为什么减少http ...