Angular Academy · Oppitunti

Komponenttikohtaiset tyylit

Rajaatkaa tyylit komponentin sisäisiksi.

Oppitunti 1/413 vaihetta

Komponenttikohtaiset tyylit on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Tyylit kuuluvat komponentteihin

Angular antaa jokaiselle komponentille mahdollisuuden käyttää omaa CSS:ää. Oletusarvoisesti nämä tyylit ovat rajattuja, eli ne vaikuttavat vain kyseisen komponentin templateen eivätkä sivun muuhun sisältöön.

Sisäisten tyylien taulukko

Voit määrittää tyylit suoraan @Component-dekoraattorin styles-taulukossa.

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

Ulkoiset styleUrl-tyylitiedostot

Yleisemmin osoitat yhteen tai useampaan ulkoiseen tyylitiedostoon styleUrls-propertyllä.

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

styleUrl-lyhennys

Yhden tyylitiedoston tapauksessa moderni Angular tukee yksiköllistä styleUrl-propertyä.

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

Rajauksen toiminta käytännössä

Yhden komponentin .card-sääntö ei vuoda toiseen komponenttiin, joka käyttää myös card-luokkaa. Kumpikin on eristetty.

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

Miten rajaus toimii

Angular lisää komponentin elementteihin yksilöllisiä attribuutteja ja muokkaa sen CSS-valitsimia vastaamaan niitä, joten tyylit vaikuttavat vain kyseisen komponentin sisällä.

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

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

Tyylit eivät vuoda sisään

Aivan kuten omat tyylisi pysyvät komponentin sisällä, useimmat ulkopuoliset tyylit eivät myöskään vahingossa ohita komponentin sääntöjä. Tämä pitää komponentit itsenäisinä.

Globaalit tyylit

Koko sovelluksen laajuisia tyylejä varten käytä angular.json-tiedostossa määritettyä globaalia styles.css-tiedostoa. Näitä tyylejä ei rajata.

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

Useita tyylitiedostoja

Komponentti voi ladata useita tyylitiedostoja lisäämällä ne taulukkoon.

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

class-sidontojen käyttäminen

Rajatut tyylit toimivat luontevasti yhdessä class-sidontojen kanssa, jolloin sääntöjä voidaan käyttää ehdollisesti.

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

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

Miksi rajaus on hyödyllinen

Rajatut tyylit estävät nimien yhteentörmäykset suuressa sovelluksessa, mahdollistavat tiimien itsenäisen työskentelyn ja tekevät komponenteista siirrettäviä sekä helposti ymmärrettäviä.

Pikatarkistus

Testaa, miten hyvin ymmärrät komponenttikohtaiset tyylit.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Komponentit sisältävät CSS:n styles-, styleUrls- tai styleUrl-ominaisuuden kautta. Oletusarvoisesti nämä säännöt rajataan komponenttiin, mikä estää yhteentörmäykset. Käytä koko sovelluksen kattaviin sääntöihin yleistä tyylitiedostoa.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Komponenttikohtaiset tyylit” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Komponenttikohtaiset tyylit”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Komponenttikohtaiset tyylit”?

Rajaatkaa tyylit komponentin sisäisiksi. Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Komponenttikohtaiset tyylit”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy