如何深入的学习好CSS？

css不仅仅是几个布局就完事了，我也想做出一些漂漂亮亮的效果。并且如何让自己学习的css成体系呢，阅读了鑫神的《css世界》，任然是一头雾水。求各位css大佬们指点

首先，初学一门技能，要秉承一个原则：“能动手的，尽量别吵吵”！
另外，你需要一个能够从简到难的知识体系，一步一步跟下来。
想高效的自学CSS，怎么能少得了一份学习路线呢！
先上一张完整版的前端学习路线图，对前端知识有个全面的了解：


下面详细介绍下HTML+CSS的知识图谱以及配套视频教程！
1. PC端网站布局。
其中包括：HTML基础，CSS基础，CSS核心属性，浮动，盒子模型，溢出，元素类型，安利案例，定位，锚点，精灵图，宽高自适应，表单进阶。


2. HTML5+CSS3
其中包括：HTML5，CSS3


3. Webapp布局


4. 渐变、动画、变形


5. Grid网格布局


完成第一阶段的学习，就可以完成PC端页面的制作与动画特效，可以配合UI设计师进行项目开发完成pc端网页的布局制作与样式设计实现。实现移动端页面制作与响应式实现，可以适配各种手机尺寸，并能利用响应式惊醒移动端与PC端适配。
视频教程：
零基础前端入门到精通 - 1. H5小白课宣导片Web 前端基础全套教程 - 1. hbuilder的相关应用完整版前端路线+视频教程+项目，可以参考我的这篇回答：
前端的学习应该怎么规划？希望回答能帮到大家。有用就一键三连吧！

如何高效的学习css?css必备的基础知识,css必看的书籍,css高质量的开源库分享

学习CSS有了一定基础后，有的人会觉得好象没有什么学的．因为知道一些基本的理论性的东西．CSS说它容易是因为它的知识点有限．说它难学就在于各浏览器对CSS的支持程度不同．
如何深入学习我给出以下几点见意：

１.去找机会多做一些项目，公司的，或是外包的，哪怕你没有人民币挣也要做．
这一条并不是多做就会好有的效果，有的人做的项目不少总是按着老的思路去做，做了很多，水平也不会有太大的提高，提高的也只能是熟练度．每一次在做的过程中要学会去思考，看看我们有没有更优化的的方法去实现同一个效果．多说一个题外话：有一个错误的观点认为HACK是不好的．想法也是错的．我们在做页面时原则是不使用HACK，但是如果在特别需求上有时还是要使用，前提是你不用HACK不行，一些人的能力有限，所以他没有办法了就用HACK，很多时候可以换个思路就可以不用HACK.多说了这一点儿．要做完项目时遇到了新的问题，一定要做笔记下来，以后忘了也可以知道在哪能查到这个问题．

２.多去BBS，这样可以多看看一些别人项目中遇到的问题．这是一个日积月累的过程，你看的东西多了．掌握的多了，因为你做的项目是有限的，不可能把所有的问题都遇到，别人遇到的你去思考，看如何解决．或看其它人如何解决这个问题的．当你在项目中遇到这个问题，你就可以不用在多费时间就几钟的事了．有经验与没有经验的区别也就是这一点，有经验的人不是天才，是他做的东西多了，一看就明白知道如何解决．而没有经验的人会现想这个问题如何解决，那可以要花好多时间的．

３.多看一些国外的好的CSS网站，CSS代码是公开的，可以很方便的看到．分析他们的页面和CSS．从好的网站你会学到很多东西，和你已有的一对比，你会发现他们的思路要比你开阔的多，也优秀的多．
一方面你多向别人请教，一方面你可以用FF、谷歌或者是Opera浏览器可以查看源代码的，你就参考这那些优秀网站的写法，先模仿多练习，渐渐的你就会用了。
网上还有一些网站代码实例布局清晰简洁，没有动态代码，你可以多做参考，多借鉴一下。


最快的方法  看一些比较好的视频教程加上自己的不断地实际操作！

比如说，去分析一下怎样让代码做到搜索引擎优化，怎样让页面加载更快，怎样让页面的代码最简洁，是否兼容各种浏览器，用户体验...等等各种方面。
如果发现有好的网站，你可以用firebug去看看他们的代码和自己写的代码有什么不同，目前我是这样的一点点去学html和css的。一点点深入是看自己想学习html+css要干什么，才知道怎么去一点点深入。至于看什么书，上什么网站学习，这个我不能给出明确的建议。我自己先开始是看学校发的教材慢慢学的，也有老师指导代码规范性，后来都是在制作过程中遇到问题就百度或google的，看看技术博客自己学习。

作者：zccst
链接：https://www.cnblogs.com/zccst/p/3634797.html
来源：博客园
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

零基础如何迅速学习前端？

一. CSS学习重在方法
学习任何东西都是一样，从小学、中学、大学，除了学习知识外就是去学习方法!
要想掌握CSS, 首先要学会HTML，因为一个样式它是不可能脱离HTML页面的，HTML不与样式结合的话, CSS就失去了存在的意义。所以一般书中都会举一个例子，然后让你上机测试效果，这是笔者想让你有对样式表CSS有一个初步的印象，告诉你CSS能做什么。一个小例子：“麻雀虽小，五脏俱全”，你可能看不懂每一个语句的真正意思。但是你可以记得例子的模式，以后在实践中不断地用，不断用的过程就是不断记的过程，所以不能恢心，不能总认为自己记忆力不好，但不管你骑的是牛也好，千里马也罢，只要有恒心，一定会到达终点的。
二. 掌握CSS的四个学习阶段

• 阶段一：不去想浏览器的兼容性问题的情况下能做出页面，但页面里到处用TABLE的 模式DIV写出的页面。
  
• 阶段二：想到了兼容性问题，但无法提前预防，只会修补问题，大量使用HACK技术(我对HACK技术只是知道，但用的很少)
  
• 阶段三：可提前预防BUG，但样式表中大量应用了ID,CLASS，CSS译过来是重叠样式表，比如“DIV P SPAN”。这句代码是标明DIV子元素中P的子元素SPAN，这样写就可以定义SPAN的样式了，不用在SPAN中加入CLASS了。这也就是CSS的优点所在，为什么不好好利用而一定要定义一个CLASS呢!
  
• 阶段四：这一阶段是最难的，良好的HTML语义结构、合理的CSS、可重复利用的样式。良好的语义有这方面的文章,合理的CSS，这两方面以后一定会写专题来研究。
  

三. CSS初学者常见问题
第一个要求是缩图的正下方要有个标题。作法相当直接了当：在你的 HTML 里放上图片，接着一个断行 (BR)，再把标题放在一个段落 (P) 里并且置中 (利用 CSS)。
接着我们要让这些缩图跟标题成对地排列在浏览器窗口里。使用表格排版时，这一对对的缩图跟标题会被分别放置在 TD 里。在使用 CSS 排版时，我们要把它们分别放置在 DIV 里。为了让它们能水平排列在窗口上，我们用 CSS 让这些 DIV 往左浮动 (FLOAT)。

问题1：学CSS应该选什么样书来读?
先推荐几本：《CSS权威指南》
如果对HTML还不太了解的话，可以先读读《HTML参考大全》这本书，这本书即是一本教学书同时也是一本很好的用来查询HTML的工具书。最近出版的《精通CSS》、 《无懈可击的Web设计》都是非常好的书，但不适合没有有CSS基础的人读，要想成为一个优秀的CSS Builder，还要有扎实的英文基础，那样你就可以去阅读国外的CSS教程，参与相关的论坛，有人说，不懂英语可以只看代码，但事实上，他们的书中论述的不仅仅是代码，更重要的，是他们会告诉我们编码的思想和编码的方法，这些都是我们值得去学习和领会的。
问题2：用什么软件编辑CSS代码?
Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文化接口及支持多国语言编写的功能(UTF8技术）。
问题3：先写HTML还是先写CSS?
网上有很多种答案：其一先写HTML后写CSS;先写CSS后写HTML;其二两者同时写。如果让一个人编写代码，让他先写HTML,写完后 HTML不能修改了，然后写CSS，如果他可以写出来，那这个人一定是一个水平非常高的Builder了!所以对于初学者，多数情况下建议同时编写，
具体步骤：
先要把站点建好，目录建好，比如建好文件夹CSS,IMAGES,这两个是最其本的，然后新建一个HTML文件，一个style.css一个空 的样式表，把HTML页连接到这个外部样式表。
然后我们先写HTML中的最基本的布局部分，都是用DIV，然后直接在DIV里加入ID或CLASS，这些 布局部分包括外套部分，头部分，中间部分，左，中，右，版权部分等。
写好这些后，这时你可以到样式表中写样式，或者你在接着写布局里的部分，拿头部为例，在头部写入LOGO部分，NAV部分也同样加入ID或CLASS。其它同理。
为什么说不可能一次性把HTML部分写好呢，因为人都是可能犯错误的，可能你的想法写的过程就是有问题的，或者为了浏览器的兼容性问题，有些是你由于经验的不足没有提前预料到的，所以当你写样式时发现了问题时就有可能要改动你的HTML的代码。大至的写法就是这样，你也可以HTML/CSS同时进行，都是可以的，看你的习惯。我们写代码时很多时候是边写代码边测试，也不是说写一句测试一句，而是写了一段代码后就进行浏览器的测试，我是同时用IE6与FF一起测试。一个优秀的制作师他们的代码多数情况写了很多时他们才测试一下，是因为一个人如果经验多的话，他们就会知道并提前预防浏览器错误显示的发生了!所以他们写代码的速度比没有经验的人快。他们已经经历过了你所要经历的错误，你第一次遇到错误的浏览器显示问题你要花时间去修补，而他们可提前防止或遇到了可立即解决问题!这就是你与他们的不同点之一。
初学者与高手不同点之处还有一个就是高手们使用了大量的快捷键，所以一定要记住那些常用的快捷键，每一个小的细节都有一点提高，综合在一起就是很大的提高。

另外提高自己的水平最好的方法就是多实践，多找一些比较好的HTML+CSS的模板进行编码实践，开始时要选一个简单点的，把页面截图，然后把这张图用自己的想法还原成HTML页面……

web的前端：最详细的web前端学习攻略，直接收藏吧！

作者：小锋子_Gruad
链接：https://www.jianshu.com/p/a8b79bcd49ec
来源：简书

别想太多，做就是了！
不做永远不会，别总想着成体系啥的。好高骛远的人永远学不会真本领。看完书把例子做一遍，想学啥效果，搜索加实践才能积累经验。去做什么效果CodePen找找看，具体那句话看不懂再去查到底怎么回事。别总奔着太大的目标什么系统性学习css这种任务去，技术永远都在发展，学是永远学不完的，高手和初学者最大的区别就是高手想到什么就去做，通过做了发现问题，知道遇到问题怎么找答案，初学者想太多完事求全面，因此希望少走弯路最后却止步不前。加油吧，实践才是检验真理的唯一标准。