CSS学习
1.网页主要由三部分组成：
* 结构（Structure）
* 表现（Presentation）
* 行为（Behavior）
2.对应的标准也分三方面：
* 结构化标准语言主要包括: XHTML和XML
* 表现标准语言主要包括: CSS
* 行为标准主要包括: 对象模型（如W3C DOM）、ECMAScript等。
3.使用CSS进行网页布局优点:
* 内容和形式分离
* 改版网站更简单容易了
* 搜索引擎更友好，确实能够对SEO起到一定的帮助
* 保持整个站点视觉的一致性
* 页面载入得更快
4.CSS去控制HTML页面效果4种方式:
* 行内方式: 直接对HTML标签使用style=""属性： <p style="color:#F00; background:#CCC; font-size:12px;"></p>
* 内嵌方式: <head></head>之间: <head><style type="text/css"><!-- #div1{width:64px; height:64px; float:left;} --> </style></head>
* 链接方式: 在<head></head>之间加上： <link href="style.css" type="text/css" rel="stylesheet" />
* 导入方式: @import url(xxx.css);
5.对@import url（）方式做一下总结：
* @import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。
* @import 是css2里面的，所以古老的ie5不支持。
* 当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。4，link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css
* @import url(xxx.css); 有最大次数的限制，经测试IE6的最大次数是31次，第32个import及以后的都不能生效
* @import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.
6.CSS选择器:
* 标签选择器: 决定哪些标签采用相应的CSS样式 p{font-size:12px;}
* ID选择器: 哪个标签使用相应的CSS样式（建议不要在同一个html页面中多个标签拥有共同的ID，不符合W3C标准）
<p id="one">此处为p标签内的文字</p>
#one{2. font-size:12px;}
* 类选择器： 使页面中的某些标签(可以是不同的标签)具有相同的样式
<div class="one">此处为p标签内的文字</div>
.one{2. font-size:12px;}
* 通用选择器： *{此处为CSS代码} 他对父级中的所有HTML标签进行样式定义，可对具有共同样式的标签样式进行定义(有点小学数学中的提取公因式)
7.标签重置：
*{margin:0; padding:0;}
每种浏览器都自带有CSS文件，如果一个页面在浏览器加载页面后，发现没有CSS文件，那么浏览器就会自动调用它本身自带的CSS文件，
但是不同的浏览器自带的CSS文件又都不一样，对不同标签定义的样式不一样，如果我们想让做出的页面能够在不同的浏览器显示出来的
效果都是一样的，那么我们就需要对HTML标签重置
没有必要将所有的标签都重置，需要哪些标签重置就让哪些标签重置就可以了，如下：
body,div,p,a,ul,li{margin:0; padding:0;}
8.选择器的集体声明：
使用选择器的时候，有些标签样式是一样的，或者某些标签都有共同的样式属性，我们可以将这些标签集体声明，不同的标签用“,”分开：
如：h1,h2,h3,h4,h5,h6{color:#900;}
#one,#three,.yellow{font-size:14px;}
9.选择器的嵌套：
选择器也是可以嵌套的，如：
#div1 p a{color:#900;} /*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/
10.CSS选择器规范化命名：
* 骆驼命名法： 首字母要小写，后面的词的第一个字母就要用大写：#headerBlock
* 帕斯卡命名法：首字母要大写，后面的词的第一个字母就要用大写：#HeaderBlock
* 匈牙利命名法：需要在名称前面加上一个或多个小写字母作为前缀，来让名称更加好认，更容易理解：#head_navigation
11. 块状元素和内联元素：
* 块状元素： 一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素
* 内联元素： 一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”
当内联元素，在CSS中定义下列属性中的一种，便具有块元素的特征
1）display:block;
2）float:left; （不但具有块元素的特征，同时像左侧浮动）
12.
margin:20px 0 0 20px;
其中的数值顺序是：上右下左。
margin:20px 0;和margin:20px 0 20px 0;是等价的哟~只不过是更加精简而已，这样写CSS加载速度会更快。
13.页面布局
* 浮动Float
* 定位Position
14.IE6双倍边距BUG
只要满足下面3个条件才会出现这个BUG:
* 要为块状元素；
* 要左侧浮动；
* 要有左外边距(margin-left)
解决这个BUG很容易，只需要在相应的块状元素的CSS树形中加入“display:inline;
15.定位Position注意事项：
* 如果用position来布局页面，父级元素的position属性必须为relative，
* 而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，
* 当然你也可以用position，不过到时候计算的时候不要忘记padding的值
* 布局页面，Float为主，Position为辅
16.CSS Hack
（1）!important ： #content{
height:960px !important;
height:900px;
}
由于IE6不能识别它：直接解析第二句“height:900px;”将高度定为900px；
而对于IE7，FF均能识别：只解析第一句“height:960px !important;”将高度定为960px，而后面的“height:900px;”将不解析，忽略它；
注意：附加有“!important”的语句一定要在没有附加“!important”的语句的上面，顺序一定不能错！
（2）* ：#content{
height:960px;
*height:900px;
}
IE6、IE7可以识别附加有*的CSS属性语句：先读第一句，将高度定为960px，而后又读第二句“*height:900px;”，将高度从960px修改为900px，所以我们在IE中看到的最终效果就是高度为900px;
FF不识别*，所以它只读第一句“height:960px;”而忽略第二句
注意：附加有“*”的语句一定要在没有附加“*”的语句的下面，顺序一定不能错
* 结构（Structure）
* 表现（Presentation）
* 行为（Behavior）
2.对应的标准也分三方面：
* 结构化标准语言主要包括: XHTML和XML
* 表现标准语言主要包括: CSS
* 行为标准主要包括: 对象模型（如W3C DOM）、ECMAScript等。
3.使用CSS进行网页布局优点:
* 内容和形式分离
* 改版网站更简单容易了
* 搜索引擎更友好，确实能够对SEO起到一定的帮助
* 保持整个站点视觉的一致性
* 页面载入得更快
4.CSS去控制HTML页面效果4种方式:
* 行内方式: 直接对HTML标签使用style=""属性： <p style="color:#F00; background:#CCC; font-size:12px;"></p>
* 内嵌方式: <head></head>之间: <head><style type="text/css"><!-- #div1{width:64px; height:64px; float:left;} --> </style></head>
* 链接方式: 在<head></head>之间加上： <link href="style.css" type="text/css" rel="stylesheet" />
* 导入方式: @import url(xxx.css);
5.对@import url（）方式做一下总结：
* @import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。
* @import 是css2里面的，所以古老的ie5不支持。
* 当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。4，link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css
* @import url(xxx.css); 有最大次数的限制，经测试IE6的最大次数是31次，第32个import及以后的都不能生效
* @import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.
6.CSS选择器:
* 标签选择器: 决定哪些标签采用相应的CSS样式 p{font-size:12px;}
* ID选择器: 哪个标签使用相应的CSS样式（建议不要在同一个html页面中多个标签拥有共同的ID，不符合W3C标准）
<p id="one">此处为p标签内的文字</p>
#one{2. font-size:12px;}
* 类选择器： 使页面中的某些标签(可以是不同的标签)具有相同的样式
<div class="one">此处为p标签内的文字</div>
.one{2. font-size:12px;}
* 通用选择器： *{此处为CSS代码} 他对父级中的所有HTML标签进行样式定义，可对具有共同样式的标签样式进行定义(有点小学数学中的提取公因式)
7.标签重置：
*{margin:0; padding:0;}
每种浏览器都自带有CSS文件，如果一个页面在浏览器加载页面后，发现没有CSS文件，那么浏览器就会自动调用它本身自带的CSS文件，
但是不同的浏览器自带的CSS文件又都不一样，对不同标签定义的样式不一样，如果我们想让做出的页面能够在不同的浏览器显示出来的
效果都是一样的，那么我们就需要对HTML标签重置
没有必要将所有的标签都重置，需要哪些标签重置就让哪些标签重置就可以了，如下：
body,div,p,a,ul,li{margin:0; padding:0;}
8.选择器的集体声明：
使用选择器的时候，有些标签样式是一样的，或者某些标签都有共同的样式属性，我们可以将这些标签集体声明，不同的标签用“,”分开：
如：h1,h2,h3,h4,h5,h6{color:#900;}
#one,#three,.yellow{font-size:14px;}
9.选择器的嵌套：
选择器也是可以嵌套的，如：
#div1 p a{color:#900;} /*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/
10.CSS选择器规范化命名：
* 骆驼命名法： 首字母要小写，后面的词的第一个字母就要用大写：#headerBlock
* 帕斯卡命名法：首字母要大写，后面的词的第一个字母就要用大写：#HeaderBlock
* 匈牙利命名法：需要在名称前面加上一个或多个小写字母作为前缀，来让名称更加好认，更容易理解：#head_navigation
11. 块状元素和内联元素：
* 块状元素： 一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素
* 内联元素： 一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”
当内联元素，在CSS中定义下列属性中的一种，便具有块元素的特征
1）display:block;
2）float:left; （不但具有块元素的特征，同时像左侧浮动）
12.
margin:20px 0 0 20px;
其中的数值顺序是：上右下左。
margin:20px 0;和margin:20px 0 20px 0;是等价的哟~只不过是更加精简而已，这样写CSS加载速度会更快。
13.页面布局
* 浮动Float
* 定位Position
14.IE6双倍边距BUG
只要满足下面3个条件才会出现这个BUG:
* 要为块状元素；
* 要左侧浮动；
* 要有左外边距(margin-left)
解决这个BUG很容易，只需要在相应的块状元素的CSS树形中加入“display:inline;
15.定位Position注意事项：
* 如果用position来布局页面，父级元素的position属性必须为relative，
* 而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，
* 当然你也可以用position，不过到时候计算的时候不要忘记padding的值
* 布局页面，Float为主，Position为辅
16.CSS Hack
（1）!important ： #content{
height:960px !important;
height:900px;
}
由于IE6不能识别它：直接解析第二句“height:900px;”将高度定为900px；
而对于IE7，FF均能识别：只解析第一句“height:960px !important;”将高度定为960px，而后面的“height:900px;”将不解析，忽略它；
注意：附加有“!important”的语句一定要在没有附加“!important”的语句的上面，顺序一定不能错！
（2）* ：#content{
height:960px;
*height:900px;
}
IE6、IE7可以识别附加有*的CSS属性语句：先读第一句，将高度定为960px，而后又读第二句“*height:900px;”，将高度从960px修改为900px，所以我们在IE中看到的最终效果就是高度为900px;
FF不识别*，所以它只读第一句“height:960px;”而忽略第二句
注意：附加有“*”的语句一定要在没有附加“*”的语句的下面，顺序一定不能错