组件_组件模板的样式

为组件的模板定义样式，有以下几种方式：

1. 引用外部文件

   我们生成组件的时候生成了一个<component-name>.component.css文件，这个文件就是模板的样式文件。

   。

   有了外部样式文件之后，要在组件文件中进行引入。把 styleUrls 添加到 @Component 装饰器中，styleUrls的值是一个数组，数组中的每个元素代表样式文件的文件路径，我们可以有多个样式文件。

   

2. 直接写在组件内部

   把 styles添加到 @Component 装饰器中，styles的值是一个数组，数组中包含CSS规则的字符串。

   

3. 模板内联样式

   可以直接在组件的 HTML 模板中写 <style> 标签来内嵌 CSS 样式。

   xxxxxxxxxx
   <style>
       p{
           width:100px;
           height: 100px;
           background: pink;
       }
   </style>
   <p >product-list works!</p>
   

通过多种方式定义的样式，会进行合并。

实时效果反馈

1.使用哪个属性引入外部样式文件：

A styleUrls

B styles

答案

1=>A