.test{
    height:20px;
    background-color:orange;
}


ff识别

-----------------------------------------------------------

*+html .test{/*IE7*/
    height:20px;
    background-color:blue;
}


IE7浏览器
------------------------------------------------------------



*html .test{/*IE6*/
    height:20px;
    background-color:black;
}

IE6浏览器

-----------------------------------------------------------------------


IE6加*html，而IE7加*+html，暗示加了一个版本。

我们制作页面很多情况下碰到div是空白的<div></div>

如果给div元素<b>设置了宽度<b>时，比如width:100%，此时div在IE中（IE6，IE7）将占据物理空间，而在FF中不占据物理空间（正确理解）。为了表述直观，将样式直接写在元素标签内：

<div style="width:100%"></div>

此时在IE中到底是什么在影响着最终的显示，又是如何解析的呢？

可能的影响因素：字体大小（font-size），字体行高（line-height），高度（height），溢出（overflow）

我们对上面的代码逐一添加过滤属性（具体的过程有兴趣的朋友，可以私下里实验一下，“自己动手，丰衣足食”！）

在测试的过程中，你会发现IE6和IE7的解析也不尽相同，比如在给div设置了line-height:0; height:0; 的样式后，IE7中显示正常了，不再占据物理空间了，而IE6却依然我行我素，亦或是悲！

最终的测试结果，最简单的方法是，给div设置高度（height）和溢出（overflow）属性：

<div style="width:100%;height:0;overflow:hidden; "></div>

CSS兼容问题一直困扰着CSSer，面对各浏览器，往往感觉束手无策，愁眉不展。CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法，在各浏览器厂商解析CSS没有达成一致前，我们只能用这样的方法来完成这样的任务。
　　
　　我进行前端开发的时候，测试用的浏览器大致有: IE7、IE6、Opera9（文章撰写时版本为9.25 8825），Safari3（文章撰写时版本为3.0.4 523.15），Firefox2（文章撰写时版本为2.0.0.11）等。
　　
　　在正常的 selector { property:value; } 的基础上常会根据具体情况为相同元素使用Hack以达到浏览器间统一，更详细的CSS兼容知识，欢迎关注52CSS.com的相关文章。

font-style设定斜体　如：font-style: italic;
font-weight设定文字粗细　如：font-weight: bold;
font-size设定文字大小　如：font-size: 12px;（或者9pt参考CSS手册http://www.52css.com/css/）
line-height设定行距　如：line-height: 150%;
color设定文字颜色（注意不是font-color）　如：color: red;
font-family设定字体　如：font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体

见解后：

font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;}

定义规则：font-style font-weight font-size line-height font-family；而color设定文字颜色需要单独进行定义。

一、检查HTML元素是否有拼写错误、是否忘记结束标记
　　即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

二、检查CSS是否正确
　　检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

三、确定错误发生的位置
　　如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。当然，在测试前请注意原来代码的备份。

四、利用border属性确定出错元素的布局特性
　　使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

关于段落<p></p>相信大家已经都在自己的工作中开始关注并应用了。因为那真的是非常简单的事，只要你愿意你随时都可以开始让你的页面代码更为标准化。如果你已经开始跟着《WEB标准能有多难？》在自己的工作中循序渐进地运用WEB标准了，那么这次的内容会让你更进一步的了解到关于段落里的细节。要是你刚刚准备好开始没关系可以先看看《从p开始，循序渐进》，然后再看本文。

昨天晚上我决定了放弃在这个时候插入CSS内容，继续深入XHTML的内容。也许大家会觉XHTML远没有CSS有趣，是的，的确如此，CSS能变化出无数看得见的可能。而XHTML只不过是为了机器与程序准备的。但是事实上XHTML的重要性要比CSS重要得多。我们都知道网页本身的作用是用以承载信息、数据、知识，我们这里暂把这些称之为“内容”。网站的第一要素就是内容，没有内容的网页可能就不能叫网页了，但是如果你把一堆的内容放在一起没有标签去区别段落、重点、引用等那么内容将挤在一起，没办法阅读，就算你是个CSS的高手，在一堆没有XHTML标签的文档中让你去美化它，你也无从入手。是的内容需要XHTML去区分内容并且给CSS以用武之地。如果说内容是内脏与灵魂，CSS是皮肉，那么XHTML就是骨骼。

      内部链接文字：10分
　　标题title：10分
　　域名：7分
　　H1,H2字号标题：5分
　　每段首句：5分
　　路径或文件名：4分
　　相似度（关键词堆积）：4分
　　每句开头：1.5分
　　加粗或斜体：1分
　　文本用法(内容)：1分
　　title属性：1分 (注意不是title>, 是title属性, 比如a href=… title=”)
　　alt标记：0.5分
　　Meta描述（Description属性）：0.5分
　　Meta关键词（Keywords属性）：0.05分

css兼容的一些小技巧

发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？

CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。

Specificity 具体的计算规则：

当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出五种提高CSS文件可维护性的方法，也就是一种较好的CSS样式指南。

1.分解你的样式

对于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，可以分别将 全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。

而对于较大的工程，这样显然不会有什么效果。此时，就需要将样式分解到几个不同的样式表文件。下面的master stylesheet 就是这一方法的例子，它的工作主要是导入其他样式文件。使用这一方法不仅能优化样式结构，而且有利于减少一些不必要的服务器请求。而分解文件的方法就有许多种，master stylesheet 使用了最常见的一种。

在实体的css布局中，望望会出现很多很多多余的代码，这对速度不太用例，所以我们需要进一步的缩写来提高速度^_^看下面·······

.t1 {
    padding-top: 3px;
    padding-right: 20px;
    padding-bottom: 3px;
    padding-left: 20px;
}


缩写后的样式是：

.t1 {
    padding: 3px 20px 3px 20px;
}


padding的四边值依次对应了top(上)、right(右)、bottom(下)、left(左)。


当left(左)没有时，默认值为right(右)的值，当bottom(下)没有时，默认值为top(上)的值

.t1{
    padding: 3px 20px;

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：

颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸
通常有下面四种书写方法:

property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;

边框(border)
边框的属性如下：

border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)
背景的属性如下：

background-color:#f00;
background-image:url(http://admincss.com/background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句：background:#f00 url(http://admincss.com/background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：

color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
字体(fonts)
字体的属性如下：

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

列表(lists)
取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

list-style-type:square;
list-style-position:inside;
list-style-image:url(http://blogbeta.blueidea.com/image.gif);
可以缩写为一句：list-style:square inside url(http://admincss.com/image.gif);

   在制作网站布局中，图片的自适应功能是一个非常重要的功能，一般的用处是来防止图片撑开容器而对图片的尺寸进行必要的控制。有一个比较简单的方法来实现：

   简单使用javascript判断浏览器版本号