CSS设置链接的样式

html-css033

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中文网 !!

在当今的网页制作中,几乎所有漂亮的网页都用了CSS。 CSS是 Cascading Style Sheet的缩写,有些书上把它译为 “层叠样式表”。有了CSS的控制,我们的网页便会给人一种赏心悦目、工工整整的感觉,同时字体的色彩变化也使主页变得更加生动活泼。 一、看下面的样式:

a:link { text-decoration: none} //a:link 指正常的未被访问过的链接

a:active { text-decoration: none } //a:active 指点击链接的瞬间出现的链接情况

a:visited { text-decoration: none } //a:visited 指已经访问过的链接

a:hover { text-decoration: none} //a:hover 指鼠标放上去链接出现的情况

hover是一个经常会被混淆的属性,一般大家都认为链接是三个属性:link,active,visited,而且一般的网页制作软件里也只有这三个设置,但是hover其实也是一个非常重要的属性,它还可以在链接上加上背景色(BACKGROUND:#ccffcc),其它的设置与上面三个一样,所以大家现在可以记住,链接上可以做四个属性设置,分别是:link,active,visited,hovertext-decoration是文字修饰效果的意思,none参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline就表示有下划线,换成overline则给超连文字加上划线,换成 line-through给超连文字加上删除线。还有一个是blink参数,顾名思义是闪烁效果,但是他要在NetScape浏览器上才能显示。

二、使粗体文字加上删除线。粗体文字使用的代码是:B { text-decoration: line-through }使粗体文字中所有的字母大写。使用代码: B { text-transform: uppercase }(这个在NS中才显示出来,IE没有相应效果显示)产生既大写,又有颜色,又有删除线的效果的代码是:b { text-decoration: line-throughtext-transform: uppercasecolor: #66FFFF} 。另外,用lowercase使所有字母小写显示,capitalize 使每个单词的首字母大写显示。

三、产生链接变色效果:经过在对链接的几个属性进行颜色设置后,可以使具有link,active,visited属性的链接显示不同的颜色,但是却不会产生鼠标覆盖变色效果。

a:link { text-decoration: none color: green } //正常链接文字显示绿色

a:active { text-decoration: none color: yellow } //点击瞬间的链接显示黄色

a:visited { text-decoration: none color: red } //已经访问过的链接显示红色要想产生鼠标放上去产生变色效果,就要用到另一个属性了,这就是 hover。如:a:hover { text-decoration: none color: yellow;background:white} 表示鼠标移动到链接文字上时,文字修饰风格为“无”,同时链接文字显示黄色,链接文字的底色显示为白色。四、看一下下面链接设置的总体运用情况:

a:link { text-decoration: none color: blue font-size: 9pt }

a:active { text-decoration: underline color: yellowfont-size: 10pt }

a:visited { text-decoration: none color: redfont-size: 10.5pt }

a:hover { text-decoration: underlinecolor: green font-size: 11ptbackground:white}上面这样设置含义为:

a:link 链接文字没有下划线,蓝色(blue)显示,字为9pt大小;

a:active鼠标点击链接的瞬间文字再现下划线,颜色变成黄色(yellow),并且文字大小变成10pt;

a:visited 访问过的链接没有下划线,文字变成红色(red),同时文字大小变成10.5pt;

a:hover鼠标放到链接上时出现下划线,颜色为绿色(green),字符大小11pt,同时文字上出现一个白色(white)的背景区域。