Estilos com escopo de componente
Mantenha os estilos locais a um componente.
Estilos com escopo de componente é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Os estilos pertencem aos componentes
O Angular permite que cada componente tenha seu próprio CSS. Por padrão, esses estilos são delimitados, ou seja, afetam apenas o modelo desse componente, e não o restante da página.
Matriz de estilos incorporados
Você pode definir estilos incorporados no decorador @Component usando a matriz styles.
@Component({
selector: "app-card",
template: "<div class='card'>Hello</div>",
styles: [".card { padding: 16px; border: 1px solid #ccc; }"]
})
export class CardComponent {}styleUrls externos
Mais comumente, indique uma ou mais folhas de estilo externas com styleUrls.
@Component({
selector: "app-card",
templateUrl: "./card.component.html",
styleUrls: ["./card.component.css"]
})
export class CardComponent {}A forma abreviada styleUrl
Para uma única folha de estilo, o Angular moderno aceita a propriedade singular styleUrl.
@Component({
selector: "app-card",
templateUrl: "./card.component.html",
styleUrl: "./card.component.css"
})
export class CardComponent {}Delimitação em ação
Uma regra .card em um componente não vazará para outro componente que também use a classe card. Cada uma fica isolada.
/* card.component.css */
.card { color: navy; }
/* this navy color stays inside CardComponent only */Como funciona a delimitação
O Angular adiciona atributos exclusivos aos elementos de um componente e reescreve seus seletores CSS para que correspondam a eles; assim, os estilos são aplicados somente dentro desse componente.
<!-- generated markup -->
<div class="card" _ngcontent-abc>Hello</div>
/* generated css */
.card[_ngcontent-abc] { color: navy; }Os estilos não vazam para dentro
Assim como seus estilos permanecem dentro do componente, a maioria dos estilos externos também não substitui as regras do componente de forma involuntária, mantendo os componentes autocontidos.
Estilos globais
Para estilos de toda a aplicação, use o styles.css global listado em angular.json. Esses estilos não são delimitados.
/* src/styles.css - global */
body { font-family: system-ui; }Várias folhas de estilo
Um componente pode carregar várias folhas de estilo listando-as na matriz.
@Component({
selector: "app-page",
styleUrls: ["./base.css", "./layout.css"]
})
export class PageComponent {}Usando vinculações de class
Estilos delimitados combinam naturalmente com vinculações de classe para aplicar regras condicionalmente.
<div class="card" [class.featured]="isFeatured"></div>
/* card.component.css */
.featured { border-color: gold; }Por que a delimitação ajuda
Estilos delimitados evitam conflitos de nomes em uma aplicação grande, permitem que as equipes trabalhem de forma independente e tornam os componentes portáteis e fáceis de compreender.
Verificação rápida
Teste sua compreensão dos estilos com escopo de componente.
Recapitulação
Os componentes incorporam CSS por meio de styles, styleUrls ou styleUrl. Por padrão, essas regras ficam restritas ao componente, evitando conflitos. Use a folha de estilos global para regras aplicáveis a todo o aplicativo.
Perguntas Frequentes
A aula “Estilos com escopo de componente” é grátis?
Sim — o texto completo de “Estilos com escopo de componente” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Estilos com escopo de componente”?
Mantenha os estilos locais a um componente. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Estilos com escopo de componente”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Estilos com escopo de componente
- Modos de encapsulamento da visualização
- Estilização do host e do contexto do host
- Classes e estilos dinâmicos