2.6 组件样式
刚刚我们其实已经使用了组件样式，这里简单介绍一下什么是组件样式。对于我们写的每个Angular组件来说，除了定义HTML模板之外，我们还要定义用于模板的 CSS 样式，指定任意的选择器、规则和媒体查询。
实现方式之一，是在组件的元数据中设置styles属性。styles属性可以接受一个包含 CSS 代码的字符串数组。通常我们只给它一个字符串就行了，就像我们在LoginComponent中做的那样：
@Component({
selector: 'app-login',
template: '
<div>
<input type="text"
[(ngModel)]="username"
/>
<input type="password"
[(ngModel)]="password"
/>
<button (click)="onClick()">Login</button>
</div>
',
styles: ['
input.ng-invalid{
border: 3px solid red;
}
input.ng-valid{
border: 3px solid green;
}
']
})
组件样式在很多方面都不同于传统的全局性样式。我们放在组件样式中的选择器，只会应用在组件自身的模板中。上面这个例子中的input选择器只会对 LoginComponent模板中的<input>标签生效，而对应用中其他地方的<input>元素毫无影响。
这种模块化相对于CSS的传统工作方式有如下优点：
CSS 类名和选择器是控件范围的。属于组件内部的，它不会和应用中其他地方的类名和选择器出现冲突。
组件的样式不会因为别的地方修改了样式而被意外改变。
可以让每个组件的CSS代码和它的TypeScript、HTML代码放在一起，这将构成清爽整洁的项目结构。
修改或移除组件的CSS代码时，不用搜索整个应用来看它有没有被别处用到。
本章代码：https://github.com/wpcfan/awesome-tutorials/tree/chap02/angular2/ng2-tut
打开命令行工具使用 git clone https://github.com/wpcfan/awesome-tutorials 下载。然后键入git checkout chap02切换到本章代码。
