css知多少(2)--学习css的思路_html/css_WEB-ITnose
开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式。
记得之前看过一个段子,也可能是一件真事儿,这不重要。大体内容如下:一个香港的教授说:我们香港的大学和大陆的大学差的很远啊,大陆的大学连看门保安都懂得哲学,因为当你想要进入校园时,保安都会问你一个很哲学的问题“你是谁,你从哪里来,你到哪里去?”。
看完段子的第一反映肯定是很自嘲的笑了,笑了之后就忘了,该干嘛干嘛去了。
但是我觉得这句话确实有那么一点高达上的意思,虽然我不知道什么是哲学。“你是谁,你从哪里来,你到哪里去”,如果映射到我们这次CSS教程上,可以提这么几个问题:
- CSS是什么,如何深入理解,它和html是个怎样的关系;
- CSS有几种来源(5种来源);
- CSS要干什么事情,如何结合html实现的;
看过我其他教程的朋友都知道我的原则:我要写东西,必须又一个我觉得很特别而且很合理、高效的思路,如果没有我宁可不写。大部分写CSS的人一上来可能写选择器,但是我不会那样。
闲话不说。要想从根上了解这些问题,还是先从浏览器开始吧。
2. 浏览器是如何工作的之前看过一篇文章,叫做《浏览器的工作原理:新式网络浏览器幕后揭秘》。文章言简意赅的介绍了浏览器的工作过程,web前端程序猿最好了解一下。在此另外推荐一本书《WebKit技术内幕》,笔者很早就关注这本书,已列入近期的读书计划。
文章中的内容暂且不详细提,我们先“断章取义”的只说CSS相关的部分。
上图是webkit内核渲染html和css的流程图。大家可以从图中看到,html的解析是一条线,css的解析是一条线,两者会在某一点结合,形成最终的视图。
如果我们以CSS为重点看,从上图中我们可以总结出学习CSS的三个突破点。
- 浏览器如何加载和解析CSS??CSS的5个来源;
- CSS和html如何结合起来??选择器;
- 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. 页面呈现页面呈现可以分为两类??文字,块。
- 针对文字来说,我们可以设置字体、字号、加粗、斜体、背景色等等;
- 对于块来说情况比较多,有盒子模型、浮动、定位、display、背景等;
本系列会拿出很大的篇幅去讲解其中的基础知识,以及他们的一些重点应用。
6. 布局布局是css的重头戏,每个系统的布局都有其各自的特点。无好无坏,肯定是各有优缺点,不妨拿出几个比较典型的例子来一起分析一下。例如:
- 经典三列布局
- Bootstrap栅格布局
- 百度首页布局
- 微博布局
- 人人网布局
- 瀑布流布局
- ……
下面的文章将会一步一步展开本文的描述,从实例和代码中慢慢道来。继续期待吧!
-------------------------------------------------------------------------------------------------------------
欢迎关注我的微博。
也欢迎关注我的教程:
《从设计到模式》《深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》
-------------------------------------------------------------------------------------------------------------
推荐阅读
-
css知多少(2)--学习css的思路_html/css_WEB-ITnose
-
CSS的class、id、css文件名的常用命名规则_html/css_WEB-ITnose
-
Codeforces Round #277 (Div. 2)_html/css_WEB-ITnose
-
同样的样式,同百分比控制img的高度,在安卓下可以,为什么在ios下就不行呢?_html/css_WEB-ITnose
-
如何实现网页中的文字不允许被复制_html/css_WEB-ITnose
-
求html中img标签src属性引进的图片(非背景) 怎么样 才能适应不同的分辨率_html/css_WEB-ITnose
-
Web蓝天白云的极致体验_html/css_WEB-ITnose
-
html发布到外网中的include问题_html/css_WEB-ITnose
-
html 学习(一)_html/css_WEB-ITnose
-