Styles limités au composant
Conservez les styles locaux à un composant.
Styles limités au composant est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Les styles appartiennent aux composants
Angular permet à chaque composant de posséder son propre CSS. Par défaut, ces styles sont isolés, ce qui signifie qu’ils n’affectent que le modèle de ce composant, et non le reste de la page.
Tableau de styles intégrés
Vous pouvez définir des styles directement dans le décorateur @Component à l’aide du tableau styles.
@Component({
selector: "app-card",
template: "<div class='card'>Hello</div>",
styles: [".card { padding: 16px; border: 1px solid #ccc; }"]
})
export class CardComponent {}styleUrls externes
Le plus souvent, vous indiquerez une ou plusieurs feuilles de style externes avec styleUrls.
@Component({
selector: "app-card",
templateUrl: "./card.component.html",
styleUrls: ["./card.component.css"]
})
export class CardComponent {}L’abréviation styleUrl
Pour une seule feuille de style, la version moderne d’Angular prend en charge la propriété singulière styleUrl.
@Component({
selector: "app-card",
templateUrl: "./card.component.html",
styleUrl: "./card.component.css"
})
export class CardComponent {}L’isolation en pratique
Une règle .card dans un composant ne s’étendra pas à un autre composant qui utilise également la classe card. Chaque composant est isolé.
/* card.component.css */
.card { color: navy; }
/* this navy color stays inside CardComponent only */Fonctionnement de l’isolation
Angular ajoute des attributs uniques aux éléments d’un composant et réécrit ses sélecteurs CSS pour qu’ils leur correspondent ; les styles ne s’appliquent ainsi qu’à l’intérieur de ce composant.
<!-- generated markup -->
<div class="card" _ngcontent-abc>Hello</div>
/* generated css */
.card[_ngcontent-abc] { color: navy; }Les styles extérieurs n’entrent pas
De même que vos styles restent à l’intérieur, la plupart des styles extérieurs ne remplacent pas involontairement les règles du composant, ce qui permet de conserver des composants autonomes.
Styles globaux
Pour les styles applicables à toute l’application, utilisez le fichier global styles.css répertorié dans angular.json. Ces styles ne sont pas isolés.
/* src/styles.css - global */
body { font-family: system-ui; }Plusieurs feuilles de style
Un composant peut charger plusieurs feuilles de style en les répertoriant dans le tableau.
@Component({
selector: "app-page",
styleUrls: ["./base.css", "./layout.css"]
})
export class PageComponent {}Utiliser les liaisons de classe
Les styles isolés s’associent naturellement aux liaisons de classe pour appliquer des règles conditionnelles.
<div class="card" [class.featured]="isFeatured"></div>
/* card.component.css */
.featured { border-color: gold; }Pourquoi l’isolation est utile
Les styles isolés empêchent les collisions de noms dans une application volumineuse, permettent aux équipes de travailler indépendamment et rendent les composants faciles à réutiliser et à comprendre.
Vérification rapide
Vérifiez votre compréhension des styles propres aux composants.
Récapitulatif
Les composants intègrent du CSS via styles, styleUrls ou styleUrl. Par défaut, ces règles sont limitées au composant, ce qui évite les collisions. Utilisez la feuille de style globale pour les règles qui s’appliquent à toute l’application.
Questions Fréquemment Posées
La leçon « Styles limités au composant » est-elle gratuite ?
Oui — le texte complet de « Styles limités au composant » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Styles limités au composant » ?
Conservez les styles locaux à un composant. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Styles limités au composant » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Styles limités au composant
- Modes d’encapsulation de la vue
- Styles de l’hôte et du contexte de l’hôte
- Classes et styles dynamiques