本文主要包含等相关知识,匿名希望在学习及工作中可以帮助到您
回复内容：
我就分享一下我的学习路径吧。1. 当年玩过一段时间的 MSN Space，里面有些地方支持部分 CSS，当时为了做得比别人高端就东拼西凑搞了一点。这期间属于完全盲目摸索。
2. 看了一遍《CSS Mastery》，基本入门了。《CSS 禅意花园》翻了几页就丢一边了，感觉没什么意思。期间通过做 WordPress 主题来实践，并且积累了一些基本的兼容性知识。
3. 后面就没看过书了，工作了开始看了一点 W3C 的 CSS 规范。查文档主要就是 MDN / MSDN / http://QuirksMode.org / Can I Use / StackOverflow 等在线资源，包括一些博客的文章（CSS Tricks/ALA/...）。
4. CSS 的书说真的就看完整看过一本，接下来 @CSS魔法 翻译的《CSS Secrets》可能会搞来看看（广告费请发微信红包给我）。
我觉得挺自然而然的，也可能是当时开始学的时候也没有现在这么多框架之类的东西，不太容易混乱。循序渐进吧……
--
（其实我想吐槽题主的排版） 谢邀， 这问题想回答很久了， 奈何项目比较忙， 今天终于可以忙里偷闲作答下：
图多预警：
--------------------------------------------------------------正文分割线------------------------------------------------------------
题主说了这么多挺不容易， 从中了解到题主对于css html js 的理解还有点浅；题主进入前端开发的时间应该不长，同很多新手一样为了快速实现功能顾不上原理直奔目的，最后使用的工具或引入的库越来越多； 结果： 功能是实现了， 但维护就悲剧了！ 最终学的只是使用工具而不是使用css;
以大部分新手的知识储备还驾驭不了太复杂的页面，所以不建议为了追求页面效果不求甚解乱引库或乱用工具；
学习是个循序渐进的过程不能一蹴而就，该怎样学习CSS?
个人将css学习规划成以下三部分（学习CSS是很大、佷泛的问题，本文只提供一种学习思路）：
1.基础；
有答主提到项目驱动学习，的确，实战编码是提高CSS的最佳手段，但不建议新手立马开始实战；因为新手对CSS基础知识不了解，更容易在实际开发中走弯路（不只新手，css基础不好的前端也经常走弯路），例如：浮动、定位的滥用、脚本、CSS相互间用法不当、雪碧图用法错误等；很多弯路就是不熟悉CSS基础语法造成的；
该怎么提高CSS基础能力？
1.1 看书；
购买大家公认的好书看看， 以下推荐下口碑很好且自己看过的好书：
《css权威指南第三版》
“CSS权威指南”是公认的好书，就是更新太慢，第三版已经是最新版，本书 讲解的内容还停留在CSS2.0且里面还随处穿插 “Netscape ”（网景浏览器）的bug，（要知道连我这个进入前端好几年的人都没开发过兼容网景浏览器的任何网页了！PS： 私以为火狐 虽源于网景但不算网景浏览器）
但 本书关于CSS2.0的讲解仍很详细很实用！ 毕竟我们现在开发PC端网页用最多的还是CSS2.0。（IE9 才开始遵循CSS3规范， 而且学习CSS3也得先学CSS2）
《大巧不工》
本书重点讲解的不是CSS，应该说CSS技巧只在里面占很小很小的篇幅， 但这本书能让你了解整个网页开发的所有环节；其中的CSS常用语法讲解很实在也很实用， 优化篇章涉及的CSS优化技巧仍是当前行业开发的主流做法（个人见解）；《禅意花园》
唯一一本买了还没看完的书，更偏重于设计， css的实战代码技巧并（bing）不（mei）多（you）， 新手不建议购买阅读, 书很精致，每页都是彩色的哦，有空时可当做扩展读物；
1.2 w3cshool
市面上很多CSS书籍（特别是国内的）都是直接从w3cshool抄录的，书名不提也罢，重要的是w3cshool的CSS教程真的很经典啊！而且更新较快，CSS3教程老早就有啦！
优点：教程简短易懂；
缺点： 太简洁部分知识点没深入；
2.实战；
老实说，第一部分的基础知识看完了你也记不住（=_=）， 如果没有实际编码 、遇到问题没经常回查或查阅API ，一般新手看完不出两月保证忘光！
所以要学好CSS，编写CSS代码必须是日常，下面分享 实战技巧：
2.1 调试工具选取
经历过 IE8、firefoxのfirebug、 国产各类双核浏览器、safria、opera、chrome浏览器调试的大叔告诉你， 当前调试工具 必须选择 chrome ;
虽然 safria用的跟chrome之前一样的Webkit内核、国产浏览器极速模式也是Webkit内核，但跟真正的chrome相比在调试时体验还是有很大差距的，对比过的人都懂！(ps: 新版的chrome已是blink内核)
别人家的教程：chrome调试技巧--持续更新
个人推荐必须会的两小技巧（非新手跳过）：
可以让网页中的任何元素， 改变状态；
可以修改（增删改）任何元素的样式或类名：
