《高流量网站CSS开发技术》记录（二）

第四章、框架和整合

4.1 框架
     4.1.1 Blueprint CSS
          基于栅格的布局，提供了坚实的字体排版基础，对垂直节奏等方面有所考虑。还提供了重置样式表和打印样式表，以及基本的表单样式
     4.1.2 960 Grid System
          强烈关注栅格，提供一个跨浏览器的基础
     4.1.3 YUI 3 Grids
          不但提供CSS还包括了JS资源。没有预定义主容器宽度，只有预定义的“单位”，其中一个容器可以在另一个容器内展开
     4.1.4 其他用途
          CSS框架的一个常见用途是在原型阶段
     4.1.5 重置样式表
          1.通用选择器重置
               *{margin:0; padding:0;}
          2.Eric Meyer的重置样式表
               明确说明重置哪些元素，而不是用一个选择器通杀
               http://meyerweb.com/eric/tools/css/reset/
          3.YUI3 CSS重置
               非常精确的定义了哪些元素取哪些样式
     4.1.6 为什么要建立自己的框架
          模块化的重要性在于他允许在同一网站的不同部分、同一系统的不同子网站之间进行代码重用
          Twitter Bootstrap http://orioncomputing.com
          Buttons Navigation Labels Badges Typographic Thumbnails Alerts ProgressBars Miscellaneous
          Modal Dropdown ScrollSpy Tab Tooltip Popover Alert Button Collapse Carousel Typeahead
4.2 面向对象的CSS
     4.2.1 面向对象编程(OOP)
     4.2.2 OOCSS
          鼓励对代码片段的重用，且不依赖于具体套用这些样式的元素位置——CSS无论用在任何地方效果都应该一样
          http://oocss.org/
4.3 覆盖CSS
     使用覆盖CSS作为主样式表的补充，通常是创造不同设计主题和变化的最有效的方式
4.4 与第三方代码相处
     自己重新CSS且选择不包含第三方的CSS
     在构建你的CSS时尽量减少代码中可能产生冲突的地方，然后进行彻底测试
4.5 防御式CSS
     确保你的样式表具有正确的注释和文档，尤其是对于那些比较脆弱的部分
     在特定选择器中声明一些在此不必要声明的属性，其他选择器想要覆盖这个属性就不容易了
     对代码的一部分设置命名空间
4.6 脆弱的CSS
     解除CSS与内容的绑定关系以及对这一部分CSS的抽象化
     脆弱的CSS往往是复杂的CSS
4.7 CSS中的元数据
     HTML中meta，可以提供额外的文档信息，如author、description、language等
     添加自定义属性，内容用JSON表示
     <input type="text" class="{dataType: 'orderCode'}" />使用JQuery插件metadata获取

 

第五章、品牌实施

5.1 什么是品牌
     1.名称、标识、口号
     2.颜色、字体排版、图像
     3.表现风格
     4.价值观和使命
     5.客户和反馈管理
     6.店内体验
     7.其他
5.2 品牌指导标准
     品牌指导标准的类型多样。一些仅涉及品牌的视觉方面，像标识的使用、字体排版、颜色等；而其他一些深入到了品牌文化中，如价值观、工作流程或在不同场合下如何对待客户等多样化的主题
     Web品牌标准包括：
     1.关于底层栅格、变化方案以及如何使用的信息
     2.字体排版信息，关于首选字体、候补字体和缩放的信息
     3.配色方案
     4.尺寸：采用web友好的单位，如px,em或百分比
     5.共用和可重用的元素的规格，如导航、按钮、部件、表单、通知等
     5.2.1 指导标准的进化
          一份品牌指导标准的首要目的是确保一致性，将越来越多元素放在一起进行集中说明，以便于设计师和开发者参考
     5.2.2 设计库
          建立一个设计库，所有的样板都以片段(图像、HTML和CSS)的方式存储
5.3 字体排版
     明确定义使用何种字体，细节说明：字体大小、行高、字体粗细、外边距和内边框以及颜色
     5.3.1 图像替换与灵活性
          1.采用背景图像，并且给text-indent一个绝对值很高的负数将原始文件移出屏幕
          2.定制字体
     5.3.2 font-face
          CSS3标准
          @font-face {
               font-family: 'archisticobold';
               src: url('../fonts/archistico_bold-webfont.eot');
               src: url('../fonts/archistico_bold-webfont.eot?#iefix') format('embedded-opentype'),
                    url('../fonts/archistico_bold-webfont.woff') format('woff')
          }
     5.3.3 后备字体
          分别为某个单词设置两种不同字体，让其与首选字体格式的同一单词互相重叠，然后检查高度、宽度和粗细是否与首选字体相似
     5.3.4 尺寸单位
          以px为单位设置文本有两个优势：
          1.可以在设计中更好的控制
          2.不需要进行计算
          缺点是：
          有些浏览器不支持对设置了像素值的文本调整字体大小
5.4 颜色
     可采用的配色方案、适当的组合和比例定义、每种颜色在品牌色彩景观中的作用等
     5.4.1 多种配色方案
          颜色可以作为区分子网站或网站各部分的一件有力工具
     5.4.2 颜色参考
          /*
               main text     #333
               background     #f7f7f7
               :link,
               :visited,
               :hover,
               :active,
               :focus          #bc522d
          */
     5.4.3 动态颜色
          使用动态语言或者LESS、Sass之类的编译器来实现动态CSS
     5.4.4 后备颜色
          在RGBA定义之前增加一条定义来兼容早期版本的浏览器
5.5 布局
     5.5.1 栅格
          栅格为设计提供了一部分的依据，促进了更加坚实和周密的结构，并影响了一些设计的决策，栅格规则也是可以打破的
     5.2.2 模版
          模版是一份基本示例，用来演示HTML标记的结构以及与CSS的联系，他是未来页面的草图
5.6 主题
     样式表需要足够的灵活性，对一些规则的覆盖不会造成特殊性的噩梦

 

 

 

英文版书籍下载：

http://download.csdn.net/detail/loneleaf1/8319127