Simple Note

CSS禅意花园 阅读笔记

2016.01.21

借到的这本还是07年的老版...看完没有太大感觉,可能是段位不够,还没到需要整体设计网站的层次,并没有太多很有启发的地方。暂时把感觉有用的要点记在下面,等弄到新版的书再补充。

  1. 关于Web标准

    所谓的Web标准,只是一种建议,并不是强制执行的规定。以前也有过颁布的标准过于激进,因为兼容性等问题不受厂商待见,最后不得不废弃的例子,看来Web这块比较乱也是没办法的事情,运行环境不掌握在开发者的手里,强制开发者也没有什么用。

  2. “因为汉字笔画复杂、样式美观,所以很多设计师非常欣赏他所体现出来的细节,一种典型的设计方式就是一知半解地将若干汉字拼凑起来,以体现某种神秘的意味。”就跟不少中国产品喜欢用英文当装饰一样……看来不是英文美也不是中文美,是看不懂的就美。

  3. 标签和元素的区别

    标签是简单的HTML分隔符,如<p><div>,而元素是由一对开始与结束标签构成的,用来包含一些内容——有例外,如<br/>,既是开始标签又是结束标签,其中又不含任何内容。

  4. 指定语言和字符集

    搜索引擎会根据搜索请求的语言来过滤搜索结果,所以指定正确的网页语言很重要。这点之前没有意识到,编辑器默认补全时指定的语言为:<html lang="en">,而在中文网页中最好设置为:<html lang="zh-cmn-Hans">,有时候谷歌搜东西明明指定了只出现英文结果但还是有中文网页,估计也是因为它们的网页语言没有设置对。

  5. 避免过度使用div和span

    这个度在哪里呢?我觉得无非就是说header、nav、footer、aside等一系列有明确语义的标签的适用范围内,不要用div和span去代替它们。

  6. 关于禅意花园的源码

    网站现在的源码已经和书上的不一样。现在的版本更符合HTML5语义化的标准,修改了页面字符编码为utf-8(之前为ISO-8859-1);添加了rss输出;去掉了一些为老式浏览器作的hack;标签的类名也改了好多,许多以前只有id的标签现在同时也有了类名。不过有一点不理解,注释里说要用类来设置样式而不要用id,那设置id的目的是什么?向后兼容?可是明明id名都已经改了?

  7. “人们非常需要一个编写各种网站时能够遵从的‘放之四海皆真理’的标准,但这样的标准是没有的,相反,真实世界中的实例网站却是最好的学习对象,它们在阐明标准方面要远远好于禅意花园这一类的演示站点。”

  8. 是首先在ps中拟出设计的草图再转向css中,还是一开始就直奔主题编写css?作者说看完第二章就有答案,第二章的六个作品几乎都是用ps先设计出来的,所以作者应该是更推崇先设计草图。

  9. 使用阴影的建议:

    1. 阴影的亮度表示物体与阴影投射表面的距离,深色阴影表示物体离背景近,浅色表示离得远,更靠近观察者;
    2. 阴影的长宽也会造成不同的距离感,细小的阴影让人感觉物体离背景近,较宽大的反之;
    3. 保持光源的真实性,多个对象的阴影方向要统一。
  10. 正空间与负空间

    正空间是组成作品的对象所占据的空间,负空间是非作品对象(即背景)占据的空间,二者相互依赖,负空间起到定义正空间边界的作用,作品中对象的边界也是负空间的开始。(没怎么懂...)

  11. 外边距折叠没怎么懂,再好好看一下。

  12. 利用负外边距使容器居中:先绝对定位于上50%左50%的位置,然后设置容器的左外边距为容器宽度的一半,上外边距为高度的一半,容器即可居中。

  13. ​平面布局的四象限:如果文字布局的顺序从左到右、从上到下,浏览者会按照这个顺序区分四象限内容的重要程度。左上会吸引最多的目光,右上其次(在任何页面上,无需滚动即可立即看到的区域都是最重要的部分),底部的两个象限并没有那么重要。

  14. 左右两栏宽度比为2:3是一个比较经典的和谐比例(近似黄金分分割比0.618)

  15. “方框问题时Web设计的阴影。”但是现在的很多网页看上去还是一个个的盒子…作者认为这不应该怪css,可是css最基本的表现形式就是盒模型啊...如果一开始就是圆形的元素盒子就不会有这么多方框了。

  16. “大多数Web页面都主要关注于如何用足够可用且吸引人的方式传递信息,人们都要求设计师的作品有足够的创意,所以不得不承认Web站点最主要的需求就是按照惯例将图像和文字以二维的方式合理美观地组织起来。”

  17. “根据css的定义,px实际是一个相对单位。”是相对屏幕分辨率而言的。

Comments
Write a Comment