css总结

css总结

CSS选择器分为

1.群组选择器 如：p, body, img, div{}

2.兄弟选择器 如：p + p { color:#f00; }

3.属性选择器 如： p[title] { color:#f00; }

4.包含（后代）选择器 如：body ul li{}

5.子元素选择器 如：div > p{}

6.ID选择器 如：#myDiv{}

7.类选择器 如：.class1{}

8.伪元素选择器 如：E:first-line，E:before

9.伪类选择器 如：E:first-child ，E:visited，E:focus，E:enabled

10.标签选择器 如：p { font-size:1em; } 子选择器和后代选择器的区别：

后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。 子选择器只对直接后代有影响的选择器，而对“孙子后代”以及多层后代不产生作用。 注意：在IE6中，只支持后代选择器，不支持子选择器

盒子模型

css框模型介绍：

图片描述

图片描述 图片描述

给ul下的li设置宽度，那么他们将平均掉它们所占容器的宽度。div >ul> li> a标签所占宽度和高度： 图片描述

当你为body元素指定div时，每个div默认的宽为浏览器的100%，高度在每个浏览器的解析都是不一样的，比如在火狐下是131px，在chrome下则是142px，具体机制不明

css字体速记规则

当用css定义字体样式的时候，你也许会这样做：

font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif 没有必要这么做，因为你可以使用css速记属性：

font: bold italic small-caps 1em/1.5em verdana,sans-serif 值得注意的是：css速记版本只会在你同时指定 font-size和font-family 属性时才会生效。如果你没有指定font-weight, font-style,或者 font-variant，那么这些值将会自动默认为 normal

避免多余选择器

有时候你会有如下的写法：

ul li { ... }

ol li { ... }

table tr td { ... } 但实际上这是没必要的写法，因为

会且只会与

或

连用，就像只能存在于和中一样，这儿真没有把它们重复一次的必要。

!Important

所有被!important 标记的样式，即使它后来被重写，浏览器也只会采用被标记的那条。

#content{ height:960px !important; height:900px; } !important： IE7/IE8/IE9/FireFox可以识别上面附加!important的语句，看到附加!important的语句后，就不会再去执行 第二句，尽管他们也“认识”第二句，但是附加“!important”的语句拥有绝对优先级，只要有它存在，第二句就不允许执行。

IE6会执行!important的语句后，再去执行第二句“height:900px”,用后面的样式覆盖了前面的样式，所以在IE6下，最终的height值是900px。

@import and

在决定使用使用哪种方法去包含你的样式表之前，你应该明白这两种方法被用来干嘛？

链接式：

link就是把外部CSS与网页连接起来，将其加在头部标签中，具体形式如下：

导入样式：

通过两个或以上的css文件共同部分，在css页面引入css文件，通过@import url（” “）

@import url("global.css"); @import url(global.css); @import "global.css"; 以上三种方式都有效，

区别：

1）link属于XHTML标签，而@import是CSS提供的;
2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3）@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
4）link方式的样式的权重 高于@import的权重.

行内元素、块元素和空元素

行内元素特点

1、和其他元素都在一行上；

2、元素的高度、宽度、行高及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 行内元素在设置 水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。