上一篇講了資料繫結和事件繫結，這一篇該講如何美化下我們的介面了，打算分為class繫結，style繫結和全域性樣式三個部分來講。此篇所有的程式碼在上一篇的程式碼基礎上新增。開始之前用編輯器開啟awsomeProject，通過ionic serve命令執行專案
class繫結
ionic 樣式使用的是scss，它是成熟穩定的CSS擴充語言，具體的用法大家可以自己去學習下。這裡就不討論了。home.html對應的樣式檔案當然是在home.scss中啦。修改home.scss程式碼如下：
home.scss
page-home {
.alert{
color:red
}
}
複製程式碼需要注意的是包裹在page.home中的樣式只可以在home.html中起作用，ionic自動將二者繫結，page-home對應的就是home.ts中的selector。
然後在home.html中修改程式碼如下（未提及程式碼不變，以…表示）:
home.html
...
<ion-content>
<p class="alert">{{2+3}}</p>
...
<p [class.alert]="isShown" *ngIf="isShown">看得到我</p>
...
</ion-content>
複製程式碼第一個是常見的用法，第二個就是Angular的語法了，通過 [class.class類名字]="模板表示式" 這樣的用法，動態的新增和刪除一個class類名，當模板表示式計算結果為true時，會新增。
擴充：假如我在同一標籤上有多個類名需要動態的計算後新增或者刪除，類似<p [class.alert]="isShown" [class.special]="isSpecial" [class.best]="isBest">{{2+3}}</p>，太多的話，寫起來很不好看。這個時候 ngClass 就派上用場了，大家自行學習。
執行後介面如下：
style繫結
通常我們會遇到只修改標籤的某一特定樣式的需求，比如說點選之後字型變大，背景顏色改變等等，這個時候就需要style繫結了。修改home.html中的程式碼如下：
home.html
...
<p class="alert" [style.background]="isShown?`black`:`blue`">{{2+3}}</p>
...
<p *ngIf="names.length>0" [style.font-size.em]="isShown ? 2 : 1">下面是陣列，長度為{{names.length}}</p>
...
複製程式碼從上面的程式碼看出，我們可以通過[style.css樣式屬性名]="模板表示式"這樣的方法來動態改變某一具體的樣式屬性。假如屬性還有單位的話，可以參考第二個例子。
擴充:假如我有多個樣式屬性需要動態的新增，類似<p [style.background]="isShown?`black`:`blue`" [style.color]="isShown?`red`:`green`" >首頁</p>，這個時候，你可以考慮ngStyle
儲存程式碼後，執行的介面如下：
全域性樣式
真實的專案通常會要求每個介面中某一元件的樣式保持一致，比如說Button按鈕正常狀態下是藍底白字，假如每個介面對應的scss檔案都要寫一份，無疑是吃力不討好，如何只寫一次所有的介面都遵循一樣的樣式呢？這個時候src/app/app.scss檔案就出場了。在檔案的最後面新增程式碼如下：
app.scss
.btn-primary{
background: powderblue;
color: white;
}
複製程式碼然後在home.html中修改程式碼如下：
home.html
...
<button class="btn-primary" (click)="onChangeTitle()">點選</button>
複製程式碼最後看下效果：
思考
假如app.scss和home.scss有一個同樣的類名叫title，樣式分別如下：
app.scss
.title{
color:red
}
複製程式碼home.scss
.title{
color:blue
}
複製程式碼而home.html中有一標籤如下：
home.html
<h1 class="title"> 猜猜我是什麼顏色 <h1>
複製程式碼問題就在程式碼中，答案請自己去試下吧。
後記
本人在寫一個ionic入門的教學手冊 ionic3-handbook，還有一個基於真實專案的ionic專案HW-basic，感興趣的可以看一下。