css怎么设置超链接样式(如何用CSS控制超链接字体样式【经典代码转载】)

本文目录
如何用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:1pxdashed#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控制某个div里的超链接的样式怎么设置
这样写就可以了(假设类为classname):
div.classname a{样式设置}
补充其他:
div.classname a:link{样式设置}
div.classname a:visited{样式设置}
div.classname a:hover{样式设置}
div.classname a:active{样式设置}

更多文章:
下载免费java(有什么无病毒、安全的网站可以免费下载java格式手机游戏,且是触屏全屏的)
2026年9月24日 18:00
php7连接mysql数据库操作(PHP7连接mysql数据库方法)
2025年12月29日 00:15
c语言终止程序(C语言~~~如何使程序中途结束、跳出~~~)
2025年6月5日 07:30
flex布局的兼容性(怎么用css使得input的输入框对齐,要写出代码,别百度其他的)
2026年7月27日 12:15
正则表达式支持库(怎样在aardio中使用正则表达式,用哪个函数)
2025年11月17日 05:30
腾讯云数据库管理工具(navicat导入mangodb几百万行传输中断)
2025年12月5日 03:30
java 线程安全(java中为什么说,String是线程安全的)
2026年5月1日 04:00
下载excel教程(windows家庭中文版的怎么下载excel教程)
2026年8月11日 20:15
delphi控制485(如何在delphi中使用海康威视的485口)
2026年9月4日 06:00
tengine windows(天龙八部报错是怎么回事啊 )
2026年2月14日 17:45
ctab化学名称?predictive与predictable的区别
2026年8月14日 15:30














