Div+Css(1)_html/css_WEB-ITnose

　　前天，在CSDN上看到一篇文章《有理想的程序员必须知道的15件事》 原文链接：http://sd.csdn.net/a/20110421/296282.html

　　看了这篇文章，其中两点印象挺深刻的。

　　1，多看的同时多练

　　2，通过学习把理解到的东西通过写博的方式分享出来。（希望大家指出不足之处）

　　故以后只要有时间我都会通过写博的方式把学到的点滴分享出来。

　　今天，作为菜鸟的我看了一个讲Div+Css的视频教程。

　　主要学到了：

　　　　1，Css样式的种类。第一：内联式样式表，第二：嵌入式样式表，第三：外部样式表，第四：输入样式表。

　　　　什么是内联式样式表？

　　　　

------这种方式现在已经比较少用了。

　　　　什么是嵌入式样式表？

　　　　

　　　　

　　　　

　　　　(注意：似乎这个是为了防止有些浏览器不支持Style而用此来代替的)

　　　　

　　　　

　　　　

　　　　　

我是中国人

　

　　　　　　........(主体内容)

　　　　

　　　　

　　　　什么是外部样式表?

　　　　意思就是：把样式写在一个外部的.Css文件中，然后通过在html页面上引用该文件。任何html页面都可以引用。

　　　　引用方法如下：

　　　　

　　　　

　　　　 (注意： href="存放.css文件的地址")

　　　　

　　　　

　　　　　

我是中国人

　

　　　　

　　　　

　　　　什么是输入样式表？

　　　　将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标签。如：

标签，标签，

标签等

　　　　　　　div{--这就是html选择器形式

　　　　　　　　color:Yellow;

　　　　　　　　font-size:20px

　　　　　　　　}

　　　　什么是class选择器？

　　　　　　.lei{--这就是class选择器形式

　　　　　　　　color:Yellow;

　　　　　　　　font-size:20px

　　　　　　　　}

　　　　在页面中可以这样调用 ：

我是中国人

　　　　p .one{} --表示在P标签下的one选择器（只能针对

标签下）

　　　　什么是id选择器？

　　　　 #aaa{--这就是id选择器形式

　　　　　　　　color:Yellow;

　　　　　　　　font-size:20px

　　　　　　　　}

　　　　 在页面中可以这样调用 ：

我是中国人

　　　　注意：在同一个页面，不能有相同的名称的id选择器。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　             什么是关联选择器？

　　　　类似一种嵌套的形式。

　　　　如：p em{ --这就是关联选择器的形式,中间是用空格隔开的

　　　　　　color:Red;

　　　　　　font-size：16px

　　　　　　}

　　　　以上关联选择器强调了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”}

　　　　注意：插入的内容是在该元素的内容的前面或后面，也就是说是在其内部插入。而不是在该元素前面或紧跟其后