先一个例子,比如说下面这段代码:
<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>
分享到:
相关推荐
1.指定字体:font-family (1)实用通用字体系列: 复制代码代码如下:body {font-family: sans-serif;} (2)制定字体系列: 复制代码代码如下: h1 {font-family: Georgia, <span xss=removed>serif;} 在所有 ...
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样式一览表CSS样式CSS添加方法CSS选择器CSS样式(I) 文本CSS样式(II) 背景与超链接CSS样式(III) 列表与表格CSS布局与定位盒子模型(I) overflow和border盒子模型(II) padding和marginCSS定位机制 display、float和...
--*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能使用CSS控制图文混排 能力目标 CSS选择器类型 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结 标签选择...
定义链接样式 CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”。其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: :link :visited :hover :active 因为...
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 面包...
– 超链接文本字体设置–> A { FONT-SIZE: 16px; FONT-FAMILY: 宋体 } <!– 超链接正在连接的文本字体设置–> A:link { COLOR: #0055bb; TEXT-DECORATION: none } <!– 超链接访问过的文本字体设置–> A:...
前端-css-reset.css,做web项目时可以参考使用的重置样式表,包含清空浏览器的默认样式、设置网页主体的背景颜色、外间距、内间距、行高、字体大小、字体家族、页面布局、背景颜色样式、颜色、设置超链接的样式、...
打开CSS样式面板双击新建的那个文件,单击确定按钮,,用相同的方法设 置BODAY的字体和方法。 4 、设计#header对象部分。包括logo#logo和导航#nav.网页logo部分是一个中间栏 固定,左右栏自适应的结构,并在...
第9章 CSS3美化表格和表单样式 第10章 CSS3美化图像 第11章 CSS3美化背景与边框 第12章 Java Script概述 第13章 Java Script语言基础 第14章 Java Script内置对象 第15章 Java Script对象编程 第16章 Java ...
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
第9章 CSS3美化表格和表单样式 第10章 CSS3美化图像 第11章 CSS3美化背景与边框 第12章 Java Script概述 第13章 Java Script语言基础 第14章 Java Script内置对象 第15章 Java Script对象编程 第16章 Java ...
用html写出的网页内容,简单而有单一,不是很好看,如果要对网页布局进行修饰,就用到了css样式进行修饰,可以给特定的区域设置颜色、背景、字体、位置等等。那么怎么写css样式代码呢?一般我们进行布局修饰的时候会...