CSS样式表

样式表的位置：

1，  内联，放在标签的开始标记里面。

2，  内嵌，放在head元素中

3，  外部，就近原则，以子元素为主，内联最大，内嵌其次，外部最小

 

 

选择器：

1，  ID选择器（#+ID名）

2，  CLASS选择器（.+CLASS名）

3，  TAG选择器（标签）（直接用标签名）

ID高于CLASS高于TAG

选择器的扩展类型：

1，  以逗号隔开：二者为并列关系，同时受样式影响

2，  以空格隔开：后代关系

3，  CLASS筛选

 

 

层叠的三个含义：

1，  父，子元素之间的样式叠加。

2，  样式表的叠加，（外部，内嵌，内联）

3，  选择器的叠加（ID,CLASS,TAG）

 

“叠加”——互补&覆盖

 

覆盖遵循就近原则

 

P标签里面不可以放标题H1~H6

 

样式属性：

一，宽与高 ：

width:100px; width:100%; height:100px;height100%

二，背景与前景：、

(1)背景

1，背景色

background-color:#FF0000;

2，背景图片

background-image:url(“路径”)

background-repeat:no-repeat/repeat-x/repeat-y;

background-position:top/left/bottom/right/100px 20px

取图片其中一部分做背景

(2)前景

font-family:字体名称

font-size:字体大小

color:字体颜色

font-weight:字体加粗

font-style:倾斜

text-decoration:下划线，中划线，上划线

text-align:水平对齐

vertical-align:垂直对齐

line-height:行高（可以利用黄金分割原理设置）

SPAN默认情况下宽与高不起作用，要与display:inline-block结合

三，边框与边界

1， 边框：border-color（颜色）,border-width（宽度）,border-style（样式）:dashed(短线) ,dotted(点), double, solid(实线), groove(类似于相框的效果) etc.

border-top,border-left,border-right,border-bottom

2， 外边界

margin：边框与外面的距离 上 右 下 左 依次设置

也可以单独设置

IE默认双倍边距

3， 内边界

padding：边框与文字的距离 上 右 下 左 依次设置

也可以单独设置

四，总体布局(difficult)

<style type="text/css">

*

{

         margin:0px;

         padding:0px;

}

</style>

*代表所有元素

 

1,float:left/right

如果父级没有设置float，则会出现DIV塌陷的问题，解决办法：在父级中写入 float:left,margin:auto.

clear:both(清除流)

 

2,position:absolute,relative,fixed

 

relative:在其本身存在的位置偏移。

fixed:对于浏览器的边界偏移（IE6不起作用）

absolute:默认情况下，以屏幕作为对照进行偏移，如果父级元素中有position属性，则以父级元素为对照。

 

3,list-style

 设置UL或者OL前面的标记样式。