页面的主题样式

　　我们先来看下如何定义页面主题样式。页面的主题样式是通过data-role来指定属性的值为page,再使用data-theme主题指定使用的样式，如下代码：

　　这里指定了使用一个新的主题样式，命名为”f”。实际上，jQuery mobile框架为自动为当前的页面增加对应的CSS样式，下面代码就是浏览器在执行代码后返回生成的代码：

　　可以看到，其中的样式class="ui-page ui-body-f ui-page-active"为jQuery mobile添加的样式。其中ui-page和ui-page-active为根据data-role的设定样式去进行设置赋值，而ui-body-f则为用户自定义的样式，下面是一个自定义的ui-body-f样式的代码：

　　在这个自定义的样式中，定义了背景颜色和字体。如果要对某一个移动页面中的某些元素进行自定义，也是可行的，可以使用的方法为在样式中指定页面的元素名，如下代码所示：

　　其中指定了对页面中的文本框和密码框，使用的是ui-body-f的CSS样式。

　　因此，只要掌握了这种方法，开发者就可以对页面中的各类元素进行样式的定义了，十分方便。