读了一些博客认为这是很好的未来文献目录...... 也可能是一个重要的面试问题，你会问有一天......
写一个CSS的片段将显示在新的浏览器，在旧的浏览器款有蓝色，红色，在IE6和黑色的绿色IE7中
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
再骑自行车是Buzzword的，并在web开发中，这意味着没有什么不同。 它节省能源，努力！
编写CSS和从设计创建HTML多年，我都遵循一些最佳实践，在节省时间和精力，我们俗称为“重新发明轮子”的长期追求。 一次又一次，我告诉自己，我必须创建一些模板，一些标准的可重复使用的CSS，我会用我今后的工作中的开箱。 虽然不是完全，但我还是设法实现一些目标。
在推进，再利用CSS的，我看比我自己，在为数不多的CSS框架，通常是提供给我们，并决定把他们使用，因为这些尝试和测试，并创建由许多经验丰富的开发。 更重要的是“避免重新发明”。
虽然退伍军人的常识，我已经尝试钢笔的一些关键概念/最佳做法/已进入了这些框架的建立，使尽可能循环再用CSS的想法。 希望这将有助于一些CSS开发只是最近登上了CSS的行列！
使用命名约定
这是最重要的因素，在可重复使用的CSS / HTML。 给予一致的名称，页面元素，使很少或修改页面组件和他们的风格与再利用。 按照这种说法，即使HTML5的，比其前任的重大变化而变化，是引进一些结构性的标签，即。 <article>，的<section>，的<Header>，<aside>，<nav> 的HTML5将带来什么？ ]。 甚至与HTML 4（或更低），它是最好的，就像在下面简单的例子consistanly命名您的网页的标准部分...
请记住，你的项目大多数网页，最终具有相同的核心结构元素。 确定这些共同的核心页面元素....
<div id="container"> <div id="header"> ... </ DIV> <div id="nav"> ... </ DIV> <div id="sidebar"> ... </ DIV> <div id="footer"> ... </ DIV> </ DIV>
重置默认样式（CSS的重置）：无论您使用的框架或自己写的，你必须提供的CSS重置[ 什么是CSS重置？ ]，因为它们减少或有时消除各种浏览器之间发生的视觉不一致。 在简单的话，CSS复位机制设置为零或空值的HTML元素的样式，因此重写他们可能带来的任何浏览器的默认值。 这提供了一个干净的石板，设置这些元素的任何默认的User-Agent无效[ CSS2.1的用户代理样式表默认的属性]。 所有的CSS框架的复位机制。 如果你正在写你自己的CSS重置的忠告是，如果你碰巧忘记重置键属性，它可能会导致跨浏览器问题，是非常难以调试。 记住，保持复位样式的副本，他们拖放到你创建的每一个新项目。
身体，DIV，DL，DT，DD，UL，OL，李， H1，H2，H3，H4，H5，H6， 前，表格，字段集，输入，选择，textarea的， P，BLOCKQUOTE，表，TH，TD { 边框：0px; 保证金：0; 填充：0; }
设置默认值（基准样式）元素：
当您设置（零或空）某些HTML元素的某些属性的默认值，它是要运用这些元素在每一个实例的一些风格。 这些默认设置可能会有所不同，按设计或根据你遵循的最佳做法。
最CSS框架，介绍了一些新的默认设置，除了重置浏览器默认风格。
这些默认值是无效的默认用户代理（离剥离的CSS复位），这些都将是跨浏览器保持一致。
记住，基准样式用于设置将会被用来设计样式。 例如。
HTML字体大小：77％;字体家庭：宋体，无衬线;} 强，H1，H2，H3，H4，H5，H6 {字体重量：大胆;}
常见的HTML组件和公共类的抽象风格：
几页组成的大多数项目将整个网站使用常见的HTML元素，例如一些排序形式，警报和错误，自定义弹出窗口，灯箱等，由于这些组件再次使用，整个项目，这将是有益的提供设置预定义的样式与这些组件相关的类，你可以自己节省了很多时间。
除了常见的HTML组件的定义可重复使用的样式定义，我们可以排版，颜色，甚至布局类的抽象风格有关。 我倾向于使用...像Clearfix，Font08，FontGrey，AlignL，DisplayB等常见的类
表单输入{边框：0px;背景：＃FFFFFF;填充：0px 10px; _padding：0px 0px;高度：26px;颜色：＃000000;线高度：30像素字体大小：1.1em;} 表单的TEXTAREA {边框：0px;背景：＃FFFFFF颜色：＃000000;字体大小：.9 EM;线高度：1.5em;溢出：可见;} ，fbold {字体重量：大胆;颜色：＃CCCCCC;} fgrey {颜色：＃666666;} flightgrey {颜色：＃BBBBBB;} clearfix {明确：既;} 分频器{边界：1px固体＃647B06;边境底：1px固体＃9CC00A;高度：0px;} 。displayb。displayn {显示：块;} {显示：无;} alignr {文本对齐：右}。alignc {文本对齐：中心} {浮动：权利;}。floatr。floatl {浮动：左;}
修复常见的浏览器怪癖
各种浏览器实现的CSS代码和CSS规范的支持，提供不同的级别。 这样做的结果.... “浏览器怪癖”，我们开发人员留下来处理。 尤其是，IE6的困扰的最后期限，以满足大多数CSS编码。 好消息是经验已经聚集了可能出现的可重复使用的修复这些问题（通常被称为CSS的黑客 ）。
请记住，保持这些黑客/修复方便
/ *以下变焦：1规则是专门为IE6 + IE7的。 * / * HTML。clearfix *：第一胎+ HTML clearfix { 变焦：1; }
不断完善你的CSS
最后。 如果你有启发，并打算使用一个或多个CSS框架，继承人是几个流行的快速列表....
请记住，使用CSS框架并不意味着你是懒惰的创建自己的......这意味着，你很聪明，学习别人的经验和失误，节省时间和提高生产率！！
今年的CSS完成10年内存在！ 那些已经出现了一段时间，赢得他们的面包（或不）使用CSS，那么您可能已经知道我们如何挨饿的字体很好的选择。 即使像那些缺少的字体设计师CSS禅意花园已使用CSS背景图片，字体，以取代他们的设计做一些正义的追求。 我们也尝试过的闪存/ JavaScript®黑客来实现我们的设计目标。 这绝不是一种错误的方式来获得，我们希望把我们的网页设计的字体，但肯定的是，它是不是最可取的办法。 多年来网页设计师，像我一样，已经完全依赖于十年或为他们设计的字体。
Web标准和字体格式最近的事态发展使人们有可能比其他同旧的默认字体在字体渲染HTML文本。 进来“fontface”的CSS decleration。
@ fontface provids链接到实际的字体文件，并从网上检索的解决方案。 使用@ fontface，设计者可以使用，无需冻结作为背景图片的文字字体。 实施是非常简单，如下所示，但一切美好的事物有一个反面的一部分，不是所有的浏览器支持一个单一的“ 字体类型 ”。 如果您正计划在网站中使用@ fontface需要跨浏览器支持，那么你将有来源提供各种相同的字体类型。
使用@ fontface
@字体面{ 字体家庭：'CalligraphyFLFRegular“; SRC：URL（CalligraphyFLF.eot“）; SRC：当地（“CalligraphyFLF），当地的（”CalligraphyFLF），URL（CalligraphyFLF.woff“）（WOFF'）的格式，URL（”CalligraphyFLF.ttf）格式（TrueType字体“），网址（”CalligraphyFLF SVG＃CalligraphyFLF）格式（SVG）; } @字体面{ 字体家庭：“你的字体”; SRC：URL（“字体/ font_filename.eot”）; SRC：本地（“备用名称”），当地（“Alternatename”）， URL（“字体/ font_filename.woff”）格式（WOFF） URL（“字体/ font_filename.otf”）的格式（“的OpenType”）， URL（“字体/ font_filename.svg的＃font_filename”）的格式（“SVG”）; } H2 {字体家庭：“你的字体”，格鲁吉亚，衬线;}
正如你可以看到从上面的例子，包括选择字体的字样，具有相同的字体，一组fonttypes链接。 因此人们称其为“字体工具包”。
有字体套件，明确允许使用CSS @ font-face的财产，根据最终用户许可协议（EULA）连接。
有用WebFont资源：
时间和一次又一次，当所有其他浏览器看到的行为告诉由W3C规则，IE浏览器的螺旋发展的精神，你发脾气，但这似乎并没有修复。 只是这样的一个人，这是IE7中的问题。
问题陈述：
我等其他严重的web开发中的许多人已经注意到很多时候，当有嵌套布局中的彩车上悬停，对一些链接（锚标记），含集装箱似乎移动几个像素的权利。 我曾尝试谷歌对于这个问题的解决方案，但几乎没有发现任何合理的答案，为什么发生时（可能有助于防止发生这个问题），所以我从来没有找到一个明确的解决问题的...
可能的解决方案：
出来的经验，我有通知倍，即90％，这个问题是由固定的不当行为容器中加入CSS定义缩放属性...
＃somediv { 变焦：1; }
再次理由是含糊不清的...试试这个...
在IE中的一些元素，有一个“hasLayout的”属性，这是“真正的”默认。 许多视觉CSS行为，例如，一个alpha过滤器只适用于hasLayout的元素。 {变焦：1}，似乎给目标元素的hasLayout属性 .... 有用吗？ 我不这么认为...
变焦属性似乎也支持由铬，但其使用力似乎使许多不利影响，我的布局......试试吧，如果你的作品......如果没有，书签在“CSS胡扯”此页
昨天，在谷歌浏览器的CSS重置遇到的问题，我......我想挖成用户代理样式表领域的深一点......
发现CSS2.1的用户代理样式表（对于那些不知道什么是“用户代理样式表”按照默认值表什么是用户代理样式表（规范） 。
对于CSS 2.1的用户代理样式表默认的完整列表， 请点击这里
昨天，像所有其他的“土拨鼠日”，我是工作在一些CSS /无表格布局。 所有在IE 7，FF 3和Chrome，直到突然，我看到一些联合国忽略利润率仅在谷歌Chrome。 虽然很奇怪，武侠，这是一些新的bug /问题我来到accross，终于有一些我的平凡工作中的香料。 悲伤（但很好）有固定探头几分钟内...
基本上，它看起来像谷歌Chrome忽略我的CSS复位（利用margin：0px）。 它实际上是由于用户代理样式表（-webkit的填充启动：40px）。 因此，解决办法是复位设置填充样式：0，行为不端的元素。
发生的任何元素，以防止这个问题的一个好方法是使用如下一个全球性的CSS休息
* {保证金：0;填充：0;}
什么是用户代理样式表（规格）？
以下摘录取自http://meiert.com/en/blog/20070922/user-agent-style-sheets/ ，后续环节，读取用户代理样式表的更多信息
的CSS介绍说，每个用户代理（UA，往往是一个'网页浏览器“或”Web客户端“）将有一个默认的样式表，提出在一个合理的文件的想法 - 但可以说是平凡 - 方式。 CSS 2的表示，符合用户代理必须申请1默认样式表的行为好像他们做的和，1用户代理的默认样式表应该呈现方式，满足文档语言的一般介绍期望文档语言的元素;的CSS三是可能是相同的想法。
由于CSS规范离开它是否使用默认显示一个“真实”的样式表或不实现，它不令人吃惊的是，你不觉得在每一个浏览器的安装文件夹的默认样式表。 微软的Internet Explorer以及歌剧不同，例如（据我所知），Gecko的浏览器如Firefox和Netscape Navigator的（看“html.css”），但也Konqueror的，而简单地理解他们的默认样式。
另一个快速啧啧。 下面是一些简单而漂亮的使用CSS的权力，但困难concieve（肯定不是我）开始。 添加阴影效果，对于我们许多人可能是一个大蛋糕peice，使用一些图像编辑工具，如Photoshop ANF烟花等
为什么，我选择了使用CSS的下拉阴影的原因是，通常在创建网页设计/ HTML应用程序，要求保持迭代。 我的意思是在现有的网站与许多图片，像显示freinds列表或图片库的，将很难重新处理整个负载已经卸载已添加或删除的阴影图像，该问题。
所以，如果你做了一些前瞻性思维，而创造的HTMLS添加这些额外的部门或通常的情况是，你有一个循环逻辑在XSL，PHP生成这些图标/缩略图。 JAVA或任何其他的编程/脚本语言，你可以随时添加，然后仅仅是为客户不断变化的需求，使用CSS的显示属性，这些阴影显示和隐藏的问题...我没有带这种前瞻性思维在此之前......但ahev现在开始！
在下面的例子中，原始图像是无阴影和应用需要的dropshadows！ 仅此外，我已经走了一点点额外的，使用约我刚才图坦卡蒙过关（Well!这些可能是最短的各种教程，所以它是唯一的理由叫他们“啧啧”的）， 使用CSS clip属性为炫耀
我为什么要明白这一点吗？？ ... Humm！！！
CSS的作家中的大多数人都同意，CSS Clip属性可能是最未使用CSS属性之一。 这是我的真实，是最幸福的忽视它，直到我开始修改的MooTools的两个旋钮（PIN）滑块组件（带范围指示器） 。
从一个组件用户有一个很好的建议，修改Slider组件使用裁剪图像（对可变宽度师）视野下，以表明滑块范围。 就这样来到我的时间来输入的乐趣，但联合国包机（我当然）的CSS Clip属性的水域。
好吧！ 它可以是多么困难？ 没有太多... YES和NO。 使用CSS Clip属性的语法是很正直的，但的含义/ usuage，是有点croocked。 一个像我的记忆中，每次我坐下来返工我滑块脚本...我有随时注意这个剪辑属性的用法，要提醒自己，我在我的脚本创建的逻辑.... 因此！ 认为笔下来，希望记住它的未来（也似乎谁的利益猛然一惊CSS clip属性）
什么是CSS的剪辑呢？
剪辑的视觉效果模块的CSS 2.1的一部分。 简而言之，它的工作是正在修剪的对象上放置一个可见的窗口，因此裁剪图像，而不必创建额外的文件（我已经把滑块组件，以更好地利用此功能创建缩略图 
）
使用CSS Clip属性，你可以创建一个使用矩形形状的裁剪。 需要像其他许多CSS属性（如利润率，填充等），使用矩形，四个坐标上，右，底部，左（TRBL）。 这个属性croocked性质的反映，当你仔细一看，剪辑是如何计算的裁剪区域使用这四个坐标（大脑发送到折腾了一会儿）。 现在你混淆底部开始从顶部，并有权从左边开始。 。 你明白我说的话吗？ .... 因此，这个职位...
这有点混乱，可以很容易地消失了，用这CSS剪辑/ Rect属性的视觉解释如下！！！
我们已经开始的任务是剪辑成方正寻找图像下面的缩略图（还广角图像）
| |  |
| 原Thumbnal /图像 | Sqaure Thumbmail剪辑要求 |
之前，我们不得不处理与CSS创建页面布局，调整表格单元格内的一些内容似乎只是孩子的发挥。 只需设置“ 对齐 ”或“valign”属性表中有您所选择的路线，这块蛋糕！
使用CSS布局，尽管我们有“垂直对齐”为元素的属性，它不似乎是简单的“ 对齐 ”或“valign”属性。 为了更specifiic“ 垂直对齐 ”似乎从来没有解决您的任何问题，特别是如果是写一个跨浏览器的CSS。
如果没有使用HTML表格，对象为中心的问题，是图片或一些文字内含有分裂，可能是每个UI / CSS开发人员在某些点的噩梦。 这一问题作进一步的调整，如果要居中的对象是动态的性质，即当它的高度是可变的推断您的后顾之忧（未知的高度）。
虽然有没有已知的直线前进的解决方案，跨浏览器，我们必须处理的范围，将工作，我曾试图在没有到达的解决方案似乎工作中，我曾尝试在一些浏览器（IE6，IE浏览器7 FF）。
解决方案：
在浏览器如Mozilla，Opera和Safari，但奇怪的行为“ 垂直对齐 ”的属性可带来的感觉，只是含分工“ 显示 ”属性设置“ 表格 ”（显示：表单元）， 。
问题仍然存在与IE浏览器的家庭，谁，但似乎并没有理解“ 细胞表 ”财产和无知，因为他们，他们就忽略它。 虽然简单，广告几多个DOM元素的HTML使事情发生，如下的解决方案。
CSS和HTML看起来像这样
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}的HTML： -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/>意见：3456 </ DIV>
</ DIV>
</ DIV>
结果看起来像这样： -
顶部对齐的CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}的HTML： -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/>次：1234 </ DIV>
</ DIV>
</ DIV>
结果看起来像这样： -
底部对齐的CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
的HTML： -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/>意见：1234 </ DIV>
</ DIV>
</ DIV>
结果看起来像这样： -
好像年龄，因为我试图找到一个合理的解决方案，这对准问题。 但现在，这一解决方案，我觉得在小和平。
希望有一天
上述解决方案 （下载448次）可理解.. 下载的CSS和HTML ，CSS是没有得到优化
注：顺便说一下，这些都是一些我点击图片的缩略图...
非IE浏览器的CSS：没有消息，如下面的例子CSS子选择，似乎并不在IE浏览器的CSS开发。
例如DIV>跨度一些CSS，这意味着“当一个span元素的表决元素的子（不是一个孙子或伟大的盛大孩子等）”。
但我们用这种正反向我们的优势。 从历史上看，孩子的选择已被用于隐藏IE 的CSS命令。 简单地把html>body任何CSS命令 IE 前将忽略它：
html>body .foo { CSS commands go here ;}
这工程，因为<body>总是一个孩子<html> -当然可以永远是一个孙子或曾孙<html> 。
现在，IE 7的了解孩子的选择，你有大于号后直接插入一个空的注释标记，然后IE 7将不明白这个选择（谁知道这是为什么？），因此会完全忽略这个CSS命令。
html> /**/ body .foo { CSS commands go here ;}
如果尚未看到这些之前，通过以下只读
