CSS样式表——超链接样式

最新推荐文章于 2022-06-28 14:27:16 发布

weixin_33739523

最新推荐文章于 2022-06-28 14:27:16 发布

阅读量191

点赞数

文章标签： xhtml

主要作用是给用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>

View Code

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

下面用样式表修改

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

效果为：

weixin_33739523

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式表——超链接样式

主要作用是给用HTML做的链接修改样式主要包括：1.超链接访问前（被点前）状态a:link2.超链接访问后（被点后）状态a:visited3.鼠标指向超链接时（放在上面）状态a:hover4.点击超链接时的状态a:active注意的是：顺序不能改变简单记为L V H A基本格式为:&lt;style type="text/css"&gt;a:link{...
复制链接

扫一扫