隨著移動互聯世界的到來，目前已發展到多種移動操作系統割據的局面，而開發者則急需要能運用原有的開發知識和技能，快速方便地構建移動應用程序，并期望能運行在不同的手機操作平臺上，比如Android,iOS,黑莓等。
而目前，出現了一批十分優秀的支持HTML5/CSS3的移動應用開發框架，其中最為大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com)，它可以讓熟悉jQuery框架的開發者快速開發出基于HTML5的移動應用，而且直接通過手機的瀏覽器即可瀏覽。除此以外，jQuery Mobile也有很好的擴展性，用戶可以很好地對其進行定制修改，本文將指導讀者對jQuery Mobile的提供的主題樣式進行自定義，從而創建符合用戶需要的樣式。
本文假設讀者已具備初步的jQuery Mobile相關知識，如果讀者不大了解jQuery Mobile，可以通過如下幾篇文章進行學習，文章鏈接地址為：
統一接口工具JQuery Mobile簡介
http://tech.it168.com/a2010/1210/1136/000001136835.shtml
使用JQuery Mobile實現手機新聞瀏覽器
http://tech.it168.com/a2011/0321/1168/000001168231.shtml
JQuery Mobile實現手機新聞瀏覽器(2)
http://tech.it168.com/a2011/0323/1169/000001169682.shtml
使用jQuery Mobile實現新聞瀏覽器(3)
http://tech.it168.com/a2011/0324/1170/000001170077.shtml
jQuery Mobile中的主題
在jQuery Mobile中，有一個建議的頁面模版結構，其中包含了比如頁面頭部，頁面主體和頁腳等部分。jQuery Mobile使用HTML5中的data-role屬性進行定義，下面的代碼中就顯示了一個主體頁面的框架：
<div data-role=”page”>
<div data-role=”header”>
<h1>Page Title</h1>
</div>
<div data-role=”content”>
<p>Page content goes here.</p>
</div>
<div data-role=”footer”>
<h4>Page Footer</h4>
</div>
</div>
而另外一個建議使用的元素是標簽，這個標簽的作用是指定瀏覽器以何種方式在手機上顯示網頁，代碼如下：
<meta name=”viewport” content=”width=device-width, initial-scale=1″><meta viewport>標簽對于在移動設備上正確顯示移動網頁是十分重要的，如果不使用該標簽，則頁面內容在顯示時可能會失真或者變形，或者是根本不能適合移動設備瀏覽。在下圖中，顯示了一個使用標簽的頁面，可以看到，頁面內容的顯示能適合移動設備的大小。
jQuery Mobile框架中，包含了一個頁面主題的框架，它提供了對頁面樣式的相關控制功能。通過使用HTML5的data-theme屬性標簽，能輕易為某一個 頁面元素應用已有的jQuery Mobile的樣式。默認的主題樣式有5種，使用英文字母去區分，比如A-E開頭的都內置的樣式，開發者可以通過下載jQuery Mobile的代碼中去學習了解這樣樣式文件是如何編寫的。假如開發者要編寫新的樣式，可以使用F-Z字母中的任意一個去命名新建立的樣式，然后就可以編 寫相關的代碼。