首页 > 代码库 > css常用或不熟悉的

css常用或不熟悉的

css优先级:

!important 〉  行内样式  > id选择器  > 类选择器|伪类选择器  > 标签选择器  >  通用选择器  > 继承属性

综合优先级(只讨论选择器):

         则下列选择器的优先级如何呢?

         .a1 div{}

         .a1 .a2{}

         .a1 div .a2 span{}

         #d1 div {}

         #d1 .a1 {}

         则他们比较优先级的原则是:

1,  比较最高的优先级选择器的多少,多者胜;

2,  最高的数量相等的时候,比较次高,多者胜;

3,  依次类推

 

css背景:

         background-color: 背景颜色

         background-image: url(背景图的路径);

         background-repeat: 设置背景图的重复特性,有:repeat(默认值),no-repeat,repeat-x,  repeat-y

         background-position: 需要两个值:水平位置  垂直位置。

         è background:综合属性可以设置背景的所有特性,包括上述所有。

一个常见错误:

  background-image: url( images/abc.gif )  no-repeat  center center;

  ——background-image是独立属性,只能设置背景图,不能设置其他值了。

 

列表样式

  list-style-type: 设置列表符号,可以是我们之前学的无序列表符或有序列表符。

  list-style-image:设置列表的图片(此时list-style-type自动就无效了,被代替了)

  list-style-position: 指将列表符放在li的里面还是外面:outside(外面,默认值),inside(里面)

  list-style: 这是综合属性,可以设置上述几个。

 

border样式:

线有3个方面的特性:线型,线宽,线色,每个特性都可以单独控制。边框也有4个方向,每个方向都可以单独控制。

         border-top-style: 顶部边框的线型。常见线型:solid ,  dashed,  dotted

         border-top-width: 顶部边框的线宽;

         border-top-color: 顶部边框的线色;

         border-right-style,  border-right-width, border-right-color, ......就是12个

除此之外,我们还有3个设置线的某方面特性的综合属性:

         border-style: 可以使用1-4个值,用来设置4个方向的线的线型,比如:border-style:solid dashed;  表示上下边框为实线,左右边框为虚线;

         border-width: 同理,可以设置1-4个值,表示4个方向的线宽。

         border-color:同理。

还有:4个设置每个方向边框的所有特性的综合属性:

         border-top: 线型  线宽  线颜色;

         border-right: 线型  线宽  线颜色;

         border-bottom: 线型  线宽  线颜色;

         border-left: 线型  线宽  线颜色;

最后,一个最大的综合属性:一次性设置4个方向的3个特性:

         border: 线型  线宽  线颜色;

 

定位属性:position

1,  position:static          ——静态定位(默认)

2,  position:relative;      ——相对定位(相对正常文档流定位,不会脱离文档流,占原来布局空间大小)。

3,  position:absolute;    ——绝对定位(相对整个网页主体,脱离文档流,不占布局空间)。

4,  position:fixed;         ——固定定位(相对于浏览器窗口,脱离文档流,不占布局空间)。

 

块盒子和行内盒子相互转换

  块盒子,其display属性的值默认是block

  行内盒子,其display属性的值默认是inline;

 

  div{ display: inline;}           ——此时div就跟span一样。

  span{ display: block;}        ——此时span就跟div一样。

  display: none   不显示