HTML一个页面有多个a标签,怎么写才能让a标签显示不同的样式

html-css05

HTML一个页面有多个a标签,怎么写才能让a标签显示不同的样式,第1张

方法一、

给每一个a标签定义不同的ID值,举个栗子:

<!--定义以下样式:-->

<style type="text/css">

/*以 # 开头的样式为“ID”只可以用在一个标签上*/

#one{

color:red

}

#two{

color:orange

}

/*以 . 点点开头的样式为“类”可以用在多个标签上*/

.lei{

    /*颜色代码也可以*/

    color:#00cc33

}

</style>

<a id="one"  href="#" >第一个A标签</a>

<a id="two"  href="#" >第二个A标签</a>

<a class="lei"  href="#" >第三个A标签</a>

<a class="lei"  href="#" >第四个A标签</a>

<!--上面两个标签的样式是一样的--> 方法二:

直接在a标签中增加style样式:

<a style="color:redfont-size:18px" href="#" >第一个A标签</a>

<a style="color:#00cc33font-size:12px" href="#" >第二个A标签</a>

在HTML页面中总会遇到比较恼人的麻烦,比如a标签在浏览器下默认的下划线跟字体颜色:

1.在div标签中的a标签和在浏览器下的样式:

2.通过css查找到div里面的a标签,再通过text-decoration属性,去除默认下滑线,color属性添加颜色:

完工。

设置超链接点击过后的样式可以使用css中的visited进行设置,基本的使用方法如下:

:visited 选择器用于选取已被访问的链接,使用 :link 选择器对指向未被访问页面的链接设置样式, :hover 选择器用于设置鼠标指针浮动到链接上时的样式,:active 选择器用于设置点击链接时的样式。

工具原料:浏览器、编辑器

1、设置一个a标签的点击后的样式,点击后给标签添加黄色的背景,代码如下:

<!DOCTYPE html>

<html>

<head>

<style>

a:visited

{

background-color:yellow

}

</style>

</head>

<body>

<a href="#">test</a>

<a href="#">test2</a>

<p><b>注释:</b>:visited 选择器为已被访问的链接设置样式。</p>

</body>

</html>

2、运行代码,点击过后的超链接将会改变成css设置的样式。