如何用CSS控制超链接字体样式?

如题所述

先一个例子,比如说下面这段代码:
<style type="text/css"
a:link {text-decoration:none;color:blue;}
a:hover {text-decoration:underline;color:red;}
a:active {text-decoration:none;color:yellow;}
a:visited {text-decoration:none;color:green;}</style其效果是:未被点击时超链接文字无下划线,显示为蓝色;当鼠标放在链接上时有下划线,链接文字显示为红色;当点击链接时,即链接被激活,链接无下划线,显示为黄色;当点击链接后,也就是链接已被访问过后,链接无下划线,显示为绿色。其中:
a:link 指正常的未被访问过的链接;
a:hover 指鼠标在链接上;
a:active 指正在点的链接;
a:visited 指已经访问过的链接。参数设置:
text-decoration是文字修饰效果的意思;none参数表示超链接文字不显示下划线;underline参数表示超链接的文字有下划线;如果是overline则给超链接文字加上划线;换成line-through则是给超链接文字加上删除线;blink则使文字在闪烁。
color:blue,color:red等是给链接文字加颜色。
还可以添加其他参数,如:
font-weight:bold给链接文字加粗;font-size:16pt设置链接文字字体大小;background:#ffd306给链接文字加背景颜色;font-style:italic链接文字倾斜;border-bottom:1px dashed #51bfe0给链接文字加虚线,其中1px是虚线的粗细度,数值越大越粗,dashed表示虚线,#51bfe0是虚线颜色,如果要给链接文字加虚线的话,就不用加下划线了。
例如下面这两段代码:
<style type="text/css"
a:hover {text-decoration:none;border-bottom:1px dashed red;}</style
其效果是当鼠标放在链接上的时候链接出现红色虚下划线。
<style type="text/css"
a:hover {text-decoration:underline;font-weight:bold;color:red;background:blue;font-style:italic;}</style
其效果就是当鼠标放在链接上的时候,链接有下划线,字体加粗,链接文字为红色,背景为蓝色,文字倾斜。
如果要去掉所有链接的下划线则可以用下面这段代码:
温馨提示:内容为网友见解,仅供参考
无其他回答

怎么用CSS来改变超链接文字的颜色,字体?
1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的标签中,输入css代码:a{font-family: 楷体;font-size: 20px;color: orange;}。3、浏览器运行index.html页面,此时用CSS成功改变了超链接的字体、大小、颜色。

css超链接字体颜色
css超链接字体颜色的方法如下:1、首先在菜单栏下的“格式”菜单中或在右键菜单中点击“幻灯片设计”,右侧会出现设计栏;2、再点“配色方案”对话窗,然后右下角有编辑配色方案,双击“自定义”选项卡中“强调文字和超级链接”左侧的颜色块;3、在“强调文字和超级链接颜色”对话框中选择适合的颜色;4...

css如何使html的超链接文字变粗
href="#"style="font-weight:bold">链接文字 只要给a 标签加上style="font-weight:bold"或者style="font-weight:bolder"都可以,也可以写成 链接文字

css控制某个div里的超链接的样式怎么设置?
div.classname a:visited{样式设置} div.classname a:hover{样式设置} div.classname a:active{样式设置}

CSS与DIV的问题,如何设置超文本链接的字体样式
在中间插入 a:link {color: #FF0000} \/* 未访问的链接 *\/a:visited {color: #00FF00} \/* 已访问的链接 *\/a:hover {color: #FF00FF} \/* 当有鼠标悬停在链接上 *\/a:active {color: #0000FF} \/* 被选择的链接 *\/.topr a{color:#000000;}.dh a{color:#666666;}比如...

Dreamweaver使用CSS规则设置超链接显示
一、使用CSS规则设置超链接的显示1. 打开文档,然后打开“CSS样式”面板。2. 在“CSS样式”面板中,点击右下角的“新建 CSS 规则”按钮,打开“新建 CSS 规则”对话框,如下图所示:在“选择器类型”中选择“复合内容(基于选择的内容)”项。在“选择器名称”中点击右边的下拉箭头,我们可以看到:a:...

CSS 怎样用css设置超链接字体的不同颜色
简单的写法:a{ color:#f00\/*颜色自定义*\/;font-family:"楷体";font-size:20px;}\/*未访问的链接,已访问的链接,点击激活链接*\/ a:hover{ color:#0f0\/*颜色自定义*\/}}\/ 鼠标在链接上 \/ 另一种方法 a:link{ color:#f00\/*颜色自定义*\/;font-family:"楷体";font-size:20px;} \/ 未...

如何改变超级链接默认的字体大小和颜色?
方法\/步骤 1、首先,鼠标左键双击Excel应用图标,打开Excel表格。2、此防范以下列数据为例,A1和A2单元格为具有超链接单元格。3、鼠标右键单击具有超链接的单元格,在这以以A1单元格为例。4、单击菜单栏”开始“选项卡,”样式“功能区中的展开菜单按钮。5、选择好样式之后,超链接的显示样式已经改变...

网页中当鼠标指向链接的字体时,字体自动变红并出现下划线是怎么做...
用css属性可以改变超链接样式: A:hover {BACKGROUND-COLOR: #ffccff; COLOR: #0080ff} (hover表示鼠标指示时,链接文字背景色为#ffccff;前景色为#0080ff) A:link {color:#000000;TEXT-DECORATION: none} (link表示未被访问时,链接颜色为黑色,链接无下划线.) A:visited {color:gray;TEXT-...

网页带有超级了连接的字体都变灰了!设什么颜色最终还是以灰色显示,等...
none;color: #00FF99; \/\/活动链接 } --> 如果想网页的中局部有超链接的字体样式的话,可以通过控制链接所在的DIV或者TD的Css来控制 参考资料:http:\/\/www.dgcaihong.com

相似回答