Div+Css(1)
前天，在CSDN上看到一篇文章《有理想的程序员必须知道的15件事》 原文链接：http://sd.csdn.net/a/20110421/296282.html
看了这篇文章，其中两点印象挺深刻的。
1，多看的同时多练
2，通过学习把理解到的东西通过写博的方式分享出来。（希望大家指出不足之处）
故以后只要有时间我都会通过写博的方式把学到的点滴分享出来。
今天，作为菜鸟的我看了一个讲Div+Css的视频教程。
主要学到了：
1，Css样式的种类。第一：内联式样式表，第二：嵌入式样式表，第三：外部样式表，第四：输入样式表。
什么是内联式样式表？
<P style="font-size:16px;color:Red;background-color:Green;text-decoration:underline"></P>------这种方式现在已经比较少用了。
什么是嵌入式样式表？
<html>
<head>
<style type="text/css">
<!--
P{
font-size:16px;
color:Red;
background-color:Green;
text-decoration:underline
}
//-->(注意：似乎这个是为了防止有些浏览器不支持Style而用此来代替的)
</style>
</head>
<body>
<p>我是中国人</P>
........(主体内容)
</body>
</html>
什么是外部样式表?
意思就是：把样式写在一个外部的.Css文件中，然后通过在html页面上引用该文件。任何html页面都可以引用。
引用方法如下：
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/test.css"> (注意： href="存放.css文件的地址")
</head>
<body>
<p>我是中国人</P>
</body>
</html>
什么是输入样式表？
将Css文件输入到另一个Css文件中。
假如你有一个test1.Css文件
P{
font-size:16px;
color:Red;
background-color:Green;
text-decoration:underline
}
还有一个test2.css文件
div{
color:Yellow;
font-size:20px
}
此时只要在test1.css文件里输入
@import url（test2.css文件的地址） ----此时在页面中只要引用test1.css文件。就相当于引用了在这之前的test1.css和test2.css两个文件
2，学到第二点：样式规则的选择器，第一：html selector;第二：class selector；第三：id selector ；第四：关联选择器；第五：组合选择器；第六：伪元素选择器
什么是html选择器？
就是直接在前边写html标签。如：<P>标签，<a>标签，<div>标签等
div{--这就是html选择器形式
color:Yellow;
font-size:20px
}
什么是class选择器？
.lei{--这就是class选择器形式
color:Yellow;
font-size:20px
}
在页面中可以这样调用 ：<div class="lei">我是中国人</div>
p .one{} --表示在P标签下的one选择器（只能针对<P>标签下）
什么是id选择器？
#aaa{--这就是id选择器形式
color:Yellow;
font-size:20px
}
在页面中可以这样调用 ：<div id="aaa">我是中国人</div>
注意：在同一个页面，不能有相同的名称的id选择器。 什么是关联选择器？
类似一种嵌套的形式。
如：p em{ --这就是关联选择器的形式,中间是用空格隔开的
color:Red;
font-size：16px
}
以上关联选择器强调了em标签必须嵌套在P标签里才能有效果。（强调嵌套顺序：必须后面的嵌套在前面的标签里面）
页面中：--这样才有效果。
<P>
<em>我是中国人</em>
</P>
什么是组合选择器？
P,div,a,h1,.one,#two{
Font-size:16px;
Color:Red
}
这种用逗号隔开的叫组合选择器
特点：就是以上所有标签都可以用这些样式，而不像关联选择器那样只能要按规定嵌套正确的才能使用这些样式
什么是伪元素选择器(伪类)？
a:link{}
a:hover{}
a:visited{}
伪元素选择器和类一起使用：
a.one:link{}
a.two:hover{}
a.three:visited{}
动态伪类
：focus 指示当前拥有输入焦点的元素（ie7表单元素不支持此伪类）
选择第一个元素
#header P：first-child 选择header中的第一个段落
首字母选择
P：first-letter 选择段落的第一个字母
P：first-line 选择段落的第一行
注意：这两个伪类只能作用于标记或段落之类的块级元素，而不能应用于超链接等行内元素
：before和：after
这两个伪元素用于插入生成内容并设置其样式。
字面意思：：before用于在元素内容的前面插入内容
：after反之。
它们需要配合content一起使用。用after来消除浮动是一个不错的选择。
语法： a[href]：before{content：“link”}
注意：插入的内容是在该元素的内容的前面或后面，也就是说是在其内部插入。而不是在该元素前面或紧跟其后