第十课 div css 中css伪类元素的讲解和应用原理详解
本帖最后由 asp老师 于 2014-11-30 23:06 编辑我们此时新建一个10.html文件 ，和一个10.css的文件，并且把这个10.css文件导入到10.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=utf-8" />
<title>无标题文档</title>
<link href="10.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1><a href="#" target="_blank">道勤网与您一起发展！学习</a><h1>
</body>
</html>
此时呢，我们在给css当中定义一个css，改变a链接的颜色；代码如下
a{color:#933;}那么这样呢，我们就改变了此时的链接颜色！
如果是加为这样的css代码：
a{color:#933;}
a:link {color:#933;}
a:visited {color:#9C6;}我们来分析一下这个
a{color:#933;} 表示a标签的颜色为 #933
a:link {color:#933;} 这个表示的是 没有访问过的链接颜色为 #933
a:visited{color:#9c6;} 这个表示的是访问过的链接 颜色变为 #9c6
好我们在来看这段的 css代码：
a{color:#933;}
a:link {color:#933;}
a:visited {color:#9C6;}
a:hover{color:#009;}那么这个 a:hover{color:#009;} 表示的就是是当鼠标移动到a标签的时候，那么颜色变为#009颜色。
好我们在继续添加一个代码：
a{color:#933;}
a:link {color:#933;}
a:visited {color:#9C6;}
a:hover{color:#009;}
a:active{color:#F06;}那么我们此时看到这里有个a:active{color:#F06;} 那么这个表示的当我们鼠标左键点击的时候那么这个链接的颜色变为#F06 这个颜色。
不过我们来总结下，一般情况下用到这2个就可以的
a{color:#933;}
a:link {color:#933;}
a:hover{color:#009;}不是2个嘛，怎么会有三个代码呢，其实第一个代码和第二个代码的效果是一样的，所以我们可以这样来
a{color:#933;}
a:hover{color:#009;}
------------------------------------------------------------------好此时我们修改代码为这样的代码：
a{color:#933;}
a:hover{color:#009; font-size:36px; background:#0C3;}好我们来分析这段代码：
首先呢：
1.刚开始a标签的链接颜色为 #933
2.当我们把鼠标放上去的时候：颜色变为#009 同时字体颜色变为36px而且同时还有了背景颜色#0C3
效果如下：
刚开始的效果;
鼠标放上去的效果：
我们把这样的代码用到包含选择器中，看下是否好呢？好看下面代码
源代码：
<!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=utf-8" />
<title>无标题文档</title>
<link href="10.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1><a href="http://www.baidu.com" target="_blank">道勤网与您一起发展！学习</a><h1>
<h2><a href="http://www.baidu.com" target="_blank">不错的地方</a></h2>
</body>
</html>
css代码：
h1 a{color:#933;}
h1 a:hover{color:#009; font-size:36px; background:#0C3;}
那么此时我们可以看到这样呢，之后h1 下的a标签才会起到作用，h2标签的内容是没有发生作用的。
点击查看其他DIV+CSS教程
第一节 div css基本书写规则和原理详细解答
第二节在div css当中并列标签的应用规则详解
第三节 div+ css中文字和图片背景的常用css熟悉详解
第四节div+css当中的 内联样式和外联的区别讲解
第五节div+css当中 class类别选择符的应用详解
第六课. DIV +CSS当中的 id选择器的应用和匹配原理详解
第七课 div css当中 组合选择符的应用和原理详解
第八课 div css 通配选择符和包含选择器的用法技巧
第九课 div css里面 常用选择器的课程总结
第十课 div css 中css伪类元素的讲解和应用原理详解
第十一课 div css当中的 背景图片的定位概念
页:
[1]