DIV+CSS回顾总结(一)

使用div+css已经有一年了，但是一只没有很是系统的去总结一些关于div+css的问题，前些日子在论坛上逛的时候，一位朋友提供的快速div+css的教程，是由现在lamp兄弟连的高洛峰老师主讲的，学习php的时候就学习的高老师的。因为视频不多，只有4个小时多一些，抽些时间看完之后，感觉很多东西恍然大悟。原来脑子里理解的div+css更加条理。下面抽些时间依次总结一下：

1.div+css是一种标准化网页布局；div-division，css就是层叠式样式表

2.css样式有四种：内联式样式表、嵌入式样式表、外部样式表、输入样式表

下面依次对以上四种分析：

（1）内联式样式表：即直接对html写样式。如下：

• 优点：随意，想对哪修改就修改哪
• 弊端：如果有很多个就比较繁琐，需要每个都写css样式

（2）嵌入式样式表：直接在网页头中，写一个样式，然后在网页中调用即可。如下test.html文档：

 （3）外部样式表：在同网页同目录的文件夹中创建一个style.css文件，里面写入样式，然后在需要调用该样式的网页文件中通过link调用。如下：

style.css文件内容为：

 在test.html文件中通过link调用即可。如下：

 这样显示的效果同上面的嵌入式是一样的。

（4）输入样式表：采用@import 将一个css导入到另一个css或则html文档中去。假如我们再创建一个css.css文档，并且在其中写入一些样式，如果我们想在style.css文件中同时加载css.css文件，可以在style.css文件头部写上：

这样就把当前目录下的css.css文件导入到style.css文件中。这样在网页中调用style.css时相当于调用了style.css和css.css两个css。

在html文档中，我们也可以不用link来进行调用，通过如下方式进行导入css样式：

这样的效果上述外部样式表的效果是一样的。

3.样式规则的选择器：（以下为方便描述，均以嵌入样式表进行讲解。）

样式选择器共有6种，分别是：

• html selector
• class selector
• id selector
• 关联式样式选择器
• 组合样式选择器
• 伪元素样式选择器

下面我们通过例子来分析这6种样式选择器：

 （1）html selector:即在网页head标签中样式表花括号{}前写的标签，在网页中直接写这样标签就可以进行调用。如下：

 上述的花括号前的标签为 p、div、h1，在body中调用这些标签就是调用其花括号内的样式。这就是html选择器。

（2）class selector：如果同一个个标签的样式不同时，这个时候，我们采用类选择器，把相同的样式归为一类。如下:

 这样给p标签分了三类，调用时采用class调用类即可。这样就可以让页面上同一个标签显示的类不同。

那么如果div ,h1的类也和此相同 怎么办呢?我们可以采用如下方式来进行定义：

 把p去掉，直接采用.one .two .three来区分不同类显示的样式，在html中标签调用  采用class来调用类名即可。这样的好处就是可以很多标签都使用同一个类。

（3）id selector:我们知道在一个页面中id是不能重复的，也就是说在页面通过id调用样式表时也是不能重复的，为了实现一个样式只能被一种样式调用，我们采用id选择器，如下定义：

 采用#号来定义css样式，这样就可以定义该样式只能有一个元素来使用。

id和类的区别：如果这个样式只有一个标签来使用时，做成id，如果这个样式可能有多个标签使用，做成class
在css中尽量少用id，如果和js混用时，用id比较多。因为要和js配合使用。

 （4）关联样式选择器：比如有如下样式：

 那么我们可以考虑一下这个样式是为p还是em写的呢？我们可以验证一下！如果是单独使用p或者em，我们可以发现，这个样式不起任何作用，必须得在p标签内套用em标签，这样的样式才可以生效，如下效果才能生效：

 反过来也是不能生效的。再比如样式写成：

 也必须得采用如下嵌套样式才能生效：

 再扩展一下，css写成如下样式：

 这样在调用时，必须写成如下嵌套才能让css生效：

 最后一个例子，css写成如下：

 调用时得写成如下嵌套：

 （5）组合选择器：把多种标签用逗号分开，这样在调用时，花括号前的这些标签所显示的样式是相同的。如下css：

 这样我们在调用时写成如下，最终显示的效果都是相同的。

 （6）伪元素选择器：即同一个元素在不同情况下显示的样式不同。比如a标签，当与链接时，显示一种样式，当鼠标移过时，又显示一种样式，当点击之后，又是另外一种样式。如下定义a标签的css：

 调用时写成：

 这样实现的效果是：鼠标默认为红色   放上去变成5cm的绿色 访问过变成黄色。

css使用拓展：

伪元素和类选择器组合使用：

 这样就让a标签和类标签共用一个伪元素选择。

伪元素和组合选择器组合使用：

这样关于css的样式和样式规则选择器就总结完了，接下来会在二中总结css常见的一些样式使用。