CSS设置链接的样式

html-css03

CSS设置链接的样式,第1张

链接是从一个网页到另一个网页的连接,CSS可通过不同属性以各种不同方式来设置链接的样式。下面本篇文章就来给大家介绍一下CSS设置链接的样式的方法,希望对大家有所帮助。 在讨论CSS属性之前,先了解链接的状态是非常重要的。链接可以存在于不同的状态,并且可以使用伪类进行样式设置。下面给出了四种链接状态:● a:link =>这是一个正常的,未访问过的链接。 ● a:visited =>这是用户至少访问过一次的链接 ● a:hover =>当鼠标悬停在它上面时,这是一个链接 ● a:active =>这是一个刚刚点击的链接。语法:color_name可以采用任何格式,如颜色名称(green)、十六进制值(#5570f0)或RGB值-rgb(25, 255, 2)。还有另一个状态“a:focus”,用于在用户使用Tab键浏览链接时进行聚焦。链接的默认值:● 默认情况下,创建的链接带有下划线。 ● 当鼠标悬停在链接上方时,它会变为手形图标。 ● 正常/未访问的链接为蓝色。 ● 访问过的链接有紫色。 ● 活动链接为红色。 ● 链接聚焦时,它周围有一个轮廓。 例: 效果图:CSS如何设置链接的样式?下面是链接的一些基本CSS属性: ● color属性 ● font-family属性 ● text-decoration属性 ● background-color属性1、color属性: 此CSS属性用于更改链接文本的颜色。 语法: 例: 效果图:2、font-family属性 :此属性用于使用font-family属性更改链接的字体类型。 语法:3、text-decoration属性: 此属性主要用于向链接删除或添加下划线等修饰。 语法: 例: 效果图:4、background-color属性 :此属性用于设置链接的背景颜色。 语法: 例:使用以下css属性 效果图: 更多 web前端 知识,请查阅 HTML中文网 !!

给每个a

标签

一个

class类

.然后分别给每个累设置不同的链接颜色,就可以了。

答案补充

<style

type="text/css">

a.a1

{

color:#f00}

a.a1:hover

{

color:#0f0}

a.a2

{

color:#00f}

a.a2:hover

{

color:#ff0}

我写了a1

跟a1

其他两个自己知道怎么定义了吧..

<a

href="#"

class="a1">不同链接颜色</a>

<a

href="#"

class="a2">不同链接颜色</a>

<a

href="#"

class="a3">不同链接颜色</a>

<a

href="#"

class="a3">不同链接颜色</a>

答案补充

<style

type="text/css">

a.a1

{

color:#f00}

a.a1:hover

{

color:#0f0}

a.a2

{

color:#00f}

a.a2:hover

{

color:#ff0}

a.a3

{

color:#f00}

a.a31:hover

{

color:#0f0}

a.a4

{

color:#00f}

a.a4:hover

{

color:#ff0}

</style>

<a

href="#"

class="a1">不同链接颜色</a>

<a

href="#"

class="a2">不同链接颜色</a>

<a

href="#"

class="a3">不同链接颜色</a>

<a

href="#"

class="a3">不同链接颜色</a>

答案补充

a1

到a4

四个不同的类的链接颜色你改改就可以了..我只是给代码例子..

问题一:PPT中怎么修改加了超级链接的字体颜色? 有时,需要在PPT中更改超级链接颜色。那么如何在PPT中更改超级链接颜色呢?本文就来介绍一下在PPT中更改超级链接颜色的方法。

首先在菜单栏下的“格式”菜单中或在右键菜单中点击“幻灯片设计”,右侧会出现设计栏,再点“配色方案”对话窗,然后右下角有编辑配色方案,双击“自定义”选项卡中“强调文字和超级链接”左侧的颜色块,在“强调文字和超级链接颜色”对话框中选择适合的颜色;同样双击“强调文字和尾随超级链接”的颜色即可修改已访问超级链接的颜色。设置完毕后,点击“应用”即可。

这样,超级链接的颜色时就改为设置的颜色了。

问题二:网页怎样设置超链接颜色的 用CSS要方便些,淡然纯html也可以实现,不过需要用其他标签包起来

链接文字内容

问题三:html中如何让超级连接的颜色改变 a {text-decoration:nonecolor:#000000font-size:14px} 初始状态

a:hover {text-decoration:nonecolor:#ff0000font-size:14px}激发状态

分析:

text-decoration:none 没有下划线.

color 字体颜色.

font-size 字体大小(可用px.pt 等单位表示)

background-color 字体的背影颜色。

链接文字的变化,就是初始状态和激发状态的颜色变化。

将如下的代码,插入<HEAD></HEAD>就可以啦

a {text-decoration:nonecolor:#000000font-size:14px}

a:hover {text-decoration:nonecolor:#ff0000font-size:14px}

问题四:怎样将div下所有的超链接的颜色设置成红色,采用css? ]@]@]

@ one

one

css部分

.lianjie a{ color:redtext-decoration:none ;} 你试试吧

问题五:怎么设置html中的超链接颜色 20分 你在和之间加上

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

body里面的link=red vlink=blue alink=black删掉

问题六:dreamweaver中如何设置单个超链接的颜色? a.a01:link,a.a01:visited{font-size:12pxcolor:#ff0000}

a.a01:hover{color:#ffff00}

就是单独再给它设置一个样式,给引用一下就OK了,没有解决可以Hi我

问题七:html中如何让超级连接的颜色改变 html语言不用修改 还是直接给文字加链接

你可以 在css样式中写

a{ color:#333/*无链接时颜色*/ }

a:hover{ color:#F00/*鼠标经过链接时颜色*/}

a:active{ color:#30F/*鼠标点击链接时颜色*/}

比如:css中写

a{ color:#333text-decoration:none}

a:hover{ color:#F00text-decoration:underline}

a:active{ color:#30F}

出来的效果就是 鼠标未经过时 黑色 滑过时 红色 点击时蓝色

问题八:HTML中怎么设置超链接字体颜色和点击后的字体颜色 dreamweaver.abang/od/divcss/a/css-link

这里比较全面

定义链接样式

CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”。其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是:

:link

:visited

:hover

:active

因为我们要定义链接样式,所以其中必不可少的就是超级链接中的锚标签--a,锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法,它们的写法如下:

a:link,定义正常链接的样式;

a:visited,定义已访问过链接的样式;

a:hover,定义鼠标悬浮在链接上时的样式;

a:active,定义鼠标点击链接时的样式。

示例:

a:link {

color:#FF0000

text-decoration:underline

}

a:visited {

color:#00FF00

text-decoration:none

}

a:hover {

color:#000000

text-decoration:none

}

a:active {

color:#FFFFFF

text-decoration:none

}

上面示例中定义的链接颜色是红色,访问过后的链接是绿色,鼠标悬浮在链接上时是黑色,点击时的颜色是白色。

如果正常链接和已访问过的链接样式相同,鼠标悬浮和点击时的样式相同,也可以将它们合并起来定义:

a:link,

a:visited {

color:#FF0000

text-decoration:underline

}

a:hover,

a:active {

color:#000000

text-decoration:none

}

链接定义的顺序

没有规矩不成方圆,虽然链接定义写好了,但它也是有规则的,如果这四项的书写顺序稍有差错,链接的效果可能就没有了,所以每次定义链接样式时务必确认定义的顺序,link--visited--hover-active,也就是我们常说到的LoVe HAte原则(大写字母就是它们的首字母)。

定义局部链接样式

在CSS中写上a:link{}这样的定义会使整个页面的链接样式改变,但有些局部链接需要特殊化,这个问题也不难解决,只要在链接样式定义的前面加上指定的id或class就可以了。

示例:

#sidebar a:link,

#sidebar a:visiteid {

color:#FF0000

text-decoration:none

}

#sidebar a:hover,

#sidebar a:active {

color:#000000

text-decoration:underline

}

调......>>

问题九:网页中不同超链接文字如何设置不同的颜色? 设置不同链接的文字颜色,示例如下:

设置不同链接的文字颜色</title>a{text-decoration:none}a.a1{color:#333}a.a1:hover{color:#f00}a.a2{color:#00f}a.a2:hover{color:#fc0} TAB1 TAB2 希望能帮到你,有问题随时问我