Web标准:五、超链接伪类

Web标准:五、超链接伪类

知识点:

1.链接的四种样式

2.将链接转换为块状

3.用css制作按钮

4.首字下沉

1)链接的四种样式

超链接有四个伪类,分别是:

a:link 未访问的链接

a:visited 已访问的链接

a:hover 鼠标移动到链接上

a:active 选定的链接

之所以称之为伪类,也就是说他不是一个真实的类,正常的类是以点开始,后面跟一个名称,而它是a开始后面跟一个冒号,再跟个状态限定字符。

text-decoration在HTML语言中对文本进行修饰,例如加下划线等。

取值:

none:默认值,无装饰

link:闪烁

underline:下划线

line-through:贯穿线

overline:上划线

说明:四个伪类必须按照固定顺序写,否则有些不会生效,顺序按照L(link)OV(visited)E H(hover)A(active)TE原则。

2)将链接转换为块级元素

链接在默认状态下是内联元素,转换为块级元素后可以获得更大的点击区域,可以设置高度和宽度,将链接转换为块级元素,只需增加一个display:block的css的属性即可。

3)用css制作按钮

这里的用css制作按钮,即在将链接转换为块级元素的基础上,给块级元素增加一个背景图片,这里我是用的本地的两个图片。

4)首字下沉

首字下沉需要应用伪元素:first-letter

注意:IE6如果想兼容first-letter,需要在选择符与样式花括号之间留有空格,否则IE6不能实现。即first-letter和{}中间留有空格。

时间: 2024-10-09 17:22:07

Web标准:五、超链接伪类的相关文章

web标准(复习)--5 超链接伪类

今天我们开始学习超链接伪类,包含以下内容和知识点: 链接的四种样式 将链接转换为块状 用css制作按钮 首字下沉 一.超链接的四种样式 超链接可以说是网页发展史上一个伟大的发明,它使得许多页面相互链接从而构成一个网站.说到超链接,它涉及到一个新的概念:伪类,我们先看下超链接的四种样式: a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移

第五天 超链接伪类

http://www.aa25.cn/div_css/906.shtml 今天我们开始学习<十天学会web标准(div+css)>超链接伪类,包含以下内容和知识点: 链接的四种样式 将链接转换为块状 用css制作按钮 首字下沉 一.超链接的四种样式 本来计划这节课放到第九章中讲解,但下边的章节都涉及到了,所以提前来学习一下,上节课讲解的内容比较多,这节课就少讲些,只要理解了伪类,就轻松多了. 超链接可以说是网页发展史上一个伟大的发明,它使得许多页面相互链接从而构成一个网站.说到超链接,它涉及到

超链接伪类

伪类样式: 标签名:伪类名{声明} 如:a:hover{ color:#000000; text-decoration:underline; } 伪类名称: a:link 未单击访问时超链接样式 a:visited 单击访问后超链接样式 a:hover  鼠标悬浮其上的超链接样式 a:active  鼠标单击未释放的超链接样式 伪类顺序:a:link>a:visited>a:hover>a:active

关于超链接伪类的使用,:link,:visited,:hover

/* 伪类的基本用法*/ * { margin: 0px; padding: 0px; } /** * 默认情况的超链接 */ a:link, a:visited { text-decoration: none; font-size: 12px; color: #226; background: red; } /** * 当连接点击之后的效果,对于IE,不会自动继承a:link的效果, * 所以为了满足IE浏览器的效果,最好在a:link,a:visited */ a:visited { col

【从0到1学Web前端】CSS伪类和伪元素

1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 selector.class : pseudo-class {property: value} 如下面的一段代码: a.red : visited {color: #FF0000} <a class="red" href="css_syntax.asp">CSS Syn

web标准(复习)--6 html列表

今天我们开始学习html列表,包含以下内容和知识点: ul无序和ol有序列表 改变项目符号样式或用图片定义项目符号 横向图文列表 浮动后父容器高度自适应 IE6的双倍边距bug 一.ul无序和ol有序列表无序列表是web标准布局中最常用的样式,代码如下: <div id="layout"><ul><li><a title="第五天 超链接伪类" href="/div_css/906.shtml" targ

标准之路网站上一篇文章《十天学会web标准(div+css)》的营养精华

以下精华出自如下链接,“http://www.aa25.cn/special/10day/index.shtml”,<十天学会web标准(DIV+CSS)>. 这个内容不要删掉:“<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">”,删除它后可能引起某些

14_css伪类控制链接.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

1.博客背景 在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史 伪元素实际上在CSS1(CSS1