网页 css

css---- 层叠样式表（Cascading Style Sheet）

一，层叠样式表的分类

1，外部样式表：在外部定义样式表，然后在页面head里面附加该样式表

2，内嵌样式表：直接在网页head标签里定义样式表

3，内联样式表：放在标签的style属性里面

二，选择器

1，基本选择器

（1）id选择器：用#xx定义

（2）class选择器：用.xx定义

（3）标签选择器：<p style=""></p>

2,组合选择器

（1）用逗号隔开：表示并列关系

（2）用空格隔开：表示后代关系

（3）筛选：标签名.class选择器  如input.dd   //class为dd的input标签

优先级：
1.一般来说，ID选择器优先级要高于class选择器的优先级，class选择器的优先级高于标签选择器的优先级。
2.对于同一类型的选择器，内联样式的优先级要高于内嵌，内嵌样式的优先级要高于外部的。

层叠的意思？

1，样式表类型的层叠：可以在外部样式表、内嵌样式表、内联样式表中共同定义一个标签的不同属性，来共同控制该标签的属性

2，选择器的层叠：可以用不同选择器来共同定义一个标签的属性，来共同控制该标签的属性

3，父子元素的层叠：在body等父级元素定义的属性会影响到下面class选择器和id选择器中定义的属性

三，样式表的属性

1，背景与前景

（1）背景

background-color:背景色。
background-image:url(路径)  背景图
background-attatchment:  fixed-背景固定；scroll-背景与文字一起滚动
background-repeat: repeat:平铺；no-repeat：不平铺； repeat-x,repeat-y.
background-position: right 100px bottom 200px;   //距右边100px下边200px

（2）前景

font-family:字体
font-size:字体大小
color:颜色
font-weight:加粗
font-style:倾斜
text-decoration: underline,overline,line-through
text-align: left,center,right
vertical-align: top,middle,bottom
line-height:行高。一般是font-size的1.5-2倍。

（二）边界与边框
1.边框：二维表格。
2.外边距：margin：上右下左
3.内边距：padding：上右下左

三，列表与方块

1,方块：width，height，top，bottom，left，right属性

2，列表：list-style-type：none；

list-style-position：默认是outside

list-style-image：图片做序号

display：none不显示，不占位置；block-块显示（独占一行，有换行的作用）；inline-成一行显示（width，height不管用）；inline-block-成一行显示（width，height管用）

visibility：是否可见。visible：可见；hidden：隐藏（如果隐藏，位置依然占据）

overflow：溢出处理。hidden：超出则隐藏；scroll：显示滚动条

四，格式与布局

1，位置布局

position：fixed-绝对定位，以浏览器的可见区域而不是以页面为坐标进行定位，通常用来做浮动层，如页面右下角的回到顶部（ie6不支持）

relative-相对定位，相对的意思是相对于该元素原本应该在的位置。虽然元素显示的位置变化了，但原来的空间依然是占用的。

absolute-绝对定位，如果该元素的外围元素没有定义position属性，则该元素的定位是以页面为坐标进行的；如果该元素的外围元素定义了position属性，则该元素的                              定位是以该外围元素为坐标进行的

配合的样式属性：top，right，left，bottom

2，流式布局

float：配合的样式属性：margin-top，margin-right，margin-bottom，margin-left

clear：清除浮动

例子：（1）几个并列的层用float布局：如果有四个并列的div层，前两个float，下面两个div会跑到前两个div下面去，如果想要后两个还在原来位置，则这是需要在前两个div下面加一个div来清除浮动，clear：both

（2）嵌套的层用float布局：一个大div里面套两个小div：大div可以不用设高，小div设高，用小的把大的撑开，此时如果小div设置float之后，大div会消失，因为小的div浮动起来之后，大div里面就没内容了，所以高度就为0了，此时应该把大div也设置float属性，width设成100%，则可恢复正常。