0%

Front End Start Guid--CSS

本文只是一篇入门指导,并不涉及相关技术的具体细节,不过你可以从本文中找到一些相关技术的文档链接。

在学习CSS(层叠样式表)之前,请确保你已经掌握了HTML相关的基础知识。

学习CSS,首先知道CSS是干什么的,俗话说“人靠衣装,佛靠金装”,CSS就好比这里所说的装束一样,可以把佛祖打扮的金光闪闪,也可以把帅气/漂亮的你打扮得更加的迷人。在学习的过程中,我建议你从基础的理论知识开始,伴随着一些小练习,就像我们小时候上课听老师讲课,课后做习题作业一样,循序渐进。

在理解了基础概念之后,先别急着学习CSS语法,在这之前先了解了解CSS在HTML中的引入方式,理解什么是行内样式,什么是内嵌样式,什么是外链样式,你可以在网上搜到大量的这方面的文章

知道如何引入CSS后,就可以开始学习CSS的基本语法了,结合着HTML,认认真真的去练习每个CSS属性以及观察他们的作用效果,可能你会感觉到这个过程挺枯燥的,因为那些CSS属性名称你一眼看上去基本上就知道干什么的,但我还是建议你去动手实践–“眼过千遍不如手过一遍”。在刚开始的学习中,请先跳过动画、过渡、转换相关的内容。我更推荐先学习颜色、字体、尺寸、边框等相关的基础属性。

在使用内嵌或者外链的方式进行引入CSS时,不可避免的会接触到CSS选择器,学习选择器就需要知道有哪些选择器,哪些选择器的使用频率更高,还有选择器之间的优先级,即使你使用vue或者React等框架,可能还是会遇到样式被覆盖或者样式冲突一类的问题,比起简单粗暴的使用!important,我觉得更好的做法是分门别类的整理以及使用好相关的选择器来解决或者避免这类问题。

另外,你需要掌握盒模型相关的知识,以便更好的使用CSS+HTML进行页面布局,其实在面试的过程中面试官经常会提及盒模型相关的知识点,但在我面试过的几十有一两年工作经验的前端面试者当中,能正确的回答上来这类问题的面试者大概只有20%左右。

掌握了以上基础的知识点,就可以开始学习其它的进阶一些的知识了,比如说浮动相关的(如何使用浮动,如何清除浮动),还有我在面试过程中经常有面试者搞不清楚动画过渡变换这三个知识点,总是把它们三个混为一谈,我问的变换,他却回答的是过渡,我问动画属性,他还是回答过渡…另外还有弹性盒子以及媒体查询和响应式方面的知识,都需要仔细的去学习,毕竟现在这个阶段是打基础。

除了以上这些基础的技术之外,我还建议在学习之余去了解一些我们在写CSS时的通用做法或好的实践,比如雪碧图渐进增强与优雅降级Reset CSS 和 Normalize CSS 有什么区别,以及什么是重排和重绘等方面的知识。

还有一个比较重要的事情:建议大家还是好好学习学习英语,这有助于阅读很多高质量的文档或博客,比如去阅读stackoverflow社区的回答,或者在github上看一些优秀框架或者库的代码。