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-Type" content="text/html; charset=gb2312" />

<title>CSS伪类控制链接</title>

<style type="text/css">

a:link{color:black; text-decoration:underline;}

a:visited{color:red; text-decoration:line-through;}

a:hover{color:blue; text-decoration:overline;}

a:active{color:green; text-decoration:blink}

a.web:visited{ color:gold;}/*伪类与 CSS 类配合使用*/

input{

height:30px;

width:300px;

border:2px solid gold;

vertical-align:middle;/*设置输入框外面的文本在输入框外部的中间位置*/

line-height:30px;/*行高设置成和height值一样时,文字就在垂直方向上就中间显示*/

}

input:focus{background:#CCFFFF;}/*输入框里面变成了焦点ie6/7不支持*/

</style>

</head>

<body>

<a href="http://www.baidu.com" class="web">网页设计</a>

<a href="http://www.baidu.com">平面设计</a>

<a href="http://www.baidu.com">动漫设计</a>

<a href="http://www.baidu.com">java设计</a>

<a href="http://www.baidu.com">php设计</a>

<a href="http://www.baidu.com">ios设计</a>

<label>用户名:<input type="text" name="username" /></label>

<label>密码:<input type="password" name="psw" /></label>

</body>

</html>

时间: 2024-12-28 14:12:51

14_css伪类控制链接.html的相关文章

css自定义下拉菜单,通过伪类控制展开隐藏

公司最近要做组件库,一些单选框,复选框,下拉菜单都需要美观自定义, 闲余时间做了一个(对浏览器要求较高的)下拉菜单的组件. /*********实现功能 start **************/ 通过css伪类:focus实现下拉菜单基本功能 select: 点击菜单(动画过渡)展开,再次点击(动画过渡)收起; 并保证点击页面空白处和选择option同样(动画过渡)收起菜单. option: 限制5条内容的高度,超出则滚动条,反之则自适应高度; /***********实现功能end*****

CSS伪类 (链接的各种效果)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> a:link/*链接自然状态下的颜色*/ { color: red; } a:visited/*已经访问了的链接变色*/ { color: gr

CSS之伪类

:hover -- CSS :hover 伪类,适用于光标(鼠标指针)指向一个元素,但此元素未被激活时的样式 语法: :hover CSS版本:CSS2 引用网址:http://www.dreamdu.com/css/pseudo-class_hover/ 说明: 适用于光标(鼠标指针)指向一个元素,但此元素未被激活时 客户端(浏览器)可以根据用户与其交互的动作改变其渲染效果,CSS为这种情况提供了三个伪类:hover.active.focus 上述三种伪类不是互斥的,一个元素同时可以适用其中的

CSS设计指南之伪类

伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上.伪类分两种. UI伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用CSS样式. 结构化伪类会在标记中存在某种结构上的关系时(比如某个元素是一组元素中的第一个或最后一个),为相应元素应用CSS样式. 一.UI伪类 1.链接伪类 Link:此时,链接就在那儿等着用户点击. Visited:用户此前点击过这个链接. Hover:鼠标指针正悬停在链接上. Active:链接正在被点击(鼠标在元素上按下,还没有

简单伪类

(1):active 被激活的元素(例如激活的链接). (2):first-child 元素的第一个子元素. (3):focus 有焦点的元素(例如接收输入的表单字段). (4):hover 指向的元素(例如通过鼠标). (5):lang() 特定语言的样式. (6):link 未跟踪的链接. (7):visited 以前访问过的链接. 注意: (1) 将伪类和其他的类和伪类放在一起使用时,中间不要留空格,只有.和:指示符. eg a.offsite:link{color:green;} (2)

css(二)css选择器,伪类

前戏 前面我们说过CSS规则由选择器和声明组成,我们要给标签设置属性,那我们就要找到对应的标签,CSS选择器可以帮我们找到我们需要的标签 css选择器有: 标签选择器 类选择器 ID选择器 全局选择器 群组选择器 后代选择器 标签选择器 标签选择器前面我们用过,它是以HTML标签作为选择器 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type&qu

&lt;a&gt;链接的四个伪类顺序

摘自: http://www.cnblogs.com/xiayi/p/5350423.html <a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类,但它确实作为一个类来使用.(这些类确实存在,浏览器在后台会向这些类增加和删除元素) 我在看<CSS设计指南>时,它说到四个伪类的书写顺序一定要正确,否则浏览器可能不会显示预期的结果. 也即这样写: a:

理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序

理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序 在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都知道,4个伪类是有固定顺序的(LVHA),否则很容易出现预期之外的效果. 大部分人,都会用自己的方式,对这个顺序死记硬背. 熟记顺序,无疑是写样式时最快捷的方法,牛人们的记忆方法也是五花八门. 我见过有酱婶的:lv的包包hao,这倒是实话. 比较奇葩的,我在baidu上输入lvha,竟然自动关联出鹿

【转】链接伪类(:hover)CSS背景图片有闪动BUG

来源:http://www.css88.com/archives/744 ------------------------------------------------------------------------------------------------- IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath)} 常用的解决方案: 在页面