css麻烦事

重置

@charset "utf-8";
/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}
body{font: 12px/1 Helvetica, Tahoma, Arial, \5b8b\4f53, sans-serif;}

兼容性

所有的IE可识别：

1. < !--[if !IE]> 除IE外都可识别<![endif]-->
2. < !--[if IE]> 所有的IE可识别 <![endif]-->
3. < !--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
4. < !--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
5. < !--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
6. < !--[if IE 6]> 仅IE6可识别 <![endif]-->
7. < !--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
8. < !--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
9. < !--[if IE 7]> 仅IE7可识别 <![endif]-->
10. < !--[if lte IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
11. < !--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

IE6 专用 
_height: 100px;  

IE7 专用 
*+height: 100px; 

IE6，IE7共用

*height: 100px; 

IE7、FF 共用 
height: 100px !important;

详解

ie6中使用PNG图片

*html #image-style { background-image: none; filter:progid:DXImageTransform .Microsoft.AlphaImageLoader (src="filename.png", sizingMethod="scale"); }

iepngfix

CSS的继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。

样式定义：

    body {color:#f00;}

代码：

    <p>CSS<strong>继承</strong>测试</p>

演示效果

继承是CSS重要的一部分，但有一些属性不能被继承，如：border, margin, padding, background等。

优先级

基本规则

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

1、统计选择符中的ID属性个数。

2、统计选择符中的CLASS属性个数。

3、统计选择符中的HTML标记名个数。

最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数(css2.1是用4位数表示)。( 注意，你需要把数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

例如：

1、每个ID选择符(#someid)，加 0,1,0,0。

2、每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。

3、每个元素或伪元素(:firstchild)等，加0,0,0,1。

4、其它选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种特性，后面会解释。

三、特性分类的选择符列表

选择符	特性值
h1 {color:blue;}	1
p em {color:purple;}	1+1=2
.apple {color:red;}	10
p.bright {color:yellow;}	1+10=11
p.bright em.dark {color:brown;}	1+10+1+10=22
#id316 {color:yellow}	100

通过上面，就可以很简单的看出，HTML标记的权重是1,CLASS的权重是10,ID的权重是100，继承的权重为0(后面会讲到)。

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

优先级问题其实就是一个冲突解决的问题，当同一个元素(内容)被CSS选择符选中时，就要按照优先级取舍不同的CSS规则，这其中涉及到的问题其实很多。

其它

1、行内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<div style="color:red">blah</div>的样式，而外部定义指经由<link>或<style>卷标定义的规则。

2、有!important声明的规则高于一切。

3、如果!important声明冲突，则比较优先权。

4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。

5、CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

关于经由@import加载的外部样式，由于@import必须出现在所有其它规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权冲突时是占下风的。

还需要说一下，IE是可以识别位置错误的@import的，但无论@import在什么地方，它都认为是位于所有其它规则定义之前。

书写规范

一.使用css缩写

　　使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《 常用css缩写语法总结 》。

二.明确定义单位，除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。

在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。

只有两个例外情况可以不定义单位：行高和0值。

除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

三.区分大小写

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

四.取消class和id前的元素限定

当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如：

div#content { /* declarations */ } 
fieldset.details { /* declarations */ }

可以写成

#content { /* declarations */ } 
.details { /* declarations */ }

这样可以节省一些字节。　

五.不需要重复定义可继承的值

CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。 但是要注意，浏览器可能用一些默认值覆盖你的定义。

五.同时使用两个类

<p class="text side">...</p>

同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

对于一个ID，不能这样写<p id="text side">...</p>也不能这样写

命名

• 一些常用的命名

class

页头：header 
登录条：loginbar 
标志：logo 
侧栏：sidebar 
广告：banner 
导航：nav 
子导航：subnav 
菜单：menu 
子菜单：submenu 
搜索：search 
滚动：scroll 
页面主体：main 
内容：content 
标签页：tab 
文章列表：list 
提示信息：msg 
小技巧：tips 
栏目标题：title 
加入：joinus 
指南：guild 
服务：service 
热点：hot 
新闻：news 
下载：download 
注册：regsiter 
状态：status 
按钮：btn 
投票：vote 
合作伙伴：partner 
友情链接：friendlink 
页脚：footer 
版权：copyright 

ID

外　套：　　wrap 
主导航：　　mainnav 
子导航：　　subnav 
页　脚：　　footer 
整个页面：　content 
页　眉：　　header 
页　脚：　　footer 
商　标：　　label 
标　题：　　title 
主导航：　　mainbav（globalnav） 
顶导航：　　topnav 
边导航：　　sidebar 
左导航：　　leftsidebar 
右导航：　　rightsidebar 
旗　志：　　logo 
标　语：　　banner 
菜单内容1： menu1content 
菜单容量：　menucontainer 
子菜单：　　submenu 
边导航图标：sidebarIcon 
注释：　　　note 
面包屑：　　breadcrumb(即页面所处位置导航提示） 
容器：　　　container 
内容：　　　content 
搜索：　　　search 
登陆：　　　login 
当前的　　　curr

技巧

让固定宽度的页面居中

让容器在页面居中显示, 先设置宽度，然后把margin设置为auto.

#wrapper{ margin:0 auto; width:960px}

图片替换技术

用文字总比用图片做标题好一些. 文字对SEO都是非常友好的.

HTML:

<h3><span>Main heading one</span></h3>

CSS:

h3 { background: url(heading-image.gif) no-repeat; }
h3 span {
position:absolute;
text-indent: -5000px;
}

你可以看到我们对标题使用了标准的<h3>作为标签并且用css来将文本替换为图片。

text-indent属性将文字推到了浏览器左边5000px处, 这样对于浏览者来说就看不见了.

给行内元素定义宽度

如果你给一个行内元素定义宽度,那么它只是在IE6下有效。

所有的HTML元素要么是行内元素要么就都是块元素。

行内元素包括: <span>, <a>, <strong> 和 <em>. 块元素包括<div>, <p>, <h1>, <form>和<li>

你不能定义行内元素的宽度, 为了解决这个问题你可以将行内元素转变为块元素.

span { width: 150px; display: block }