在Angular中,styles.css是应用程序的全局样式表,它适用于所有组件。而styles.xxxx.css是组件级别的样式表,用于仅在该组件中使用的样式。xxxx是组件的唯一标识符,它可以是组件的名称、选择器或任何其他类似的标识符。
下面是一个示例,其中组件名为“app-component”:
h1 {
color: red;
}
在这种情况下,样式规则适用于应用程序中的所有组件。
:host {
display: block;
padding: 10px;
background-color: #ccc;
}
这种情况下,样式规则适用于仅在“app-component”中使用的组件。
使用组件级别的样式表时,请确保在组件元数据(@Component)中包括模板URL和样式URL。例如:
import { Component } from '@angular/core';
@Component({
selector: 'app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css', './app.component.xxxx.css']
})
export class AppComponent {
// ...
}