styles - 設置模板樣式
組件既然處於UI層，就應當好看些，好看是構造良好用戶體驗的一部分。Angular2的 組件模板基於HTML，那么顯然，我們需要通過樣式表/CSS來調整組件的外觀。
和模板類似，我們有兩種方法為組件設置CSS樣式：
1. 內聯樣式
可以使用組件View注解的styles屬性來設置內聯樣式：
1 @View({ 2 styles:[` 3 h1{background:#4dba6c;color:#fff} 4 `] 5 })
2. 外部樣式
也可以把樣式定義在單獨的文件中：
1 /*ez-greeting.css*/ 2 h1{background:#4dba6c;color:#fff}
然后使用View注解的styleUrls屬性來引入外部樣式：
1 @View({ 2 styleUrls:["ez-greeting.css"] 3 })
例如：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>template- styles</title> 6 <script type="text/javascript" src="lib/system@0.16.11.js"></script> 7 <script type="text/javascript" src="lib/angular2.dev.js"></script> 8 <script type="text/javascript" src="lib/system.config.js"></script> 9 </head> 10 <body> 11 <ez-app></ez-app> 12 <script type="module"> 13 import {Component,View,bootstrap} from "angular2/angular2"; 14 15 @Component({selector : "ez-app"}) 16 @View({ 17 styles:[` 18 div.ez-greeting{font-family:Courier;background:#ede7f6;box-shadow:0 2px 5px 0; } 19 h1{background:#4dba6c;color:#fff;text-align: center} 20 div.content{padding:10px;} 21 `], 22 template : ` 23 <div class="ez-greeting"> 24 <h1>Hello,Angular2</h1> 25 <div class="content"> 26 <p> 27 使用ES6開發Angular2應用的一個好處就是，可以不用拼接樣式字符串了。 28 </p> 29 <ul> 30 <li>在樣式中可以使用任何標准的CSS語法</li> 31 <li>如果樣式定義在單獨的文件里，可以使用styleUrls引入</li> 32 </ul> 33 </div> 34 </div> 35 ` 36 }) 37 class EzApp{} 38 39 bootstrap(EzApp); 40 </script> 41 </body> 42 </html>
結果如下：
