学无止境的CSS(xHTML+CSS技巧教程资源大全)

在这里先感谢帕兰映像，各位读者瞪大眼睛准备好哦，以下是原文:

我总是对每一个想学CSS的朋友说: “学CSS真的很简单，一个星期就搞定。” 但真的这么简单吗？魔方也很简单，拿到手里就知道怎么玩了，但最高境界却不是几天或几个月就能修成的，甚至根本就不可能达到，永远需要提高，看似痛苦，同时也享受升华的乐趣，CSS也一样，痛并快乐指的就是这些东西吧。
本文里面收集一些有关CSS的技巧、教程、工具和观点等，其中一些你也许早就运用的炉火纯青，也可能有的你听都没听说过。不管是新手还是高手，大家都继续学习吧。
一，Web 标准要玩游戏，就得先了解规则。要学CSS，就应该先了解一下Web标准。尽管看上去不是必须的(我在学CSS之前，根本不知道也不想知道Web标准是 个啥玩意儿)。应该说，你是否学Web标准，跟你是否能学会CSS没有什么关系，但跟你能写出什么样的CSS，以及XHTML或其它代码，跟你能做出什么 质量的网页有很大的关系。
其实我自己对Web标准也不甚了解，尽管我看过不少关于Web标准的文章和书。(我总是这样，对学术性的概念名词永远都似懂非懂的)，所以每次谈到Web标准，我头里就会有一堆问号:
[li]Web标准真的有利于SEO吗？ Web标准的动机难道就是SEO? 出于SEO动机的Web标准是否会失去一些Web标准真正的本质? [li]如何才算符合Web标准? 仅仅是通过W3C的代码验证，你就觉得自己符合Web标准了? [li]Web标准是为了提升用户体验，而一个对用户友好的网站其代码应该写得非常简洁实用，而一个使用简洁实用代码的网站是有利于SEO的。这个逻辑似乎合情合理，但在实际运用中却又总有这样那样的冲突… [/li][/ul]我们应该把Web标准看成一份”道德约束”还是”法律强制”呢?我个人比较乐意看成前者，努力靠拢就好了，但没必要为了标准而标准，自己为难自己。
[li]你已经花了50%的时间完成了一个项目的90%，如果余下的10%又需要你花50%的时间去弄，是否值得? 尤其是这种情况发生在: 你的90%已可以让用户在各个浏览器下正可常浏览，而那10%仅仅是为了通过W3C代码验证。这时候你或许该考虑下，你千辛万苦的通过W3C验证是为了符 合Web标准还是为了满足自己小小的虚荣心? [li]特喜欢跟别人争论”DIV+CSS”的说法是错误的，应该是”XHTML+CSS”，你有没有做过类似这样的事儿? 还打心里为自己科学家般严谨的态度而感到自豪。但事实上，叫”DIV+CSS”的人，没有哪个傻到整个页面的元素都使用DIV。这就像当你说”吃饭”时，你也不光是吃白花花的大米。 [/li][/ul]呃，本来只是想随便写点文章引语，闲扯太多了，还是看看下面这些有关Web标准的东西吧，有助于你了解这个东西。
一些有Web标准的文章 [li]什么是Web标准? [li]Web标准概念入门 [li]使用Web标准的好处 [li]对Web标准的理解 | CSS森林 [li]Web standards in China (英文) | 中译 – Web标准在中国 [li]步向语义网的几句话 | 样式之美 [li]Web标准和网站重构 (PDF文档) [li]WEB标准专题之精华文章汇总 [li]Web标准的未来，浏览器的未来，应用的未来 | YunTian[/li][/ul]
[li]Web标准常见问题整理 | 蓝色理想BBS [li]网站重构Web标准视频教程 | YuYaDong [li]Web标准要求一览表 [li]初学Web标准的几个误区 [li]你在骗W3C，还是在骗自己的客户 [li]Six Revisions 访谈：大学里的 Web 标准 上，下 [li]中国的Web标准现状 [/li][/ul]验证HTML，CSS及RSS源的14个免费工具
这篇译文里介绍了14个工具可以方便的验证你的CSS以及HTML和RSS源。你别看我上面说了一堆看似反验证的话，其实我也挺在乎这个东西的，我也每次都玩验证，只是当碰到很难解决无关痛痒的东西时，我不会为难自己。我只是想告诉你，别对自己太苛求了，别让自己太累。

二， CSS布局和定位我不是什么Web前端观察家，我个人发现的两个可能并不正确的网页布局趋势是: 两栏和水平条。
说两栏是趋势似乎有点唬烂，两栏本身就是最基本最常用的布局，但之所以成为更加流行的网页设计趋势得益于Web 2.0的流行，你很少会看到一个Web 2.0网站把自己做成门户般的杂志型布局，大家都力求简洁。当然，在国内，还是有很大一部份个人站长和企业喜欢把自己的网站挤得密密麻麻，Magazine的非常厉害。这恐怕也不能说谁前卫谁落后，好的Magazine布局确实能让人产生一个感觉或错觉: 这个网站很专业，做的很大，很优。我个人是希望简洁两栏真的能成为趋势，每次进入门户型布局的非门户级网站时，就感觉自己掉进了一堆链接的海洋里。
水平条成为趋势则源于宽屏浏览器的普及，它能让你的网页不管在各种宽屏分辨率下显得协调美观。比如帕兰映像的网页主体是960像素固定宽度，我的电 脑分辨率是1440*990像素，如果没有水平条，总感觉网页太空，尽管留白也是一种设计技巧，但并不是这样的留白。尽管还有另一种解决方案是自适应宽度，但我个人觉得，对于大多数网站来说，自适应宽度并不是一个好方法，它解决了宽度的问题，却又让网页产生了很大其它破坏视觉的问题。
还是让我们看一些关于CSS布局的技巧吧。

15款网格布局生成器
网格布局的页面能给人简洁明快、层次分明的感觉。之前帕兰映像里面也介绍过一些网格布局相关的文章: 探索极简派设计/Minimalist Design，32个网格布局的网页设计欣赏和960网格系统等。如果你也想制作一个网格布局，可以看看这些在线生成器。
9个永不过时的CSS 3栏布局技巧
五种方法让CSS实现垂直居中
CSS布局口诀使用
CSS创建三列固定布局结构
使用CSS完美实现垂直居中的方法
渐进增强式布局探讨（上）、（下）
CSS布局大全43个PSD转xHTML+CSS网页布局及导航教程
CSS Position详解css定位与定位应用跨浏览器的CSS固定定位{position:fixed}
32个网格布局的网页设计欣赏
三，CSS Sprites(CSS图片合并技术)
有人称其为CSS妖精，CSS小鬼等，听上去是蛮可爱蛮特别的，但会让人纳闷这倒底是个什么东西。最近发现大家开始把这项CSS技术称为图片合并，感谢还是蛮贴切的。
CSS Sprites目前已经成为非常流行的CSS技术应用，你随便到一个经常逛的著名网站看看，会发现大家都在使用这项技术，比如淘宝、谷歌、豆瓣、土豆等等等等。简单的说，CSS Sprites主要就是提高网页载入速度和防止图片加载延迟，这对于大流量的网站来说是非常重要的。

学习CSS Sprites是件很简单的事情，比较麻烦的是合并图片和写CSS时的定位，更麻烦的后期的维护管理。但不管怎样，做为一项有效实用的CSS技术来说，如果你是一个Web前端开发者，你很有必要掌握这项小技术。
CSS Sprites的一些技巧 | 前端观察
CSS 前景图片合并技术 | 芒果
CSS Sprites(CSS图像拼合技术)教程、工具集合
CSS Sprites + 圆角
CSS Sprites, 图片切割与优化技术
四，CSS优化我个人对CSS优化的看法是: 在语义化的前提下，对代码进行精简。如果是大型网站，则又考虑CSS的结构化和模块化。所以CSS的优化就包含了命名规范、CSS Reset、语义化、结构化和模块化等等。

至于CSS与SEO一说，倒还真不敢苟同。不过，不管它们是否有关联，你都应该尽量去学着写出一份拥有良好语义并尽量简洁高效的CSS样式表。
8款在线CSS优化工具/组织和压缩CSS
CSS代码精简工具和技巧
17款加速效率的CSS工具
10个CSS简写技巧让你永远受用
注重SEO搜索优化的div+css命名规则 | 知更鸟
Web UI 设计(网页设计)命名规范
目前比较全的CSS重设(reset)方法总结
CSS代码命名惯例语义化的方法
模块化 CSS – 更有效地管理CSS | 幸福收藏夹
编写具有良好结构的CSS文件
CSS中属性的书写顺序
五，CSS、IE和Hacks想一想，我们花上一大把的时间去研究CSS Hack，研究IE为何如此的叛逆，做项目时可能就因为某个兼容问题给卡死个半天，这些时间如果用来学一门其它技术，可能早已修炼成该技术的专家了，并且是有用的。而精通Hacks并不是件值得骄傲的事情，而是所有开发者的无奈和悲哀。

没关系，我是这么安慰自己的:当年没有CSS的时候，多少站长花了比现在10倍甚至百倍的辛苦来建站和维护，当有CSS后，他们默默的选择过渡，而不是难过的去自杀。那个不是说了嘛，往往都是事情改变人，人改变不了事情，我们能做的，只能是适应每个过程。
10个实用但IE不支持的CSS属性
修正IE6的bug的10个技巧
IE6 BUG大全
目前非常全面的CSS兼容问题资料汇集
IE6方程式六，你可能不知道的一些CSS技巧就像本文开头所说的，CSS像魔方一样，有数不清的玩法，即使你是高手，永远都有你不了解的地方。有一些CSS技巧并不常用，一些CSS技巧完全是实验性质的，还有一些完全甚至是代码写错误打误撞搞出来的结果，比如本站之前介绍的CSS实现的标签云远视效果。

CSS content, counter-increment 和 counter-reset详解
使用CSS选择器创建个性化链接样式
CSS Sticky Footer: 完美的CSS绝对底部
没有div没有float没有clear没有hack的超强CSS布局
一个超强的CSS 布局，没有div，没有float, 没有clear, 没有hack，没有和你开玩笑，确实是一个CSS 布局。出自TJKDesign 之手，你可以查看DEMO 演示 或阅读该布局设计师的文章说明。
一个关于透明度继承的问题
使用CSS为图片添加更多趣味的5种方法
101个CSS技术高级应用教程(上)(下)
53种网页设计师必备的高级CSS技巧
七, CSS 3
目前主流浏览器Firefox、IE7/8、Webkit等都已经部分地支持CSS3。因此提前了解CSS3是十分必要的。作为一个真正的CSS开发者，走在别人的前面提前了解、运用、研究CSS3也是十分 必要的。
CSS3.0相关资源和参考手册收集整理
一些有关CSS 3技巧和教程的资源整理。
CSS 3入门
如果你关注CSS，那么你一定听说过CSS3,它是本应该在几年前问世的下一代样式表语言。是的，CSS 3样式文档至今还没有最终完成。如果你已经急不可待了，那么你也不必感到孤独。虽然这它还没有最终定型但是很多浏览器厂商已经开始支持其中的一些新特性了。
20个对学习CSS3大有裨益的资源
本文列出了20个对你学习CSS3大有帮助的网站资源。
使用CSS3和RGBa创建超酷的按钮
不需要图片，只需要充分利用CSS3的圆角、盒子阴影和文字阴影效果，同时使用RGBa色彩，就能实现非常漂亮、非常流行的文字阴影圆角按钮效果。
你应当了解的5个CSS3新技术 | 彬Go
CSS是众所周知且应用广泛的网站样式语言，在它的版本三(CSS3)计划中，新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些效果，但了解它们还是必须且很有趣味性的。本文向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。
25个高级CSS技巧教程
能用CSS实现的效果，就尽量不要使用JS。但如果使用CSS需要很繁琐的代码，那用CSS也不见得是好事儿。这里是25个高级CSS技巧，有助于你提高你的CSS水平，让你对CSS的掌握更上一个台阶。
八，更多CSS相关资源
50多个极富创意的CSS演示和教程
SS可以让网页设计中实现很多丰富和独特的技术. 今天,我们就围绕着CSS技术展示全面的探讨, 为你找寻一些最具创造性的CSS技术和使用技巧. 绝对值得喜欢网页设计的你一看.
5个CSS书写技巧
nettuts带来的5个css书写技巧9(link)，简单翻译一下它的中心思想。包括一些代码书写顺序、CSS Reset等，不一定对，但可以做参考。
15个CSS框架简介
对于小的Web开发项目来说，CSS 框架并不一定就适用，至少不见得能提高多少工作效率。但对于一个开发团队和规模比较大的项目来说，CSS 框架不仅能加快设计进程，更能解决网站改版中带来的诸多麻烦和问题。
8个简单和实用的CSS技巧
最好的解决方案往往是最简单的，这里列出8个CSS技巧，非常简单，简单到只需要写一行代码，只需要定义一个属性参数。非常适合学习CSS的新手朋友阅读。
11大CSS按钮教程
按钮是网站中非常重要的一部分, 它们常用于引发访客点击和产生互动。下面收集了11个css按钮教程，教你如何创建吸引访客目光的按钮。我最想推荐的其实是第一个， Google custom buttons. 在Recreating the button这篇文章中，作者详细向我们介绍了google现在很多应用服务中（google reader, gmail等）。其中包括需要用到一张渐变背景图的3.0版本…
12个针对网页设计师的非常便利的CSS框架、模板和摘录网 | 译言
如果您经常性地需要建立和开发新的网站，那么您就应该考虑使用模板创建，收集有用的代码片段等等。为了加快开发的进程，您就应该这样做，在需要的适 合您可以使用、修改并优化这些模板文件；如果是作为商业用途的您应该检查下许可条款。然而，到目前为止，这是从最榜的站点中挑选出来的最好的站点的普通清单。好好地使用它们吧！
推荐20个让你学习并精通CSS的网站
CSS的学习过程既可以说简单又可以说是复杂。CSS的语法比较简单，但CSS的应用中有一些概念(一可以说是原理)还是很难掌握的。本文推荐了 20个出色的CSS技术类(英语)网站帮你更好的理解和掌握CSS，其中包括各种各样的网站，从博客到清单风格列表甚至网站，它们都侧重于研究同一个主题，那就是CSS。
详解CSS的优先权 | 怿飞
发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？ CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。
页面中css调试和问题解决的一些经验总结
CSS2各个属性被各个浏览器支持的问题，css>继承，css叠加等等，我们经常因为这些而需要调试页面中css。 本文里面，作者分享了自己一些页面中css调试和问题解决的的经验。
网页不需要漂亮
你见过的最炫目的网站设计通常都是个人网站，尤其是设计师的Portfolio。但最漂亮不代表最成功，CSS是用来玩花俏的视觉效果的吗？一些设 计师在尽可能的发挥着想象力做些炫目和富有创意的网页，也有一些设计师，在反对对网页中过度的视觉设计。到底该选择什么呢，看你自己了。
彻底了解css中的长度单位
我们在写css的时候最常用的长度单位是px（像素），经常看到的还有em，pt等等，其实css中的长度单位一共有8个，分别是px，em，pt，ex，pc，in，mm，cm；那我们到底该用哪种单位呢?
CSS盒模型
网页设计中的每个元素都是长方形的盒子。 了解盒模型这个概念有什么好处呢？我只能用我的感受来向你描述一个这个东西: 当开始样式化一个网页时，你就会把网页看成一个杂乱堆放了很大不同大小盒子的地方，而你所需要做的，只是把这些盒子拉高、拉宽和移动。然后，一个网页的布局就OK了。