企业级应用开发架构的现状与趋势 - Part 4
目录
网站的可视化设计是一门很深的学问,和平面设计不同,它不是那种Pixel Perfect要求非常精确排版的东东,而是使用一门描述性的语言CSS配合HTML来指导浏览器布局整个页面。
作为一个全栈开发人员,了解并掌握CSS基础是无可避免的,现在有类似Bootstrap这样的框架存在,使得即使不精通CSS的程序员也能做出像模像样的页面,但是不要被这个假象所迷惑,要精通CSS还是要花费大量的时候和精力的。
本文介绍几个CSS最基本的特性,比如盒模型,继承,冲突决议和浮动。
盒模型
HTML提供页面的结构(由一系列的标签构成),在其中放置ID,Class,以便CSS选择器能够找到需要应用样式的标签。从浏览器的角度来看,所有标签都是一个盒子(BOX),它有Margin,Padding,Border和Content。而标签主要分为两种,块级(Block)标签(典型代表DIV)
,和行级(inline)标签(典型代表SPAN)
。
继承
CSS一个特点是子标签能够自动继承祖先标签的某些属性,比如字体,颜色什么。这能够帮助你简化你的CSS规则。
冲突决议
冲突决议解决这样一个问题,当有多条CSS规则应用到同一个标签上面的时候,如果规则内的内容有冲突,最后到底应用哪一条规则的问题。总体原则是“特例优先原则”。比如有一个class选择器和id选择器同时应用到一个标签,id选择器的内容会优先被选择。
浮动
默认情况下,所有块级标签都是从上到下排列,所有行级标签都是从左到右排列,浮动通过把标签移动到容器的左边和右边来实现更为复杂的布局,比如多列布局。
Bootstrap
如果说AngularJS把我带入了JavaScript的世界,Bootstrap则把我带入了CSS的世界。Bootstrap提供一个网格结构和标准控件样式,以及多个常用的JavaScript组件,你会发现你一行CSS代码没有写过的情况下,已经能够做出一个看上去像模像样的页面了。初期的惊喜过后,通过阅读Bootstrap的代码,你可以掌握目前最为前沿的CSS技术以及设计模式,我认为每一个想要精通CSS的朋友都应该好好的研究Bootstrap的源代码。
结束语
不知不觉这个系列的文章已经写了四篇了,本来还计划写一些关于Node.js的,现在想来目前自己这方面的功力和经验还不够,这个就作为2014年的功课留到年底再做了。
简而言之,我十分看好Node.js在企业中应用前景,2013已经有沃尔玛和PayPal这样的公司大范围的使用了,让我们期待2014年吧。