CSS总结

一、CSS特性

　　1.继承：子元素继承父元素的某些样式（因为有些元素有默认值，所以它们就不用继承父元素的）。

　　　哪些css样式可以直接被继承：

　　　　[1]:文本相关属性:如font-size、font-family、line-height、text-index等。

　　　　[2]：列表相关属性：list-style-type等。

　　　　[3]：颜色相关属性：color等。（注：button、input、select、textarea在IE下是不继承body属性的，需要单独写）。

　　2.层叠：子元素如果定义了与父元素一样的样式，就会覆盖父元素的样式。

二、CSS选择符

　　1.CSS选择符就是要控制的对象，要想对某一元素进行控制，有两种方式。

　　　　1).使用id选择器，要求id在网页中必须具有唯一性。在CSS文件中的语法为：#id名称{属性:值}。

　　　　2).使用类选择器，自己定义样式后，可以应用给一个或多个元素，一般用于定义重复的样式。类以英文"."开头，后面的名字需要自己定义，类定义后需要在需要使用的元素上使用class="类名"加以调用。(注：可以同时给一个元素加多个类，类之间用空格隔开。类和id都不要以数据开头)。

　　2.CSS选择符控制页面所有的html元素(包括哪些本身有默认值的元素)，使用通配符"*"，但效率较低，不建议使用。

　　　　语法：*{属性:值}

　　3.选择符的嵌套（包含/派生）使用。优点是不再单独为父元素包含的子元素进行设置id使得css代码更加简化，优化了css代码！

　　　　语法：父元素 子元素{属性：值}，如：table td{color:blue;}

　　4.选择符分组(集体控制)：将同样的样式定义用于多个选择符，选择符之间用逗号隔开。

　　　　语法：选择符1，选择符2，选择符3....{属性：值} 如：p,div,h1,table{属性：值}。

　　5.标签指定式选择符：如果既想使用id或class，也想同时使用标签选择符。

　　　　语法：元素标记+选择符{属性：值} 如：h1.waring{属性：值}表示针对所有class为waring的h1标签。

　　6.组合选择符：将以上选择符进行组合使用，如：h1.waring,h2#contect{属性：值}。

 

三、CSS优先权

　　就近原则：作用范围越小，优先级越高，离修饰目标越近，优先级越高。

　　四种应用样式方式的优先级：内联式[行内样式] > 内嵌式[内部式] > 链接式[外部式] > @import导入式。

　　选择符优先级：行内 > id > class > 标签选择器（注：我们可以通过在属性值后面加"!important"来提升优先权[重要性]，IE6不兼容）

 四、CSS默认值问题

　　由于各个浏览器的内外边距存在默认值。而且还不同，所以我们需要首先将所有的浏览器的内外边距的默认值都设置为零，css属性虽然有继承的特点，但是并不是所有的属性都能继承。

　　在实际的工作中，我们用到了哪些标签，就给那些标签进行重置内外边距。并且一般把ul和ol的边框list-style的属性设置为none;

五、列表的使用语法

　　list-style:list-style-image(列表图片)  list-style-position(列表符号的位置)  list-style-type(列表的样式) （list-style:none 表示不要符号的列表）。

六、CSS控制边框属性

　　语法：border:border-width border-style border-color.(如果只写border，则后面紧跟着的是粗细、样式、颜色三个子属性)。

功能	语法
设置边框粗细	boder-方向-width:值；
设置边框颜色	border-方向-color:值；
设置边框样式	boder-方向-style:值；
设置某一边框属性的简捷方式	border-方向：线宽 线型 颜色（线型常用：solid、dashed）
设置某一元素的四条边框的简捷方式[仅限于四条边框属性完全相同]	border:线宽 线型 颜色

七、CSS控制背景

　　1.语法：background：background-color  background-image background-repeat background-attachment background-postion.

功能	语法
背景	background：颜色 图片 平铺方式 固定方式 位置
背景颜色	background-color：值
背景图片	background-image:url(背景图像的位置及全称)
背景图片的重复方式	background-repeat：（repeat no-repeat repeat-x repeat-y）
背景图像的位置	background-postion:(垂直位置)top[center left right] （水平位置）center[left top right] bottom[left center right],x坐标，y坐标[第一个值是水平位置，第二个值是垂直位置，左上角是0 0 ，单位是像素(0px,0px)]
背景图像的依附方式	background-attachment:[scroll ,fixed]

　　　　注：背景图像，默认情况下是进行水平和垂直位置上的平铺，默认在盒子的左上方显示。图片的依附方式的含义是：将图像固定在屏幕的某个位置。（但在IE6中只有html和body 两个元素支持此属性。）

　　2.制作翻转按钮效果：将两张图片进行合成；

八、CSS技巧

　　[1]:让盒子水平居中，只需将盒子的左右外边距margin设置为auto，即margin:5px auto；

　　[2]:让盒子的中的内容垂直居中，设置行高line-height等于盒子的高度height，但是不能有换行！

　　[3]：我们在调试的时候可以适当的增加背景颜色。

　　[4]:CSS精灵技巧,主要是为了减少http请求，提高网页效率。核心思想是把多张图片合成一张图片里，通过修改背景属性中的定位来控制到底显示图片中的哪些部分。

　　[5]:CSS常见布局方式：一行一列居中、一行两列居中、两行两列、三行两列、三行三列.

　　[6]:当父元素没有指定高度并且子元素有浮动时，这个父元素的高度不会自动增加.

　　[7]:在给盒子的父盒子加居中时，一定要有宽度才能使得父盒子居中.

　　[8]:当有浮动元素有与浮动方向一样的外边距时，在IE6中会出现双倍间距的现象，解决方法是：给此元素加：display：inline;就可以很好的解决.

九、CSS元素分类

　　[1].块状元素：{display:block}一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)和高度(height)起作用。常见块状元素有：div、p、body、h1~h6等（能设置宽和高，独占一行）。

　　[2].内联元素：{display:inline}内联元素只能容忍文本和其他内联元素，它允许其他元素与其同一行，但宽度和高度变得不起作用，常见内联元素有：em、span、a等（不能设置宽和高，不影响换行）。

十、部分CSS样式详解

　　1.CSS溢出

　　　　　功能：设置当对象的内容超过其指定高度及宽度时如何显示

　　　　　语法：Overflow:visible(默认值，不剪切内容，也不添加滚动条) 

　　　　　　　　　　　　auto(在必须时对象内容才会被裁切或显示滚动条) 

 　　　　　　　　　　　   hidden(不显示超过对象尺寸的内容) 

　　　　　　　　　　　　 scroll(总是显示滚动条)

　　2.Zoom：只有IE的浏览器支持，是缩放比例

　　　　功能：设置或检索对象的缩放比例

　　　　语法：Zoom:Normal：默认值，使用对象的实际尺寸

 

　　　　　　　　　 Number：百分数|无符号浮点实数，浮点实数为1.0或百分数为100%时相当于此属性的normal值。

 

　　　　　　　　　 Zoom：1；解决IE6兼容性问题。

 

 　　3.cursor:用来改变鼠标的样式

　　　　可以自己定义鼠标的图像，格式为：style="cursor:url(图片的路径及名称)"。