主要作用是给用HTML做的链接修改样式

主要包括:

1.超链接访问前(被点前)状态a:link

2.超链接访问后(被点后)状态a:visited

3.鼠标指向超链接时(放在上面)状态a:hover

4.点击超链接时的状态a:active

注意的是:顺序不能改变 简单记为L V H A

基本格式为:

<style type="text/css">
a:link
{
color:blue;
text-decoration:none;
}
a:visitd
{]
a:hover
{}
a:active
{}
</style>

例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>360标签</title> <link href="360小标签css表.css" rel="stylesheet" type="text/css" />
</head> <body>
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="8">
<tr align="center"><font size="+4" face="楷体">
<td><a href="http://www.autohome.com.cn">汽车之家</a></td>
<td><a href="http://zibo.bitauto.com">易 车 网</a></td>
<td><a href="http://www.pcauto.com.cn">太平洋汽车</a></td>
<td><a href="http://www.anjuke.com">安 居 客</a></td>
<td><a href="http://out.zhe800.com">折800</a></td>
<td><a href="http://www.suning.com"><font color="#00CC33">苏宁易购</a></font></td>
</tr>
<tr align="center"><font size="+4" face="楷体">
<td><a href="http://www.12306.cn">12306官网</a></td>
<td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新华</a></td>
<td><a href="http://www.ganji.com">赶 集 网</a></td>
<td><a href="http://union.dangdang.com">当 当 网</a></td>
<td><img src="360小图标/途牛.jpg" width="15" /><a href="http://www.tuniu.com">途牛旅游网</a></td>
<td><a href="http://www.baidu.com"><font color="#00CC33"><i><b>1号店</b></i></a>&nbsp;<a href="http://www.baidu.com"><img src="360小图标/抢福袋.jpg" width="40"/></a></td></font>
</tr>
<tr align="center"><font size="+4" face="楷体">
<td><a href="http://www.zhenai.com">真爱婚恋网</a></td>
<td><a href="http://www.moonbasa.com">梦 芭 莎</a></td>
<td><a href="http://www.baidu.com">亚 马 逊</a></td>
<td><a href="http://www.baidu.com">艺 龙 网</a></td>
<td><a href="http://www.baidu.com">去哪儿网</a></td>
<td><a href="http://www.baidu.com">美 丽 说</a></td></font>
</tr>
<tr align="center"><font size="+4" face="楷体">
<td><a href="http://www.baidu.com">美 团 网</a></td>
<td><a href="http://www.baidu.com">乐视视频</a></td>
<td><img src="360小图标/唯品会.jpg" width="15"/><a href="http://www.baidu.com">唯 品 会</a></td>
<td><a href="http://www.baidu.com"><font color="#CC6600">聚美优品</a></td></font>
<td><a href="http://www.baidu.com">搜 房 网</a></td>
<td><a href="http://www.baidu.com">蘑 菇 街</a></td></font>
</tr>
<tr align="center"><font size="+4" face="楷体">
<td><a href="http://www.baidu.com">猎 聘 网</a></td>
<td><a href="http://www.baidu.com">1 药 网</a></td>
<td><a href="http://www.baidu.com">陆金所理财</a></td>
<td><a href="http://www.baidu.com">六 间 房</a></td>
<td><a href="http://www.baidu.com">携程机票</a></td>
<td><a href="http://www.baidu.com">12306·抢票</a></td></font>
</tr>
</table> </body>
</html>

这是未修改样式的超链接(从来没点过的默认蓝色,点过之后默认紫色)

下面用样式表修改


@charset "utf-8";
/* CSS Document */


<style type="text/css">
*
{
margin:0px;
margin:0px;
}
a:link
{
color:#000;
text-decoration:none;}/*下划线*/
a:visited
{
color:#000;
text-decoration:none}
a:hover
{
color:#F00;
text-decoration:underline;}
a:active
{
color:#F60;
text-decoration:underline;}
</style>

 

效果为:

 

CSS样式表——超链接样式的更多相关文章

  1. css样式表:样式分类,选择器。样式属性,格式与布局

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  2. 8.20 css样式表:样式分类,选择器。样式属性,

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  3. 一起学HTML基础-CSS样式表常用样式属性

    样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...

  4. 【经验】在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序

    以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确. 给出我试的顺序,可能会对大 ...

  5. css 样式表 基础 样式

    1大小 width  宽度 height 高度 2 背景 background-color 背景色 background-image:url(图片位置) 背景图片 background-repeat: ...

  6. css form表单样式清除

    开发项目中表单常用的清楚样式: 1.改变placeholder默认字体颜色 ::-webkit-input-placeholder{color: #333;} :-moz-placeholder{co ...

  7. CSS样式表 选择器

    1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...

  8. 3月22日 html(三)css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...

  9. css样式表及属性

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

随机推荐

  1. iOS10 推送必看 UNNotificationContentExtension

    来源:徐不同(@2016徐小爷) 链接:http://www.jianshu.com/p/45933f5450a4 大伙久等啦~这绝对是最全最详细的 UNNotificationContentExte ...

  2. 【LeetCode】13. Roman to Integer (2 solutions)

    Roman to Integer Given a roman numeral, convert it to an integer. Input is guaranteed to be within t ...

  3. JQuery包装集size,length,index,slice,find,filter,is,children,next,nextAll,parent,parents,closest,siblings,add,end,andSelf的用法

    在使用Jquery包装集的知识之前首先要注意三个概念(当前包装集.新包装集.包装集内部元素)的区别. <!DOCTYPE html> <html xmlns="http:/ ...

  4. 重写lucene.net的分词器支持3.0.3.0版本

    lucene.net中每个分词器都是一个类,同时有一个辅助类,这个辅助类完成分词的大部分逻辑.分词类以Analyzer结尾,辅助类通常以Tokenizer结尾.分类词全部继承自Analyzer类,辅助 ...

  5. Kali 2.0最新国内源:阿里云,中科大

    版权声明:本文为博主原创文章,转载请注明来源. https://blog.csdn.net/liushulin183/article/details/51519628  刚刚要给kali装个中文输入法 ...

  6. 为anaconda的jupyter notebook设置初始化目录

    在使用jupyter进行编程时,初始化目录可能不是自己想要的目录,那么下面讲解修改成自己想要的目录. 1) 在命令行中输入jupyter notebook --generate-config,会产生一 ...

  7. 【转】Ubuntu VI基本用法

    转自:http://blog.sina.com.cn/s/blog_4f3b79d0010166ai.html 1.vi的基本概念 基本上vi可以分为三种状态,分别是命令模式(command mode ...

  8. Creating the Help Page in ASP.NET Web API

    Introduction In this article we will define the process of creating the help page in the ASP .NET We ...

  9. Oracle学习笔记之四,SQL语言入门

    1. SQL语言概述 1.1 SQL语言特点 集合性,SQL可以的高层的数据结构上进行工作,工作时不是单条地处理记录,而对数据进行成组的处理. 统一性,操作任务主要包括:查询数据:插入.修改和删除数据 ...

  10. 用rfkill命令管理蓝牙和wifi

    rfkill是一个内核级别的管理工具,可以打开和关闭设备的蓝牙和wifi. #列出所有可用设备rfkill list 输出如下:0: phy0: Wireless LAN    Soft blocke ...