团队高效简洁的CSS–周炜.ppt

重新设置浏览器为HTML元素默认制定的显示样式，因为各个浏览器默认的样式都有区别， 在编写自己的样式前先将默认样式重置，可以让我们在一个统一的基础上展开工作，编写 样式表还有个好处就是不用再样式表中反复设置同样的规则。 比如没有在自己的CSS里面规定超链接有没有下划线的时候，有些浏览器有，有些浏览器没有； 再比如有一些浏览器规定的超链接默认颜色是蓝色，有一些又是黑色。 而这个CSS的功能就是对几乎所有的默认样式进行重置，让所有的浏览器上对于未定义的样式浏览效果达到一致 为了展示一组相互关联的图标，大部分网站的做法是采用雪碧图（CSS Sprites ），把这些图标放在一张单独的图中，结合使用CSS的background和background-position属性渲染图标。 引入雪碧图的本意，是减少浏览器发起的http请求数。本来多张图标是要发起多次请求，合在一张图片上，只需要发起一次请求。 图标字体（iconfont），是一种把图标放入自定义字体中，然后使用字体来替代显示普通图标的技术。 字体可以使用的css技巧，它全部适用。例如，改变大小拉伸不变形，变换颜色，添加阴影渐变效果等。更重要的是，它们的体积很小，合在一个字体文件内，和压缩好的雪碧图不分伯仲。 兼容包括 ie6/7/8 在内的各主流浏览器 为了展示一组相互关联的图标，大部分网站的做法是采用雪碧图（CSS Sprites ），把这些图标放在一张单独的图中，结合使用CSS的background和background-position属性渲染图标。 引入雪碧图的本意，是减少浏览器发起的http请求数。本来多张图标是要发起多次请求，合在一张图片上，只需要发起一次请求。 图标字体（iconfont），是一种把图标放入自定义字体中，然后使用字体来替代显示普通图标的技术。 字体可以使用的css技巧，它全部适用。例如，改变大小拉伸不变形，变换颜色，添加阴影渐变效果等。更重要的是，它们的体积很小，合在一个字体文件内，和压缩好的雪碧图不分伯仲。 兼容包括 ie6/7/8 在内的各主流浏览器 实现更加高级的交互、样式更加的美观酷炫。 里面包含了常用组件的样式，例如图中的btn、tab模块。 里面包含了常用组件的样式，例如图中的btn、tab模块。 团队高效简洁的CSS 周炜 2014年04月 现状 Alice的解决方式 Alice介绍 内容： 1 2 3 现状——混乱的命名 myorder 和 我的信息？ 现状——低效的写法 重复的样式定义，低效！ 现状——糟糕的维护 相关联的样式被隔开 Alice 解决命名混乱——表意的命名 Alice命名要求表意，模块的命名表示它具体的功能含义 ui-button : 按钮 ui-tab : 标签页 ui-paging : 分页 解决书写低效——合并相同属性样式 Alice要求合并相同的样式，当各个样式有单独的属性时，再分离出另写。 把两个样式的公用部分定义成basebtn，然后针对它们不同的样式再单独设置 提升维护性——聚拢的样式块 Alice要求相关的样式书写时应该聚拢在一起，避免不相关的样式混杂在一起。 把所有相关的button样式代码都写在一块，达到聚拢的样式效果，从而提升代码的维护性。 提升维护性——采用继承 通过类似Java继承的方式对模块的样式进行扩展 通过ui-button-lorange来完成样式的继承扩展 Alice介绍 Alice简介 Alice是支付宝样式解决方案，是一套模块化的样式命名和组织规范。 Alice 的样式组织分为两个层级： 基础框架（base.css +iconfont + 栅格 + animate.css + 常用样式类） 通用模块（alice.css） 由于不同浏览器缺省的样式各不相同，导致相同的页面设计和实现在不同的浏览器上展现不同——这是最常见的兼容性问题。而base.css的目的就是解决该问题。 Alice基础框架——base.css Alice基础框架——iconfont 直接引用icon 把icon拼接到一张图上，使用sprite技术 使用iconfont技术 大部分网站的做法是采用雪碧图（CSS Sprites ），把这些图标放在一张单独的图中，结合使用CSS的background和background-position属性渲染图标。 最传统的方式 iconfont提供了一种通过把icon图标打包成矢量化字体的方式对图标进行管理。 优点： 轻薄：使用icon图片的大小是字体的4-10倍。 百搭：矢量化，在不同的分辨率屏幕上适配缩放不失真！ Alice基础框架——iconfont的优点 怎么使用？ data-ico