第5章 Ionic内置CSS样式

在第3章读者已经了解了AngularJS的相关基本概念和使用方式，它需要一定时间学习上手和反复练习才能做到有效掌握。笔者在第6章将开始介绍的Ionic内置指令与服务组件全面使用了AngularJS进行封装，在初始化和执行效率上会比自行编写纯CSS与JavaScript事件处理脚本有一定的性能损失。因此对于静态的局部控件或是布局简单的页面，可以选择只使用Ionic的CSS样式文件的方式进行渲染。

本章将介绍不使用Ionic内置指令组件的条件下只依赖Ionic的内置CSS样式文件进行页面布局和开发。在某些页面出现性能问题的时候，本章介绍的开发方式或许也能成为考虑优化的方向之一。此外最重要的一点是，后面要学习和使用的Ionic内置指令几乎都是要和这些CSS样式配合使用的，所以本章的内容是后面章节的前导知识准备。

本章主要涉及的知识点有：

● Ionic提供的常见APP界面组件集样式：从整体栅格布局对齐到HTML组件的界面定制组合。

● 如何自定义界面：通过修改SCSS文件的变量定义来改变从默认颜色到边距值等。● 内置图标集的使用：查找并在合适的位置为HTML组件添加图标。

学习完本章的内容后，将能利用Ionic提供的各类布局与功能类CSS组件，快速完成类似图5.1携程首页布局的设计，这也将是本章最后一节作为知识巩固项目的内容。

图5.1 携程首页布局