Angular4 開發(fā)實戰(zhàn)：(3) 使用CSS美化組件

• 使用樣式模板
  
• 使用樣式字符串
  

// card.component.ts   
styleUrls: ['./card.component.scss']   

// card.component.scss   
.card {   
  padding: 10px;   
  box-shadow: 0 0 3px rgba(0,0,0,.2);   
  margin: 10px 0;  
}

styles: ['h5 { font-weight: normal; }']

<app-card>   
  <h5 style="font-weight: normal">卡頭</h5>  
</app-card>

app-card {   
  display: block;   
  margin: 10px 0;   
  background: #eee;  
}

:host {   
  display: block;   
  margin: 10px 0;   
  background: #eee;  
}

:host(.active) {   
  background: red;  
}

:host-context(.theme-blue) {   
  color: blue;  
}

// card-header.component.html   

<div class="card-header">   
  卡頭  
</div>

<app-card>   
  <app-card-header></app-card-header>   
</app-card>

.card-header {   
  font-size: 25px;  
}

/deep/ .card-header {   
  font-size: 25px;  
}

<style>  
  div {color: #333;}  
</style>

<link rel="stylesheet" href="app.css">

@import 'app.css';