Las aplicaciones angulares se diseñan con CSS estándar. Eso significa que puede aplicar todo lo que sabe sobre hojas de estilo CSS, selectores, reglas y consultas de medios directamente a las aplicaciones de Angular.

Además, Angular puede agrupar estilos de componentes con componentes, lo que permite un diseño más modular que las hojas de estilo normales.

Esta página describe cómo cargar y aplicar estos estilos de componentes.

Puede ejecutar el ejemplo en vivo en Stackblitz y descargar el código desde allí.

Usar estilos de componentes

Para cada componente angular que escriba, puede definir no solo una plantilla HTML, sino también los estilos CSS que acompañan a esa plantilla, especificando los selectores, reglas y consultas de medios que necesite.

Una forma de hacer esto es configurar el styles propiedad en los metadatos del componente. los styles La propiedad toma una matriz de cadenas que contienen código CSS. Por lo general, le da una cadena, como en el siguiente ejemplo:

@Component(
  selector:'app-root',
  template:`
    
    
  `,
  styles:['h1  font-weight: normal; '])exportclassHeroAppComponent/* . . . */

Alcance del estilo

Los estilos especificados en @Component metadatos aplicar solo dentro de la plantilla de ese componente.

Son no heredado por cualquier componente anidado dentro de la plantilla ni por ningún contenido proyectado en el componente.

En este ejemplo, el h1 El estilo se aplica solo a la HeroAppComponent, no al anidado HeroMainComponent ni a

etiquetas en cualquier otro lugar de la aplicación.

Esta restricción de alcance es una característica de modularidad de estilo.

• Puede utilizar los selectores y nombres de clase CSS que tengan más sentido en el contexto de cada componente.

• Los nombres de clase y los selectores son locales del componente y no chocan con las clases y los selectores que se utilizan en otras partes de la aplicación.

• Los cambios de estilos en otras partes de la aplicación no afectan los estilos del componente.

• Puede ubicar el código CSS de cada componente con el código TypeScript y HTML del componente, lo que conduce a una estructura de proyecto ordenada y ordenada.

• Puede cambiar o eliminar el código CSS del componente sin buscar en toda la aplicación para encontrar dónde más se usa el código.

Selectores especiales

Los estilos de componentes tienen algunas selectores del mundo del alcance del estilo DOM de sombra (descrito en el Módulo de alcance CSS nivel 1 página en el W3C sitio). Las siguientes secciones describen estos selectores.

:anfitrión

Utilizar el :host selector de pseudo-clase para apuntar a estilos en el elemento que Hospedadores el componente (a diferencia de los elementos de orientación dentro la plantilla del componente).

:hostdisplay: block;border: 1px solid black;

los :host selector es la única forma de apuntar al elemento host. No puede acceder al elemento host desde el interior del componente con otros selectores porque no forma parte de la propia plantilla del componente. El elemento anfitrión está en la plantilla de un componente principal.

Utilizar el forma de función para aplicar estilos de host condicionalmente al incluir otro selector entre paréntesis después :host.

El siguiente ejemplo apunta al elemento host nuevamente, pero solo cuando también tiene la active Clase CSS.

:host(.active)border-width: 3px;

los :host El selector también se puede combinar con otros selectores. Agregue selectores detrás del :host para seleccionar elementos secundarios, por ejemplo, usando :host h2 apuntar a todos

elementos dentro de la vista de un componente.

No debe agregar selectores (que no sean :host-context) en frente de :host selector para aplicar estilo a un componente en función del contexto exterior de la vista del componente. Dichos selectores no tienen el alcance de la vista de un componente y seleccionarán el contexto externo, pero no es un comportamiento nativo. Usar :host-context selector para ese propósito en su lugar.

: contexto de host

A veces es útil aplicar estilos basados ​​en alguna condición. fuera de de la vista de un componente. Por ejemplo, se podría aplicar una clase de tema CSS al documento elemento, y desea cambiar el aspecto de su componente en función de eso.

Utilizar el :host-context() selector de pseudo-clase, que funciona igual que la forma de función de :host(). los :host-context() selector busca una clase CSS en cualquier antepasado del elemento host del componente, hasta la raíz del documento. los :host-context() selector es útil cuando se combina con otro selector.

El siguiente ejemplo aplica un background-color estilo para todos

elementos dentro el componente, solo si algún elemento ancestro tiene la clase CSS theme-light.

:host-context(.theme-light) h2background-color: #eef;

(obsoleto) /deep/, >>>, y ::ng-deep

Los estilos de componentes normalmente se aplican solo al HTML en la propia plantilla del componente.

Aplicando el ::ng-deep pseudo-clase a cualquier regla CSS deshabilita completamente la encapsulación de vista para esa regla. Cualquier estilo con ::ng-deep aplicado se convierte en un estilo global. Para establecer el alcance del estilo especificado en el componente actual y todos sus descendientes, asegúrese de incluir el :host selector antes ::ng-deep. Si el ::ng-deep El combinador se utiliza sin el :host selector de pseudo-clase, el estilo puede sangrar en otros componentes.

El siguiente ejemplo se dirige a todos

elementos, desde el elemento host hasta este componente hasta todos sus elementos secundarios en el DOM.

:host ::ng-deep h3font-style: italic;

los /deep/ combinator también tiene los alias >>>, y ::ng-deep.

Usar /deep/, >>> y ::ng-deep solo con emulado ver encapsulación. Emulated es la encapsulación de vista predeterminada y más utilizada. Para obtener más información, consulte la sección Ver encapsulación.

El combinador descendiente perforador de sombras está en desuso y se está eliminando el soporte de los principales navegadores y herramientas. Como tal, planeamos eliminar el soporte en Angular (para los 3 de /deep/, >>> y ::ng-deep). Hasta entonces ::ng-deep debería preferirse para una compatibilidad más amplia con las herramientas.

Cargar estilos de componentes

Hay varias formas de agregar estilos a un componente:

• Configurando styles o styleUrls metadatos.
• Inline en la plantilla HTML.
• Con importaciones de CSS.

Las reglas de alcance descritas anteriormente se aplican a cada uno de estos patrones de carga.

Estilos en metadatos de componentes

Puede agregar un styles propiedad de matriz a la @Component decorador.

Cada cadena de la matriz define algo de CSS para este componente.

@Component(
  selector:'app-root',
  template:`
    
    
  `,
  styles:['h1  font-weight: normal; '])exportclassHeroAppComponent/* . . . */

Recordatorio: se aplican estos estilos solo a este componente. Son no heredado por cualquier componente anidado dentro de la plantilla ni por ningún contenido proyectado en el componente.

El comando Angular CLI ng generate component define un vacío styles matriz cuando crea el componente con el --inline-style bandera.

ng generate component hero-app --inline-style

Archivos de estilo en metadatos de componentes

Puede cargar estilos desde archivos CSS externos agregando un styleUrls propiedad a un componente @Component decorador:

@Component(
  selector:'app-root',
  template:`
    
Tour of Heroes
    
  `,
  styleUrls:['./hero-app.component.css'])exportclassHeroAppComponent/* . . . */

h1font-weight: normal;

Reminder: the styles in the style file apply only to this component. They are not inherited by any components nested within the template nor by any content projected into the component.

You can specify more than one styles file or even a combination of styles y styleUrls.

Cuando usa el comando CLI angular ng generate component sin el --inline-style marca, crea un archivo de estilos vacío para usted y hace referencia a ese archivo en el componente generado styleUrls.

ng generate component hero-app

Estilos de plantilla en línea

Puede incrustar estilos CSS directamente en la plantilla HTML colocándolos dentro <style> etiquetas.

@Component(
  selector: 'app-hero-controls',
  template: `
    
    
Controls
    Activate
  `
)

Etiquetas de enlace de plantilla

También puedes escribir etiquetas en la plantilla HTML del componente.

@Component(
  selector: 'app-hero-team',
  template: `
    
    
    
Team
    

      

        member
      
    
`
)

Al compilar con la CLI, asegúrese de incluir el archivo de estilo vinculado entre los activos que se copiarán en el servidor, como se describe en la guía de configuración de Activos.

Una vez incluida, la CLI incluirá la hoja de estilo, ya sea que la URL href de la etiqueta de enlace sea relativa a la raíz de la aplicación o al archivo del componente.

CSS @importaciones

También puede importar archivos CSS a los archivos CSS utilizando el CSS estándar @import regla. Para obtener más detalles, consulte @import sobre el MDN sitio.

En este caso, la URL es relativa al archivo CSS en el que está importando.

/* The AOT compiler needs the `./` to show that this is local */
@import './hero-details-box.css';

Archivos de estilo externos y globales

Al compilar con la CLI, debe configurar el angular.json para incluir todos los activos externos, incluidos los archivos de estilo externos.

Registrarse global archivos de estilo en el styles sección que, de forma predeterminada, está preconfigurada con la styles.css expediente.

Consulte la guía de configuración de estilos para obtener más información.

Archivos de estilo que no son CSS

Si está compilando con la CLI, puede escribir archivos de estilo en hablar con descaro a, menos, o aguja y especifique esos archivos en el @Component.styleUrls metadatos con las extensiones adecuadas (.scss, .less, .styl) como en el siguiente ejemplo:

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
)
...

El proceso de compilación de CLI ejecuta el preprocesador de CSS pertinente.

Al generar un archivo de componente con ng generate component, la CLI emite un archivo de estilos CSS vacío (.css) por defecto. Puede configurar la CLI para que se establezca de forma predeterminada en su preprocesador de CSS preferido, como se explica en la guía de configuración del espacio de trabajo.

Cadenas de estilo agregadas al @Component.styles formación debe estar escrito en CSS porque la CLI no puede aplicar un preprocesador a los estilos en línea.