- Web前端开发必备工具 更新为2009.11.8
- 各种html+CSS实例效果 更新为2009.10.16
- Web前端开发电子书 更新为2009.12.6
- 各种浏览器css hack 更新为2009.8.7
- 各种CSS bug与技巧 更新为2009.12.3
- 各种CSS+JS实例效果 更新为2009.10.24
- Web前端开发必备手册 更新中…
CSS查找匹配原理和简洁高效
用了这么多年的CSS，现在才明白CSS的真正匹配原理，不知道你是否也跟我一样？
先来看一个简单的CSS：
DIV#divBox p span.red{color:red;}，按习惯我们对这个CSS 的理解是，浏览器先查找id为divBox的DIV元素，当找到后，再找其下的所有p元素，然后再查找所有span元素，当发现有span的class为red的时候，就应用该style。多么简单易懂的原理，可是这个理解却是完完全全相反、错误的。
Show more »
CSS清除浮动
使用div+css（姑且这样叫，虽然我也不喜欢，但是叫什么呢？）布局的好处不用多说，经常性地会使用到float，那么清除浮动就是必须要做的，而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。
常用的清除浮动的方法有以下三种。
此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景。
提示：你可以先修改部分代码再运行。
腾讯Q组内部考核题
这个题目是一个网友树人发给我的，听说他是问鬼哥要的，我打开看了看，原来是以前看见过的，只是没有做，本来打算计划这周不加班，周五晚上开始做这个试题，结果突然来了项目要做，没都办法周六得去加班啊，周五晚上也加了的。昨天晚上我就用了几个小时，今天中午起来吃了个面包就继续，搞了一下午终于搞出来了。话说这道题是以前我做过的面试题的综合而已，不过里面有很多值得学习的地方，绝对值得大家一做。
详细题目：
http://www.hemin.cn/demo/tengxunMS10-01-17/考核题关注.doc
http://www.hemin.cn/demo/tengxunMS10-01-17/q_group.psd
答案：
提示：你可以先修改部分代码再运行。
测试：IE6,7.8,FF3.6.op10,chrome
我推荐的书籍
，自己很喜欢买书，一直都是一有事没事的看看书。发现知识真是一辈子的学不完啊，可是为了前途为了生活为了幸福为了自己的爱好，不得不让我去学呀。很小的时候梦想老了的时候开个书店，可以边卖书边看书，学到了知识又可以赚到钱。想起就心里特别高兴。呵呵。言归正传下列推荐我最喜欢的书籍：
前端开发:
Show more »
CSS框架
CSS框架好处：
1、开发效率的提高。
如果你是一个企业建站的前端开发，相信在大部分时间里进行着同类站点的代码工作。定义好的框架可以大大提高你的工作效率，避免一些常见的错误。如果你的工作是按件计费的，你的报酬一定会比别人多。
2、规范代码命名。
在多个站点中你可能会用到一些同样的CLASS或ID。如果你有一套完善的css框架，很快你就能对你的每一个站点的代码进行通读。不用浪费时间在代码的阅读上。
3、更好的团队合作
有些公司会将一些稍大的站点的前端代码分成若干子项目。有过此类经验的朋友应该对这种开发方式深感郁闷，要注意公用css，还有注意相互之间的代码配合。久而久之，废弃代码越来越多，互相之间也难以阅读。如果建立好合适的CSS框架，大家可以减少很多不必要的错误，提升产品质量和工作效率。
Show more »
CSS Sprites图片合并
CSS Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需 顾忌这个问题。
比如：
当用户往U盘中拷200张图片，会等很久。但是如果弄成一个文件，再拷贝就会快很多。
CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。
Show more »
CSS Reset
知道CSS Reset是什么吗？通常情况下，它也被写成Reset CSS，即重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以，有了CSS Reset，以让网页的样式在各浏览器中表现一致。
正在使用CSS的你，用过CSS Reset吗？当然，或许你用了，却不知道正在用，比如你可能用到：
- * { padding: 0; margin: 0; border: 0; }
这也是一款CSS Reset的方法，让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法，也是最简单，最安全的方法，不过，也是最占用资源的方法。对于小型的网站来说，用这个并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，刚需要有选择地进行CSS重设，以减少资源浪费。下面是Yahoo的CSS重设代码，也是受最多人喜爱的CSS Reset方法，YUI选择的方法是：
Show more »
css长度单位
今天看见部分国外网站里面代码的单位用的都是em，感觉里面的很多单位初学者都不认识吧，pt啊，ex啊什么的，我感觉有必要发篇这样关于css的长度单位的文章。
在写css的时候最常用的长度单位是px(像素)，经常看到的还有em，pt等等，其实css中的长度单位一共有8个，分别是px，em，pt，ex，pc，in，mm，cm。
1、px：像素(Pixel),相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。
譬如，Windows的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。
2、em：相对长度单位。相对于当前对象内文本的字体尺寸。
如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
3、pt：点(Point)，绝对长度单位。
Show more »
面试题：纯CSS菜单和纯CSS选项卡
昨天把一部分项目做完，今天早上一来就上蓝色看了下，感觉蓝色里面的zhiz先生好学，面试题出现困难了就特意帮他写了，如看了自己好好研究下。
1.纯CSS菜单
提示：你可以先修改部分代码再运行。
CSS优先权的计算
每个ID选择符(#someid)，加 0,1,0,0。
每个class选择符(.someclass)、每个属性选择符(形如[attr=”"]等)、每个伪类(形如:hover等)加0,0,1,0
每个元素或伪元素(:firstchild)等，加0,0,0,1
其他选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity，后面会解释。
按这些规则将数字串逐位相加，就得到最终计算得的specificity，然后在比较取舍时按照从左到右的顺序逐位比较。
即:符合 行内样式 > ID样式 > 类别样式 > 标记样式
各类选择器的权重计算:
Show more »
CSS样式命名规范
刚开始学HTML和CSS的时候就到网上看了一篇CSS样式命名规则文章，经过一小段时间的工作经验，今天回头来看这个命名规则感觉还有要增加的内容。
1.样式命名
外 套： wrap
主导航： mainnav
子导航： subnav
页 脚： footer
整个页面： content
页 眉： header
页 脚： footer
商 标： label
标 题： title
Show more »
