传智播客——css细节
一：css的概念
CSS是层叠样式表（Cascading Style Sheets）用来定义网页的现实效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的现实效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
二：css的优点
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局，你可以为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
三：css和html的结合方式
1.style属性方式：
利用标签中style属性来改变每个标签的显示样式。
例：
<p style="background-color:#FF0000; color:#FFFFFF">
p标签段落内容。
</p>
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改
2.style标签方式：（内嵌方式）
在head标签中加入style标签，对多个标签进行统一修改。
<head>
<style type=”text/css”>
p { color:#FF0000;}
</style>
</head>
该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。
3. 导入方式：
前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。
例：
<style type="text/css">
@import url(css_3.css);
div { color:#FF0000;}
</style>
注：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。
4。链接方式：
通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。
例：
<link rel="stylesheet" type="text/css" href="css_3.css" media="screen" />
注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。
四：样式优先级的顺序
从css的字面就可以看出优先级的顺序了：样式层叠表，意思就是范围覆盖整体设计样式
相关文档：
DOCTYPE 影响 CSS 处理
Firefox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
Firefox: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
Firefox: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 heig ......
1.document.formName.item("itemName") 问题
说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];Firefox下,只能使用document.formName.elements["elementName"].
解决方法:统一使用document.formName.elements["elementName"].
2.集合类对象问题
说明:IE下,可以使用() ......
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77对FireFox
*+ht ......
IE8 自动在兼容模式下运行：
加入这么一行 <meta http-equiv="x-ua-compatible" content="ie=7" />
其内容随著指定的页面模式而更改，当要模拟IE7时，指定IE=IE7，也可以指定IE=6来模仿IE6
区别IE6与FF：
background:orange;*background:blue;
区别IE6与IE7：
background:green !important;background:blue;
......
<style>
#enlarge {padding:0; margin:2em auto; list-style-type:none; width:240px;
height:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px;
position:relative;}
#enlarge li a {display:block; width:40px; height:40px; background:transparent;
overflow:hidden; positio ......
