完成了 HTML 與 JavaScript ，接下來要利用 CSS 設定應用程式的外觀，以提供良好的使用者體驗，這一篇來看加法運算器的 CSS 設定。
完成了應用程式的基礎功能，在預設的情形下，網頁只呈現了 HTML 定義的外觀，還不適合開放給使用者，因此接下來必須透過CSS 調整其外觀，同樣的，我們繼續前一篇文章「1.5.1 開始發展應用程式/開發一個加法運算器」的範例，如下圖，來看看其中必須調整的部份，有幾個部份，以下逐一作說明。
縮短文字方塊長度
預設的文字方塊太長必須將其縮短，要達到這個目的，只需設定width 樣式即可，以第一個文字方塊為例，設定其style 屬性如下：
<input id="a" type="text" style="width:60px;" />其中設定了一個width 樣式指定其值等於60px ，px 是像素單位，表示以60 個像素的寬度呈現文字方塊，完成後的畫面如下：
如你所見，左邊的a 文字方塊變短了，同樣的，右邊的文字方塊依相同的方式進行設定即可，最後的結果如下：
放寬加法符號（+）的邊距
完成設定之後，接下來調整文字方塊與+ 的距離，對於左邊的文字方塊，需要的屬性是margin-right ，這個屬性表示與右邊元素的距離，同樣以像素為單位，將其設定如下：
<input id="a" type="text" style="width:60px;margin-right:10px;" />這一次的style 設定了 margin-right 樣式項目為10 px ，如此一來，a 文字方塊會與它右邊的元素保持10px 的距離，如下圖：
接下來要調整右邊文字方塊，由於+ 在其左邊，因此設定 margin-left 屬性值如下：
<input id="b" type="text" style="width:60px;margin-left:10px;" />完成兩個文字方塊的設定，最後就得到以下的畫面，這一次符號+ 多出來空間不再與文字方塊連在一起。
調整數值呈現方向
由於這個應用程式提供的是兩個數值資料的加法運算，因此使用者於文字方塊輸入的均是數字，而通常數字資料會以靠右的方向呈現，而非文字資料的靠左，要達到靠右的效果，所需的樣式項目是 text-align ，這個項目預設是靠左對齊，樣式值為left ，明確的將其指定為right 即可，如下式：
<input id="a" type="text" style="width:60px;margin-right:10px;text-align:right;" />現在，檢視其效果，由於只設定了左邊的a 文字方塊，因此當輸入數字之後，於未設定的b 文字方塊效果差異如下：
現在，左邊的文字方塊已經靠右對齊，而右邊的文字方塊則維持預設值－靠左對齊。
到目前為止我們完成了所需的CSS 設定，完整的設定如下：
<body>
<input id="a" type="text"
style="width:60px;margin-right:10px;text-align:right;" />+
<input id="b" type="text"
style="width:60px;margin-left:10px;text-align:right;" />
<button onclick="add()" >＝</button>
<output id="result"></output>
</body>在 a 與b 的兩個input 元素中，設定了 style 屬性，在網頁上呈現的結果如下：
如你所見，相較於原來的外觀，經過CSS 調整的操作介面呈現了比較合宜的視覺效果，當然，這是相當基礎的設定，事實上這個範例不需要 CSS 調整也能讓使用者操作，甚至你不需要 CSS 也能深入其它的課程，但這不代表你就可以不重視 CSS ，未來當你建立更複雜的應用程式，沒有 CSS ，你的應用程式介面將很難進行彈性設計與維護，甚至不容易讓使用者理解與使用，同時也不利於瀏覽器的解譯，所以在 HTML5 開始入門之際，隨時將 CSS 融入你所接觸的任何範例學習與設計，讓 CSS 成為 HTML5 開發的一部份，是相當重要的事 。
下一篇，我們還會進一步討論 CSS 選擇器與 HTML 的分離設計，這一部份與 JavaScript 的元素選取操作有相當重要的關聯，下回見。