学习CSS的思路（转）

两周以前写过该系列的第一篇，其实当时只是一个想法，这段时间迟迟未更新，是在思考一个解决过程。如今初有成效，就开更吧。

1． 一个段子

　　开题没必要太严肃，写博客也不像写书，像聊天似的写东西是最好的表达方式。

       记得以前看过一个段子，也多是一件真事儿，这不重要。大致内容以下：一个香港的教授说：咱们香港的大学和大陆的大学差的很远啊，大陆的大学连看门保安都懂得哲学，由于当你想要进入校园时，保安都会问你一个很哲学的问题“你是谁，你从哪里来，你到哪里去？”。

       看完段子的第一反映确定是很自嘲的笑了，笑了以后就忘了，该干吗干吗去了。

       可是我以为这句话确实有那么一点高达上的意思，虽然我不知道什么是哲学。“你是谁，你从哪里来，你到哪里去”，若是映射到咱们此次CSS教程上，能够提这么几个问题：

1. CSS是什么，如何深刻理解，它和html是个怎样的关系；
2. CSS有几种来源（5种来源）；
3. CSS要干什么事情，如何结合html实现的；

 

　　看过我其余教程的朋友都知道个人原则：我要写东西，必须又一个我以为很特别并且很合理、高效的思路，若是没有我宁肯不写。大部分写CSS的人一上来可能写选择器，可是我不会那样。

　　闲话不说。要想从根上了解这些问题，仍是先从浏览器开始吧。

2． 浏览器是如何工做的

　　以前看过一篇文章，叫作《浏览器的工做原理：新式网络浏览器幕后揭秘》。文章言简意赅的介绍了浏览器的工做过程，web前端程序猿最好了解一下。在此另外推荐一本书《WebKit技术内幕》，笔者很早就关注这本书，已列入近期的读书计划。

       文章中的内容暂且不详细提，咱们先“断章取义”的只说CSS相关的部分。

 

       上图是webkit内核渲染html和css的流程图。你们能够从图中看到，html的解析是一条线，css的解析是一条线，二者会在某一点结合，造成最终的视图。

       若是咱们以CSS为重点看，从上图中咱们能够总结出学习CSS的三个突破点。

1. 浏览器如何加载和解析CSS——CSS的5个来源；
2. CSS和html如何结合起来——选择器；
3. CSS能控制那些显示方式——盒子模式、浮动、定位、背景、字体等；

　　看到这里，不知道有没有朋友以为很兴奋？由于咱们在学习CSS以前，首先是分析浏览器如何加载、处理、使用CSS的，咱们按照这个思路去写CSS的教程。而不是一上来就照本宣科的从id选择器开始。

我这段时间为什么一直没有写博客，实际上是在左思右想一个更加合理、高效的思路和框架。我若是写出来的东西和别人的同样，那我本身也以为没意思。

       本系列文章也是按照这个思路和框架，一步一步展开的。

3． CSS的加载过程

       CSS——Cascading Style Sheets——层叠样式表。“样式表”你们比较好理解，那何为“层叠”呢？从字面意思来看，层叠确定是须要多层叠加起来。而这个“多层CSS”到底有几层，每一层是什么，咱们程序猿用到的将是哪些层？这几个问题将是咱们讨论的重点。

       另外，这么多层次叠加，若是出现冲突怎么处理，以哪一个为准？这也是咱们讨论的重点。

       最后，在这些层次中有一个“浏览器默认样式”层，即浏览器默认的各个html元素的样式。此次咱们像浏览器这位“机器人”学习一下，看看它写出来的css能给咱们什么帮助。

4． CSS和HTML的结合

　　CSS如何与html结合呢——固然是经过选择器。CSS提供了多种多样的选择器类型，并且每一个级别都在不断的增长新的选择器类型，使得选择器更加灵活易用。本系列将拿出一篇文章专门讲解选择器。

　　聪明的人类也经过css提供的选择器在其余临近的方面开疆拓土，例如jquery，zen-coding。

　　对css选择器来讲，有一个很重要的话题——级别。在大部分web前端面试题中，你都会看到css选择器级别的判断问题。《css设计指南》书中给出了一个概念——特指度，并且给出了计算公式和计算规则，还给出了一个简单的背诵口诀。想的真周到。

       最后，与选择器关联密切的还有伪类和伪元素，咱们也将拿出一篇文章专门讲解伪类和伪元素，以及它们最典型的用法。

5． 页面呈现

　　页面呈现能够分为两类——文字，块。

1. 针对文字来讲，咱们能够设置字体、字号、加粗、斜体、背景色等等；
2. 对于块来讲状况比较多，有盒子模型、浮动、定位、display、背景等；

　　本系列会拿出很大的篇幅去讲解其中的基础知识，以及他们的一些重点应用。

6． 布局

　　布局是css的重头戏，每一个系统的布局都有其各自的特色。无好无坏，确定是各有优缺点，不妨拿出几个比较典型的例子来一块儿分析一下。例如：

1.  经典三列布局
2. Bootstrap栅格布局
3. 百度首页布局
4. 微博布局
5. 人人网布局
6. 瀑布流布局
7.  ……

7． 下一步

　　下面的文章将会一步一步展开本文的描述，从实例和代码中慢慢道来。继续期待吧！

---------------------------------------------------------------

本系列的目录页面：http://www.cnblogs.com/wangfupeng1988/p/4325007.html

-------------------------------------------------------------------------------------------------------------

欢迎关注个人微博。

也欢迎关注个人教程：

《用grunt搭建自动化的web前端开发环境》《从设计到模式》《深刻理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》