Estilos con ámbito de componente
Mantenga los estilos locales a un componente.
Estilos con ámbito de componente es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Los estilos pertenecen a los componentes
Angular permite que cada componente incluya su propio CSS. De forma predeterminada, estos estilos están delimitados, lo que significa que solo afectan a la plantilla de ese componente y no al resto de la página.
Array de estilos inline
Puede definir estilos inline en el decorador @Component mediante el array styles.
@Component({
selector: "app-card",
template: "<div class='card'>Hello</div>",
styles: [".card { padding: 16px; border: 1px solid #ccc; }"]
})
export class CardComponent {}styleUrls externos
Lo más habitual es indicar una o varias hojas de estilos externas con styleUrls.
@Component({
selector: "app-card",
templateUrl: "./card.component.html",
styleUrls: ["./card.component.css"]
})
export class CardComponent {}La abreviatura styleUrl
Para una sola hoja de estilos, Angular moderno admite la propiedad singular styleUrl.
@Component({
selector: "app-card",
templateUrl: "./card.component.html",
styleUrl: "./card.component.css"
})
export class CardComponent {}El ámbito en acción
Una regla .card de un componente no se filtra a otro componente que también use la clase card. Cada una está aislada.
/* card.component.css */
.card { color: navy; }
/* this navy color stays inside CardComponent only */Cómo funciona el ámbito
Angular añade atributos únicos a los elementos de un componente y reescribe sus selectores CSS para que coincidan, de modo que los estilos se apliquen únicamente dentro de ese componente.
<!-- generated markup -->
<div class="card" _ngcontent-abc>Hello</div>
/* generated css */
.card[_ngcontent-abc] { color: navy; }Los estilos externos no se filtran
Del mismo modo que sus estilos permanecen dentro, la mayoría de los estilos externos tampoco sobrescriben accidentalmente las reglas del componente, lo que mantiene los componentes autónomos.
Estilos globales
Para los estilos de toda la aplicación, use el styles.css global indicado en angular.json. Estos estilos no están delimitados.
/* src/styles.css - global */
body { font-family: system-ui; }Varias hojas de estilos
Un componente puede cargar varias hojas de estilos incluyéndolas en el array.
@Component({
selector: "app-page",
styleUrls: ["./base.css", "./layout.css"]
})
export class PageComponent {}Usar enlaces de clases
Los estilos delimitados se combinan de forma natural con los enlaces de clases para aplicar reglas condicionalmente.
<div class="card" [class.featured]="isFeatured"></div>
/* card.component.css */
.featured { border-color: gold; }Por qué resulta útil delimitar los estilos
Los estilos delimitados evitan colisiones de nombres en aplicaciones grandes, permiten que los equipos trabajen de forma independiente y hacen que los componentes sean portátiles y fáciles de comprender.
Comprobación rápida
Compruebe su comprensión de los estilos con ámbito de componente.
Resumen
Los componentes incorporan CSS mediante styles, styleUrls o styleUrl. De forma predeterminada, estas reglas se limitan al componente, lo que evita conflictos. Use la hoja de estilos global para las reglas que se apliquen a toda la aplicación.
Preguntas frecuentes
¿La lección «Estilos con ámbito de componente» es gratis?
Sí — el texto completo de «Estilos con ámbito de componente» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Estilos con ámbito de componente»?
Mantenga los estilos locales a un componente. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Estilos con ámbito de componente»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Estilos con ámbito de componente
- Modos de encapsulación de vistas
- Estilos del host y de Host-Context
- Clases y estilos dinámicos