CSS大道至简

只承认一个个确实存在的东西，凡干扰这一具体存在的空洞的普遍性概念都是无用的累赘和废话，应当一律取消。如无必要，勿增实体。

---奥卡姆剃刀

周末找了两个主题研究了一下：CSS 正则表达式

看了《CSS禅意花园》，第一遍看完感觉意犹未尽，第二遍随手记下关键之处：
 

1.   HTML语言的本意是以结构化的方式表示文档 。一些基本的HTML的元素被滥用于页面布局中。例如Table就是用来显示二维数据，而不是用于页面布局，我们这样用是因为它一直表现的良好。而Font本来是文档级别的标签的确是过度使用了。
 

2.   HTML只关注文档，至于样式完全交给CSS来表现，这样页面就变成了两层：HTML代表的文档层，CSS代表的表现层，为了两层之间的灵活可以添加JavaScript层。
 

3.   看看这行经常被我们顺手删掉的代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
文档类型声明让浏览器和用户（包括搜索引擎）知道你使用的HTML语言类型，是一个健壮文档所必需的。之后的Title应该概括当前页的内容而不是千篇一律的标识系统名称。

4.  原则：根据文档的内容和结构选择HTML元素，而不是HTML的样式。
换句话说，HTML标签使用得越少越好
例如用P包含段落而不是为了换行，blockquote包含引用的语句而不是为了缩进


5.   为什么基于Web标准开发？更小的文件 更快的下载速度 更好的可访问性
（W3c content-accessibility guidelines）


6.   XHTML标准中可用的HTML元素较少，使用了一些更有明确意义的，如果你没有找到合适的标签来描述一个结构可以使用span div代替。当然也要避免滥用DIV，嵌套太多层不是一个好主意。


7.   应用样式可以使用class id前者是可以复用的，而后者在一个页面上是独一无二的

8.   <script type="text/javascript" ></script>页面上添加这样一个空脚本可以解决IE中文档样式短暂缺失的情况。
 

9.   页面上如果使用了img那么我们的页面就被限制在这个确定的图片中，推荐的替换方案是：
<div id="img"><span></span></div> span标签的一个重要作用是图像替换


10.  基于标准的设计很重要的一个目标就是避免不必要的元素。

11.  内容决定样式，如果内容本身就十分复杂，而且足够吸引浏览者的注意那么就没有必要添加过多的修饰。
 

12.  图标是简化了的符号，用来标识某一个事物和概念，或者用一个抽象化的图形来代替一段很长的文字。


13.  线条的作用是增加页面的韵律和层次，但是过多的线条会给浏览者网格结构的暗示，无论你的原意是不是这样。所以线条只用在最需要的地方。


14.  为页面留白是一个很好的理念，文本需要呼吸的空间，浏览者需要思考的空间。间隔的空白并不是什么都没有，信息显示的方式更加优雅，让浏览者倍感轻松。

15.  光和影的作用是增强真实感 距离感 和层次感，说到底是怎样使用光源的问题。错误的使用光源会把问题搞糟，比如光影效果的不一致。


16.  形状：圆形经常和女性、温暖舒适 爱情联系在一起；圆弧经常和社区、群体、忍耐、运动、安全的含义。三角形通常让人联想到男性阳刚表达诸如强壮、攻击、运动感等含义。浏览者的目光经常被棱角的方向导向，指向上方代表攻击性，指向下方则暗示出消极的意义。方形暗示了力量和根基可以让它看起来足够的监视稳重。


17.  色彩：蓝色是全世界范围内都被广泛接受的颜色。红色和白色同时使用有加强的意义。绿色在美国让人联系到金钱，在其它的文化环境中不一定。橙色标识降价，这也是一个世界范围内的共识。黄色代表了温暖乐观。紫色一直是页面配色的禁忌。棕色是一种中立颜色。黑色代表沉重，白色代表纯洁，可是同时这两种颜色都有悲伤和死亡的暗示。
不同的颜色还会引起浏览者不同的心理联想。CSS现在支持17中颜色。


18.  图案：是重复填充到指定区域的一小块视觉元素；CSS background-repeat属性就可以灵活的解决这个问题。


19.  布局：HTML文档流按照声明顺序显示在页面上，absolute可以将文档中的位置从原来的位置上删除，并重新定位到新的任意位置上；float并不是定位选项而是给元素分配空间，然后然文档中的其它元素自动环绕其周围；float的优势在于它保留在文档之中而周围的元素也清楚它的位置。
绝对定位是一个最直接最有效最简单的布局方式，而如果那些需要考虑页脚，或者其它元素需要了解周围元素的布局，Float是不二之选。
 

20.  IE浏览器会将浮动元素的水平外边距加倍，权宜之计就是添加display：inline


21.  如果一个页面需要分三栏而且有头尾，分出的三栏又宽度高度不统一可以使用#Wraper
float的方式，然后Footer使用Clear：both来清除前面定义的浮动定义。


22.  巧妙的组合使用布局，唯一可能让作品受限制的就是创造力。

23.  流式布局liquid页面宽度使用百分比指定，所以浏览器大小变化的时候，页面的宽度也变化。而固定布局的时候页面宽度是不变化的。
 

24.  页面居中：路子1：在要居中的元素外面套一层Div，设置width 并将margin-left margin-right设置为Auto
路子2：设置text-align为center并应用到body上，遗憾的是我们还要添加一个文本居左对齐的代码，因为内容文本也居中了。
路子3：组合使用自动外边距和文本对齐：使用路子1并把text-align设置为left
路子4：负外边距同时使用绝对定位：position：absolute left;50% margin_left:-380px 这是目前最好的方案


25.  LOGO：为什么很多网站都放在左上角？因为浏览者的目光首先落在这里；
右上角的内容重要性略输于左上角，但是还是高于其它部分的内容。


26.  内容溢出:使用浮动就一定要同时清除浮动,使用浮动的时候最容易出现的情况就是内容溢出.限制溢出的方法:1.清除浮动 2.同时使用overflow 这个方法比较好 3.斜有时候也会引起内容溢出4.单位使用em代替px


27.  图像:图像的格式有很多种，但是适合Web的只有三种：GIF JPEG PNG；Jpeg不支持透明度 GIF支持1位的透明设置 PNG支持8位的透明度


周末看的电影:《男儿当自强之莫欺少年穷》 主演：Beyond

周一的时候要记得给花换水！

Let life be beautiful like summer flowers and death like autumn leaves.