五、样式控制

1. 直接使用setyles

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-app-styles',
  templateUrl: './app-styles.component.html',
  styles:[` p{
    color: red;
  } `,`*{
    font-size: 200px;
  } `
  ]
})
export class AppStylesComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

2. 使用 styleUrls

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-app-styles',
  templateUrl: './app-styles.component.html',
  styleUrls:['./app-styles.component.less']

})
export class AppStylesComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

3. 模板内联样式

<style>
    p{
        color: yellowgreen;
    }
</style>
<p>app-styles works!</p>

4. 使用link引入

<link rel="stylesheet" href="assets/global.component.css"></link>

5. 使用@import语法

@import url(./assets/global.component.css)

6 控制视图的模式

给了三种模式

• Emulated 组件样式仅应用于组件自身的HTML元素 样式不会影响子组件或其他组件 子组件样式也不会泄漏到父 组件
• None 完全不进行样式封装
• ShadowDom 使用浏览器原生的Shadow DOM API 提供最严格的样式隔离 组件样式完全封闭在组件内部 外部样式无法影响组件内部 组件内部样式也无法影响外部

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
 selector: 'app-app-styles',
 templateUrl: './app-styles.component.html',
 styleUrls:['./app-styles.component.less'],
 encapsulation:ViewEncapsulation.ShadowDom

})