如何用CSS工具为链接设置样式

 时间:2026-02-12 05:42:57

1、链接样式。对于链接来说,我们可以为这些链接设置不同的样式。

普通的链接样式:

a:link {color:#FF0000;}

访问过的链接样式:

a:visited {color:#00FF00;}

如何用CSS工具为链接设置样式

2、链接样式互动。在实际的使用当中,我们可以让链接与鼠标互动起来。

a:hover {color:#FF00FF;}

当鼠标移动到链接上面的时候,这个链接样式就有了改变。

a:active {color:#0000FF;}

这是链接被点击了之后的新样式。

如何用CSS工具为链接设置样式

3、更多链接样式。我们对于链接在点击前后的样式的改变,不仅仅局限于颜色,它也可以在文本上作一些变化,比如下划线。

a:visited {text-decoration:none;} 

a:hover {text-decoration:underline;}

如何用CSS工具为链接设置样式

4、链接在点击后它的背景色发生变化。

a:visited {background-color:#FFFF85;} 

a:hover {background-color:#FF704D;}

如何用CSS工具为链接设置样式

5、创建复杂链接框。我们的网页上的链接有时是以一个漂亮 的链接框的形式出现。我们可以详细的定义一下。字体、形状、外框、边距、对齐

a:link,a:visited

{

display:block;

font-weight:bold;

font-size:14px;

font-family:Verdana, Arial, Helvetica, sans-serif;

color:#FFFFFF;

background-color:#98bf21;

width:120px;

text-align:center;

padding:4px;

text-decoration:none;

}

如何用CSS工具为链接设置样式

6、一个详细的创建链接框的style 流程。

<style>

a:link,a:visited

{

display:block;

font-weight:bold;

font-size:14px;

font-family:Verdana, Arial, Helvetica, sans-serif;

color:#FFFFFF;

background-color:#98bf21;

width:120px;

text-align:center;

padding:4px;

text-decoration:none;

}

a:hover,a:active

{

background-color:#7A991A;

}

</style>

</head>

<body>

<a href="/index.html" target="_blank">W3School</a>

</body>

如何用CSS工具为链接设置样式

  • asp如何设置超链接只能点一下
  • 梦幻西游手游怎样运镖
  • 运动员应该怎样合理饮食
  • 怎样培养员工责任心
  • 今年关于教育方面有什么新的政策?
  • 热门搜索
    冬天旅游好去处 旅游法解读 昆明旅游景点有哪些 云南旅游局官方网站 台北旅游景点 曼谷芭提雅旅游攻略 深圳市旅游景点大全 韩城旅游景点大全 山西省旅游景点 番禺旅游景点大全