前端技能-css篇-1

层叠样式表Cascading Style Sheets，简写CSS

关于css的历史跟一般知识我这里就简单的说下,毕竟这些知识,说来也蛮长的,E文如果不错的话,可以看以下的链接,对css的一些样式进行了详细的分类.

http://www.w3schools.com/cssref/default.asp

记性不是很好的同学,可以把这个页面复制到doc文档里面,以后用一些属性记不起来的时候翻阅看看.

这里推介一些工具

前端开发的话,是有必要安装chrome或者是firefox浏览器的,按F12可以出调试控制台.当然IE7以上的浏览器也都有这个.用起来的话,我感觉firefox的插件firebug是比较好的.工具的使用的话,具体看相关网站的帮助.debug工具大多都大同小异.之后会写个这方面的专篇.初学者这块了解多一些.

编辑器

有些人喜欢用记事本类工具加上代码高亮就完全可以了.比如edit plus,notepad++,ueditor.

目前前端比较火的,sublime text2(已经有sublime text3)有很多的插件可以用.

集成的话,有eclipse的web版本,dreamwaver系列.等等,还有很多,选择自己习惯用的编辑器可以提高自己的开发效率.

我自己比较倾向于notepad++,插件的话,该有的都有,自动提示比较差,不过也没关系了.之后大概会写一个专题介绍前端适用的编辑器跟插件.

题外话就说到这里,下面开始正式的一些普通的课程里面不会说到的一些东西.

一.css编写

   css的代码组织方式: 标签选择器{属性},如

   body{font-size:12px;background:#white;color:#999;}

   属性之间有分号做间隔.有些属性是可以简写,也可以把一个个分属性拆开来写,比如font跟background,margin,padding等.

二.css的解析方式

   css的核心部分一半是那些修饰的属性,只要记住相对应的属性用途,编写的难度不大,但是对于如何去写好标签选择器,是很多新手前端所头疼的问题,下面我来具体解释一下.

   选择器的权重简单算法及其相关的优先级(这里的权重算法只是方便记忆,真实的算法下面我会解释)

   #id     权重 1000

   .class  权重 100

   标签名  权重 1

   列如有两段css

   #div .test div{

       color:#white;

   }

   div{

       color:#black;

   }

   同样的对div去修饰,第一个的权重比是最优先的.第二个是最普遍性.简单的说,第一个如果按照语义化的思维方式去理解,就是去先找id为div的标签,在找其内部class为test的标签,再在内部找到div的标签.说的有些绕,简单的说就是一层层找下去的.

   如何去组织这样的权重比是每个前端都要去思考的问题,下面我给出几个普遍共识的原则

   1.基于ID的选择器的速度是相对最快的,权重也是最高的,所以能用id直接定位的选择器优先

   2.ID是dom结构中唯一存在的字符串.(虽然可以编写出多个相同id的dom节点,不会强制检查这个id并报错.但在浏览器真正解析的时候,一般情况下只认一个节点,也就是说,你写的样式可能无效).选择器中尽量不要出现两个id或者多个id的情况.因为id的唯一性,所以多个id是没有必要的.多id的情况是有可能出现的,以下我会解释.

   3.class 一般翻译做"类" (这里的类的概念跟面向对象中类的概念,本质是完全不一样的.大家不要混淆.)class选择器是用的最多的,也是会多次出现在选择器中的.有人问了如果我写了10个class选择器是不是就大于id的选择器呢?其实是不然的,任何情况下的id选择器的优先都要大于class,同理适合以下的选择器,class大于标签.原理的话,类似于加减乘除的优先算法.

   4.根据以上的种种,编写选择的时候,尽量遵循 #id .class1 .class2 ... 标签名1 标签名2 ... 这样的顺序.

   5.就近原则,在写选择器的时候,尽量选择最近父节点上的id或者class.

   6.尽量在写选择器的时候,不要太多的使用标签,这涉及到了一个遍历问题.

   

   简单的阐述一下,dom结构在结合css的时候是如何渲染的.

   dom结构,如果从数据结构的角度上看,这是一颗树状结构,由于css一些属性的问题,所以css的渲染模型必然要从最子节点去解析渲染.举个例子

   p#id>div.t1>div.t2>span.t3>span.t4(zenCoding的一个html编写方式,以后会谈到)

   span.t4是最后的子节点,解析的时候是反而是要第一被解析的.

   实际上的解析顺序就是 span.t4 -> span.t3 -> div.t2 -> div.t1 -> p#id

   跟编写者的思维完全是一个反方向的.而且解析的唯一方式就是遍历.(这里也是html标签为什么会有两个,一个打开一个闭合的其中一个原因.确定子父节点)

   所以我们在编写选择器的时候,需要尽量向子节点靠扰.如果在选择器中有大量的标签选择器,可想而知,遍历的效果是多慢.当然现在的电脑的性能都是非常出色的.任何能找到元素写法都是可以的,但这就是区分是否是一个优秀的前端的一个标志.

   推介一编写css选择器的文章,里面详细的写了一大堆选择器并附有代码,这里我就不写了.阮一峰的博客还是有很多的干货的.  

   http://www.ruanyifeng.com/blog/2009/03/css_selectors.html

   这个是css的第一篇.