`
BlogDown
  • 浏览: 212028 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

如何用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>

其效果就是当鼠标放在链接上的时候,链接有下划线,字体加粗,链接文字为红色,背景为蓝色,文字倾斜。

如果要去掉所有链接的下划线则可以用下面这段代码:

<style type="text/css">
a:link,a:hover,a:active,a:visited{text-decoration:none;}
</style>

分享到:
评论

相关推荐

    Css样式–字体样式和链接样式详解

    1.指定字体:font-family (1)实用通用字体系列: 复制代码代码如下:body {font-family: sans-serif;} (2)制定字体系列: 复制代码代码如下: h1 {font-family: Georgia, &lt;span xss=removed&gt;serif;} 在所有 ...

    精通CSS+DIV网页样式与布局视频教材

    1.2 使用CSS控制页面 1.2.1 行内样式 1.2.2 内嵌式 1.2.3 链接式 1.2.4 导入样式 1.2.5 各种方式的优先级问题 1.3 体验CSS 1.3.1 从零开始 1.3.2 加入CSS控制 1.3.3 控制图片 1.3.4 ...

    [ CSS-CSS3 ] 史上最全CSS样式一览表

    CSS样式一览表CSS样式CSS添加方法CSS选择器CSS样式(I) 文本CSS样式(II) 背景与超链接CSS样式(III) 列表与表格CSS布局与定位盒子模型(I) overflow和border盒子模型(II) padding和marginCSS定位机制 display、float和...

    Web前端开发基础:CSS控制图文混排.ppt

    --*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能使用CSS控制图文混排 能力目标 CSS选择器类型 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结 标签选择...

    HTML设置超链接字体颜色和点击后的字体颜色

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

    CSS网站布局实录 (第二版)PDF版

    4.5.1 应用字体样式 4.5.2 应用段落样式 4.6 图片样式设计 4.6.1 图片定位 4.6.2 图片剪切 4.6.3 图片替代文本 4.6.4 Flash替代文本 4.7 链接样式控制 4.7.1 链接控制 4.7.2 CSS按钮 4.7.3 图片翻转链接 4.7.4 面包...

    html超链接样式(四种不同状态)设置示例

    – 超链接文本字体设置–&gt; A { FONT-SIZE: 16px; FONT-FAMILY: 宋体 } &lt;!– 超链接正在连接的文本字体设置–&gt; A:link { COLOR: #0055bb; TEXT-DECORATION: none } &lt;!– 超链接访问过的文本字体设置–&gt; A:...

    前端-css-reset.css

    前端-css-reset.css,做web项目时可以参考使用的重置样式表,包含清空浏览器的默认样式、设置网页主体的背景颜色、外间距、内间距、行高、字体大小、字体家族、页面布局、背景颜色样式、颜色、设置超链接的样式、...

    css--实验报告.doc

    打开CSS样式面板双击新建的那个文件,单击确定按钮,,用相同的方法设 置BODAY的字体和方法。 4 、设计#header对象部分。包括logo#logo和导航#nav.网页logo部分是一个中间栏 固定,左右栏自适应的结构,并在...

    HTML5+CSS3+JavaScript网页设计8.zip

    第9章 CSS3美化表格和表单样式 第10章 CSS3美化图像 第11章 CSS3美化背景与边框 第12章 Java Script概述 第13章 Java Script语言基础 第14章 Java Script内置对象 第15章 Java Script对象编程 第16章 Java ...

    HTML_CSS学习笔记.docx

    1 ...1.1. HTML与CSS的关系 4 1.2. 标签 4 ...1.4. head标签 7 1.5. body标签 8 ...10. CSS3字体样式 29 11. CSS3文本样式 29 12. CSS3盒模型 29 13. CSS3布局模型 29 14. flex弹性盒模型 29 15. CSS3样式设置小技巧 29

    HTML5_CSS3_JavaScriptWYSJ(jb51.net).rar

    第9章 CSS3美化表格和表单样式 第10章 CSS3美化图像 第11章 CSS3美化背景与边框 第12章 Java Script概述 第13章 Java Script语言基础 第14章 Java Script内置对象 第15章 Java Script对象编程 第16章 Java ...

    自学web前端之CSS样式书写

    用html写出的网页内容,简单而有单一,不是很好看,如果要对网页布局进行修饰,就用到了css样式进行修饰,可以给特定的区域设置颜色、背景、字体、位置等等。那么怎么写css样式代码呢?一般我们进行布局修饰的时候会...

Global site tag (gtag.js) - Google Analytics