Angular Academy · Lektion

Komponentomfattande stilar

Håll stilar lokala för en komponent.

Lektion 1 av 413 steg

Komponentomfattande stilar är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Stilar hör till komponenter

Angular låter varje komponent ha sin egen CSS. Som standard är dessa stilar avgränsade, vilket betyder att de bara påverkar komponentens mall och inte resten av sidan.

Array med infogade stilar

Du kan definiera stilar direkt i dekoratorn @Component med arrayen styles.

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

Externa styleUrls

Vanligare är att hänvisa till ett eller flera externa stilmallar med styleUrls.

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

Förkortningen styleUrl

För en enda stilmall stöder modern Angular den singulara egenskapen styleUrl.

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

Avgränsning i praktiken

En .card-regel i en komponent läcker inte över till en annan komponent som också använder klassen card. Varje komponent är isolerad.

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

Så fungerar avgränsningen

Angular lägger till unika attribut på komponentens element och skriver om dess CSS-selektorer så att de matchar. På så sätt tillämpas stilarna bara i den komponenten.

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

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

Stilar läcker inte in

På samma sätt som dina stilar stannar kvar inuti komponenten skriver de flesta externa stilar inte heller oavsiktligt över komponentens regler, vilket håller komponenterna fristående.

Globala stilar

För stilar som gäller hela appen använder du den globala styles.css som anges i angular.json. Dessa stilar är inte avgränsade.

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

Flera stilmallar

En komponent kan läsa in flera stilmallar genom att ange dem i arrayen.

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

Använda klassbindningar

Avgränsade stilar passar naturligt ihop med klassbindningar för att tillämpa regler villkorligt.

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

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

Varför avgränsning hjälper

Avgränsade stilar förhindrar namnkonflikter i stora appar, låter team arbeta oberoende av varandra och gör komponenterna portabla samt enklare att förstå.

Snabbkontroll

Testa din förståelse av komponentomfattade stilar.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Komponenter kan innehålla CSS via styles, styleUrls eller styleUrl. Som standard omfattar dessa regler endast komponenten, vilket förhindrar krockar. Använd den globala stilmallen för regler som gäller hela appen.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Komponentomfattande stilar” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Komponentomfattande stilar”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Komponentomfattande stilar”?

Håll stilar lokala för en komponent. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Komponentomfattande stilar”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy