关于CSS 中a和a:hover起到什么作用？

html-css012

关于CSS 中a和a:hover起到什么作用？,第1张

a的作用是链接，点击<a></a>之间的内容，页面会跳转到链接的地址。直接设置它的颜色，比如，例子中a{color:#000}，意思是<a></a>之间的内容显示为黑色，如果不设置的话，浏览器默认的a链接的颜色是蓝色；

a:hover属于css，它设置了当鼠标悬浮在链接内容之上时，链接内容的样式，比如，例子中a:hover{ color:#F00}，它设置了当鼠标悬浮在该链接内容上时，链接内容变成红色。

扩展资料：

总结几个a的伪类：

a:link 英文link就是链接的意思，代表当一段文本为链接时的属性。

a:visited 英文visited就是访问过的意思，代表这段文本被点击之后的属性。

a:hover 英文hover就是悬停的意思，代表鼠标指针放在这个链接上时的属性。

a:active 英文active就是有效的、快速的意思，代表鼠标按下时一瞬间的属性。

一般最常用的方法是a {CSS属性} a后面什么也没有，代表一次定义这四个属性，然后根据需要再定义其中某个属性就可以了，最常用的是a:hover {CSS属性}

参考资料：百度百科-CSS

按钮自适应原理是利用a标签和i标签各自一个背景组合成为按钮，达到自适应，具体实现css样式及html结构如下，感兴趣的朋友可以参考下

原理：利用a标签和i标签各自一个背景组合成为按钮，达到自适应。

复制代码

代码如下:

<!DOCTYPE

html>

<html>

<head>

<meta

charset="UTF-8">

<style

type="text/css">

.btn

a{text-decoration:none}

.btn{display:

inline-block

background:

url(s_btn.png)

no-repeat

0

0

height:

22px

line-height:

22px

color:

#666

vertical-align:top}

.btn

i{display:blockfont-style:

normal

font-size:

12px

padding:

0

10px

background:url(s_btn.png)

no-repeat

right

-22px

}

.btn:hover{text-decoration:

nonecolor:#4c8136background-position:

0

-44px}

.btn:hover

i{background-position:

right

-66px}

.btn:active{background-position:

0

-88px}

.btn:active

i{background-position:

right

-110px}

.btn_disabled,

.btn_disabled:hover{background:

url(../img/s_btn.png)

no-repeat

0

-132pxcursor:

default}

.btn_disabled

i,

.btn_disabled:hover

i,

.s_btn_disabled:active

i{background-position:

right

-154pxcolor:#999}

</style>

</head>

<body>

<a

href="#"

class="btn">

<i>这是按钮</i>

</a>

<a

href="#"

class="btn">

<i>按钮</i>

</a>

</body>

</html>

效果：

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：a:hover{color: black}。

3、浏览器运行index.html页面，此时a标签点击时的背景色成功被去掉了。