读《CSS禅意花园》

  本文关键词：CSS禅意花园，由笔耕文化传播整理发布。

CSS大道至简--读《CSS禅意花园》

CSS大道至简

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

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

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

来表现，这样页面就变成了两层：HTML代表的文档层，CSS代表的表现层，为了两层之间的灵活可以添加JavaScript层。
 

文档类型声明让浏览器和用户（包括搜索引擎）知道你使用的HTML语言类型，是一个健壮文档所必需的。之后的Title应该概括当前页的内容而不是千篇一律的标识系统名称。

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

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

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

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

页面上添加这样一个空脚本可以解决IE中文档样式短暂缺失的情况。
 

标签的一个重要作用是图像替换

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

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

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

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

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

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

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

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

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

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

：inline

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

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

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

：负外边距同时使用绝对定位：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. 

发表于

  本文关键词：CSS禅意花园，由笔耕文化传播整理发布。