Angular 2+ (Now 5.0) 应用程序使用的是常规CSS样式，意思就是说CSS标准中的所有东西都可以直接在Angular应用程序中直接使用。

一、如何使用组件样式？

在编写Angular2组件时，不光只是定义HTML模板，同时也需要利用CSS对HTML模板进行美化。最简单的是在组件元数据里定义 styles 属性，其是一个含CSS代码的字符串数组，比如：

@Component({
  selector: 'hero-app',
  template: `
    Tour of Heroes
    `,
  styles: ['h1 { color: red; }'],
  directives: [HeroAppMainComponent]
})

组件样式不同于传统和全局style（即来包裹其样式内容，通常我们只需要一个项即可。

2、模板内定义style标签

我们可以在模板里嵌入一个

`Controls`



`
})

3、元数据设置外部样式

设置组件元数据的 styleUrls 属性，它是指定一个外部样式的URL地址。

@Component({
  selector: 'hero-details',
  template: `
    {{hero.name}}
    
    
  `,
  styleUrls: ['app/hero-details.component.css'],
  directives: [HeroTeamComponent]
})

URL地址必须是相对于应用程序根目录开始。

4、模板内定义link标签

我们可以在模板里嵌入一个标签，与 styleUrls 效果相同。

@Component({
  selector: 'hero-team',
  template: `
    
    Team
    
      
        {{member}}
      
    `
})

5、@imports方法

我们也可以标准CSS的 @import。

@import 'hero-details-box.css';

与前面两者URL导入方式不同，其相对路径是组件所在的位置。

四、组件样式封装类型：原生、仿真、不封装

我们可以通过组件元数据来控制对样式的封装类型，Angular2有三种样式封装模式：

原生

视图封装是使用浏览器原生的影子DOM（Shadow DOM），这是Web组件新提出一种方法，目前浏览器的支持情况还不是很好。
仿真

视图封装是采用影子DOM（Shadow DOM）的写法，但Angular2最终会生成传统的CSS选择器来解决浏览器不支持影子DOM（Shadow DOM）的情况。
不封装

意思就是说Angular不会对视图进行任何封装。可以在组件元数据里 encapsulation 属性，重新定义我们的视图封装类型。比如设置为原生视图封装：

import { Component, ViewEncapsulation } from 'angular2/core';

@Component({
    encapsulation: ViewEncapsulation.Native
})

五、仿真视图封装生成的CSS

当使用Angular2默认仿真视图封装时，Angular2会预处理所有组件样式。在影子DOM里有个影子边界的概念，它是保证元素样式不受其它样式影响，这也是Web组件里最核心的功能之一。所以，在仿真视图封装时就需要对这些样式进行重命名。

当我们透过浏览器的元素检查看到的都是这样的代码：


  Mister Fantastic
  
    Team

生成的代码有两种属性风格：

一个影子DOM的宿主元素会生成一个 _nghost 属性。
一个影子DOM的影子元素会生成一个 _ngcontent 属性。

这些属性的确切值并不重要，是由Angular2自动生成，并确保唯一性。最终生成把结果放在一个新创建

Angular 组件样式

一、如何使用组件样式？

Tour of Heroes

2、模板内定义style标签

Controls