angular项目css写在哪
１、在原数据中编写
我们可以在 @component 装饰器中添加一个style数组型属性。
这个数组中的每一个字符串定义了一个CSS属性。
例如：
@Component({
selector: 'app-root',
template: `
<h1>Tour of Heroes</h1>
<app-hero-main [hero]="hero"></app-hero-main>
`,
styles: ['h1 { font-weight: normal; }']
})
export class HeroAppComponent {
/* . . . */
}２、引入外部样式
通过把外部CSS文件添加到 @component 的 styleUrls 属性中来加载外部样式文件。
（相关课程推荐：Angular.js教程）
例如：
@Component({
selector: 'app-root',
template: `
<h1>Tour of Heroes</h1>
<app-hero-main [hero]="hero"></app-hero-main>
`,
styleUrls: ['./hero-app.component.css']
})
export class HeroAppComponent {
/* . . . */
}注意：这些在组件中通过这种方式加载的样式文件，只对当前组件起作用，不会作用于其他的组件，同样也不会作用于投影进来的组件。
当我们使用angular/cli来创建组件时：
ng g component componentName;
cli 会自动创建一个空的样式文件，与创建的组件文件在一个文件夹中。
3、使用link标签来引入样式文件
我们甚至还可以在组件的模板中，通过link标签引入样式文件。
例如：
@Component({
selector: 'app-hero-team',
template: `
<!-- We must use a relative URL so that the AOT compiler can find the stylesheet -->
<link rel="stylesheet" href="../assets/hero-team.component.css">
<h3>Team</h3>
<ul>
<li *ngFor="let member of hero.team"> {{member}} </li>
</ul>
`
})4、CSS @import 语法
还可以利用标准的CSS @import规则，来将其他CSS文件引入到CSS文件中。
5、外部及全局样式文件
当使用 angular-cli构建时，必须配置.angular-cli.json 文件，使应用能够包含我们想要的外部静态文件，包括CSS文件。
当然，在构建应用的时候，cli工具会自动创建一个 style 文件，我们可以在这个文件中，编写全局样式。
6、控制视图的封装模式
就像上边提到的，组件的样式默认只能对当前组件有效，而不能作用于其他组件，那如果我们想让某个组件的样式对别的组件也可以起作用，应该怎么办呢？
这时候，就可以通过改变组件元数据中的 encapsulation 来设置组件样式的封装方式。
● native，原生，样式不进不出，不能作用于当前组件之外，同时其它组件不能作用于当前组件，主要是指全局样式
● emulated，仿真（默认），样式不能出，全局样式能进来。
● none ，样式能进能出。
更多Angular相关技术文章，请访问Angular.js答疑栏目进行学习！
以上就是angular项目css写在哪的详细内容，更多请关注0133技术站其它相关文章！
