如何高效的学习css

html-css031

如何高效的学习css,第1张

许多人都开始学习CSS,但又不知从何入手,所以此文就是给那些初学者所写,带他们踏上CSS列车。 一. CSS学习重在方法! 学习任何东西都是一样,从小学、中学、大学,除了学习知识外就是去学习方法! 要想掌握CSS, 首先要学会HTML,因为一个样式它是不可能脱离HTML页面的,HTML不与样式结合的话, CSS就失去了存在的意义。所以一般书中都会举一个例子,然后让你上机测试效果,这是笔者想让你有对样式表CSS有一个初步的印象,告诉你CSS能做什么。一个小例子:“麻雀虽小,五脏俱全”,你可能看不懂每一个语句的真正意思。但是你可以记得例子的模式,以后在实践中不断地用,不断用的过程就是不断记的过程,所以不能恢心,不能总认为自己记忆力不好,但不管你骑的是牛也好,千里马也罢,只要有恒心,一定会到达终点的。 阅读一本书,一般来说第一次要先把整个书通读一遍,不理解的也要往下看,在往下看的过程中你也许会找到那个问题的答案。看完后你有一个大概的印象,但一定有很多不明白的地方,没关系,继续往下看。 第二遍你就要边看边做学习笔记了,把你认为是重点的部分写上,还有,你觉得有疑问的部分也要记下,带着疑问看下去,如果没有答案,你可以去BBS上发一个贴子,好心人还是很多的,提示一句:“一定要学会如何去问问题!” 这里就不说了。你还要上机去练习书上的例子,最让你困惑的:“一是记不住,二是对概念的理解有误(这一条可能是书译的不好,另外就是你的理解不对)”,对于第一条你就要树立信心,坚持再坚持下去。当你到达终点时你回发现一切都是顺理成章的事。因为你努力了,努力了就会有回报,有结果。 有好多人也看了,但是没有什么进步,分析主要有以下几个原因: 原因一:压力不够,因为有不少人比如美工学CSS,因为是看别人学,所以学之,不学就没优势!这样的压力是很小的,学不好还有美工这碗饭。 原因二:只是业余学习,这样学还只是玩一玩,因为你不一定非要以这门技术吃饭。 原因三:方法不对,有的人只是在看教程,但他不动手去做,我以前就是看的太多,做的太少,所以有了实践你才能把理论的东西揉进去。 二. 掌握CSS的四个学习阶段 学CSS可以分成以下几个阶段: 阶段一:不去想浏览器的兼容性问题的情况下能做出页面,但页面里到处用TABLE的 模式DIV写出的页面。 阶段二:想到了兼容性问题,但无法提前预防,只会修补问题,大量使用HACK技术(我对HACK技术只是知道,但用的很少) 阶段三:可提前预防BUG,但样式表中大量应用了ID,CLASS,CSS译过来是重叠样式表,比如“DIV P SPAN”。这句代码是标明DIV子元素中P的子元素SPAN,这样写就可以定义SPAN的样式了,不用在SPAN中加入CLASS了。这也就是CSS的优点所在,为什么不好好利用而一定要定义一个CLASS呢! 阶段四:这一阶段是最难的,良好的HTML语义结构、合理的CSS、可重复利用的样式。

1、初期不要急着自己去设计页面,直接仿站来让自己获得从0到1的能力。 找一些比较有新意的,结构上稍有复杂度的,基本没切过有高相似度的页面,时间要花在刀刃上。确实培养起了自己对CSS的兴趣。

2、基础技能练习差不多了,可以找份真实的工作来巩固深入学习。比你自己业余去摸索要高效10倍。理解了CSS模块化的思想,才发现自己以前只能算是完成了一个页面,而不算是做好了它。真实的产品开发才是自己的CSS能力真正落地的开始。

3、工作后应继续关注相关一些例如Codrops 等这类能带来CSS使用灵感的网站,去思考为什么,而不是copy它的代码去完成功能。页面开发中有太多重复的工作,如果你一直用一个思路去解决问题,会有碍于经验和能力的积累,形成一个较低级舒适区的怪圈。平时也可以去codepen这类网站收集一些琐碎的灵感,增加知识面学习css过程中千万不要剥离HTML学习。当什么时候理解了html的重要性(从页面开发角度而言,它可以视为是后续良好css和js编码得以实施的基础,相当于程序中的数据结构,设计好了可以让你事半功倍),你才可以称得上是一个合格的页面开发

4、对于新人,建议除了几个关键概念,如布局、盒模型、单位等等,都不应该花大量去扣细节,甚至背书记忆,浏览性学习知道有这个东西就行,在实际应用时再去加深记忆。

以上算抛砖引玉,虽然一直认为纯粹的CSS页面开发并不适合作为前端领域里深入发展的方向,但不可否认,在学习玩耍css的过程中,带给了自己很多乐趣。

这是应该是浏览器开发者应该关心的(页面加载更快,用户就会更愉快)。Mozilla有一篇文章: about best practices . Google 当然也很关心这个问题,他们也有这样一篇文章:Optimize browser rendering。让我们了解下他们主要倡导的东东,然后讨论他们的实用性。从右到左浏览器如何读取你的CSS选择器有一个很重要的原则,那就是它们从右到左读取。这意味这像 ul li a[title="home"] 这样的选择器,a[title="home"] 将是最先被读取的。这一部分通常被称为 “key selector” (可否称为“目标选择器” -_-!)选择器的最后一部分,也是被选择的标签。ID's 是最有效率的,通用符是最慢的有四种目标选择器:ID, class, tag和通用符。看下他们各自的效率如何:

#main-navigation { } /* ID (最快) */

body.home #page-wrap { } /* ID */

.main-navigation { } /* Class */

ul li a.current { } /* Class *

ul { } /* Tag */

ul li a { } /* Tag */

* { } /* Universal (最慢) */

#content [title='home'] /* Universal */ 然后我们结合从右到左和目标选择器的概念,我们可以知道下面这个选择器并不高效:

#main-nav li { } /* 看着很快实则很慢 */

尽管这让人有点费解......因为ID's是最高效的,浏览器可以通过ID迅速的找到 li。但事实是,li 标签是被先读取的。不要用标签修饰死也不要像下面这样干:ul#main-navigation { }ID's 是唯一的,所以不需要用标签修饰,这只会让它更低效。

如果你可以避免的话,也不要用它修饰 class 。class 不是唯一的,所以理论上你可以把它用在不同的标签。如果你愿意的话,你可以用标签控制不同的样式,这样你可能需要标签修饰(比如:li.first),但这样做的人很少,所以,don't .绝对没有比用后代选择器更糟糕的做法了David Hyatt:

后代选择器是CSS里最昂贵的选择器,昂贵得可怕——特别是当它放在标签和通用符后面时。

就如下面这个东东一样,绝对的效率毒瘤:html body ul li a { }一个选择器渲染失败比这个选择器被渲染更高效我不是很确定是否有更好的证据去证明这一点,因为如果你有大量的选择器在CSS样式表里无法找到,这样的事情貌似很离奇,但一点必需注意的是,从右到左的解释一个选择器来说,一旦它找不到,那它就会停止尝试。然而如果它找到了,那它就需要花更多精力去解释了。试想一下为何你这样写选择器思考下这东东:#main-navigation li a { font-family: Georgia, Serif}你可能不需要从 a 选择器开始(如果你只是想换个字体)。下面这个可能更高效些:#main-navigation { font-family: Georgia, Serif}实用性还刻前面提到的Mozilla的一篇文章?已经有十年了。事实是:计算机比十年前变慢了(不是我理解错了,还是作者想说现在的WEB越来越复杂了)。我感觉这东东在当年似乎还更受重视。十年前我还是个21岁的英俊小生,当然我不觉得那里我会认识css这东东。所以我也无法跟你讲以前的情况......但我觉得渲染效率的问题之所以没被重视是因为这从来就不是一个大问题。

这是我的一些看法:不管怎样上面提到的东东都是有意义的,你可以按照上面的方法去做,因为它并不会限制你的CSS制作。但你也没必要太教条主义。如果你是个完美主义者,而之前又没有考虑过那东东,那是时候去重新看一下你之前写的一些样式是否有改进的地方了。如果你没发现你的网站明显的渲染缓慢,那大可别太在意,在以后的工作中多注意就行了。超级快速,零实用性我们知道ID's 是最高效的选择器。当你想让渲染速度最高效时,你可能会给每个独立的标签配置一个ID,然后用这些ID写样式。那会超级快,也超级荒唐。这样的结果是语义极差,维护难到了极点。即使在核心部分你也不应该见过这样做的。我认为这个可以提醒我们不要为了高效的CSS放弃语义和可维护性。Thanks to Jason Beaudoin for emailing me about the idea. If anyone knows more about this stuff, or if you have additional tips that you use in this same vein, let’s hear it!顺便提一下,因为CSS选择器被很多javascript库使用,上面提到的东东仍然适用,ID选择器还是最快的,后代选择器和类似的东东比较慢。PS:看谁还敢用N多的后代选择器。。。还有反对我用ID的。。。哇哈哈。。。经典论坛交流: