Angular Academy · Lezione

Stili con ambito del componente

Mantenga gli stili locali a un componente.

Stili con ambito del componente è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Gli stili appartengono ai componenti

Angular consente a ogni componente di avere il proprio CSS. Per impostazione predefinita, questi stili sono con ambito limitato, cioè influiscono solo sul template del componente e non sul resto della pagina.

Array di stili inline

Può definire gli stili inline nel decorator @Component usando l'array styles.

@Component({
  selector: "app-card",
  template: "<div class='card'>Hello</div>",
  styles: [".card { padding: 16px; border: 1px solid #ccc; }"]
})
export class CardComponent {}

styleUrls esterni

Più comunemente, specifichi uno o più fogli di stile esterni con styleUrls.

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrls: ["./card.component.css"]
})
export class CardComponent {}

La forma abbreviata styleUrl

Per un singolo foglio di stile, Angular moderno supporta la proprietà singolare styleUrl.

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrl: "./card.component.css"
})
export class CardComponent {}

Lo scoping in azione

Una regola .card in un componente non si estende a un altro componente che usa anch'esso la classe card. Ogni componente è isolato.

/* card.component.css */
.card { color: navy; }
/* this navy color stays inside CardComponent only */

Come funziona lo scoping

Angular aggiunge attributi univoci agli elementi di un componente e riscrive i relativi selettori CSS affinché corrispondano, così gli stili vengono applicati solo all'interno di quel componente.

<!-- generated markup -->
<div class="card" _ngcontent-abc>Hello</div>

/* generated css */
.card[_ngcontent-abc] { color: navy; }

Gli stili non penetrano dall'esterno

Così come i Suoi stili rimangono all'interno, la maggior parte degli stili esterni non sovrascrive involontariamente le regole del componente, mantenendo i componenti autonomi.

Stili globali

Per gli stili applicati all'intera app, usi il file globale styles.css elencato in angular.json. Questi stili non hanno un ambito limitato.

/* src/styles.css - global */
body { font-family: system-ui; }

Più fogli di stile

Un componente può caricare diversi fogli di stile elencandoli nell'array.

@Component({
  selector: "app-page",
  styleUrls: ["./base.css", "./layout.css"]
})
export class PageComponent {}

Uso dei binding di classe

Gli stili con ambito limitato si combinano naturalmente con i binding di classe per applicare le regole in modo condizionale.

<div class="card" [class.featured]="isFeatured"></div>

/* card.component.css */
.featured { border-color: gold; }

Perché lo scoping è utile

Gli stili con ambito limitato prevengono i conflitti tra nomi in un'app di grandi dimensioni, consentono ai team di lavorare in modo indipendente e rendono i componenti portabili e facili da comprendere.

Verifica rapida

Verifichi la Sua comprensione degli stili con ambito limitato al componente.

Riepilogo

I componenti includono CSS tramite styles, styleUrls o styleUrl. Per impostazione predefinita, queste regole sono limitate al componente, evitando conflitti. Utilizzi il foglio di stile globale per le regole dell'intera app.

Domande Frequenti

La lezione «Stili con ambito del componente» è gratuita?

Sì — il testo completo di «Stili con ambito del componente» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Stili con ambito del componente»?

Mantenga gli stili locali a un componente. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Stili con ambito del componente»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy