You are here 《超越CSS》

《超越CSS》


By Eric Tou - Posted on 08 三月 2011

《超越CSS:Web设计艺术精髓》 ,英文原名 <Transcending CSS> ,全文分为四章:发现、过程、灵感、卓越。

第一章 发现 讲述了CSS的基本概念,并对简单的标签进行了讲解
第二章 过程 如何逐步将CSS应用到一个静态页的设计实现中去 堪称精彩
第三章 灵感 通过很多举例讲述设计法则以及如何收集灵感
第四章 卓越 讲述了CSS3和把一些“进阶”技巧应用到设计中

此书全彩印刷,讲述过程中配大量插图,非常生动,是我目前为止所见的将Web开发技术与设计理念结合阐述得最好的一本。

以下是笔记,因为比较零碎,不用Mindmap,直接贴出

第一章 发现

运用所有有效的CSS选择符:属性选择符、子对象选择符、相邻选择符、伪类和伪对象。

避免运用Hacks和滤镜,如果运用Hack是不可替代的,那么这些Hack应该仅以那些被废弃的浏览器或已停止开发但运用颇广的浏览器为目标。

优化内容顺序而不管有还是没有样式表。组织文档内容,让它们在没有样式表的情况下也能够被阅读。

<h1>,它是一个顶级的标题,最重要的标题。

<blackquote>元素去描述一个人说的东西。

<cite>元素来引用说话人的名字。

第二章 过程

框架图:没有图片,仅文字和控件。

静态设计:静态页面。

将标签指南加入静态设计:标签指南被设计为展示标签在设计流程中最适合表达的每一个元素意义的简单概要。

创建交互的原型。

选择用于开发的浏览器(与插件):Firefox浏览器;Web Developer插件,实时编辑CSS;Firebug,查看DOM。

尽可能少地使用<div>标签。

组织CSS:可以通过位置来组织、按照元素组织、将CSS文件划分部分。

将CSS分成多个文件:layout.css,布局样式包含了显示属性、浮动、定位、宽度、高度、填充和边距;color.css,颜色样式包含了背景属性、颜色、图像,以及文本颜色;typography.css,版式信息包含了字体和字体大小,行高,字符间距和文本装饰。

将页面划分为区域:页头,站点标志;导航栏;主要内容;次要内容;页脚,站点信息。

不同的浏览器有不同的默认样式,一开始就重写浏览器的所有默认样式。通过重写和标准化浏览器制定元素样式的方式,你将获得对CSS和跨浏览器更多的控制。CSS Reset。

相对定位元素被安放在相对于正常流的位置。与标准流里的正常定位相比,相对定位的盒模型被偏移了。但这些元素仍被浏览器当成在标准流中考虑,其他元素不能占据其偏移后空出的空间。

绝对定位元素首先定位在最近的定位父元素下。如果没有定位父元素,它就会被定位到根元素<html>下。绝对定位元素被考虑到文档正常流的外部,因此其他元素能流动到它们偏移前所占据的空间。

已定位指position属性设为absolute和relative的元素。

display:inline和display:block。

第三章 灵感

没有笔记

第四章 卓越

没有笔记