CSS:n Liittäminen HTML:ään
Pyyhkäise näyttääksesi valikon
Kuinka CSS liitetään HTML:ään
CSS voidaan liittää HTML-dokumenttiin kolmella tavalla:
- Rivikohtaiset tyylit;
- Upotetut tyylitiedostot;
- Ulkoiset tyylitiedostot.
Jokainen menetelmä toimii eri tavoin ja niitä käytetään eri tilanteissa.
Rivikohtaiset tyylit
Rivikohtaiset tyylit kirjoitetaan suoraan HTML-elementin sisään käyttämällä style-attribuuttia.
Esimerkki:
index.html
Tämä tyyli koskee vain tätä tiettyä elementtiä.
Rivinsisäiset tyylit ovat nopeita käyttää, mutta niitä ei voi uudelleenkäyttää ja niiden hallinta on hankalaa suuremmissa projekteissa.
Upotettu tyylitiedosto
Upotettu tyylitiedosto kirjoitetaan <style>-tageihin HTML-dokumentin <head>-osioon.
Esimerkki:
index.html
Tämä menetelmä soveltaa tyylejä koko sivulle, mutta vain tässä yksittäisessä HTML-tiedostossa.
Hyödyllinen pienille tai itsenäisille sivuille.
Ulkoinen tyylitiedosto
Ulkoinen CSS tallentaa tyylit erilliseen .css-tiedostoon ja yhdistää sen HTML:ään käyttämällä <link>-tägiä.
Esimerkki:
index.html
styles.css
Tämä menetelmä mahdollistaa tyylien uudelleenkäytön useilla sivuilla.
Se on suositeltavin ja skaalautuvin lähestymistapa todellisissa projekteissa.
Rivikohtaiset tyylit: lisätään suoraan elementteihin, eivät uudelleenkäytettäviä.
Upotettu tyylitiedosto: lisätään <head>-osioon, vaikuttaa vain yhteen sivuun.
Ulkoinen tyylitiedosto: tallennetaan erilliseen .css-tiedostoon, uudelleenkäytettävä ja suositeltava useimpiin projekteihin.
Tällä kurssilla käytämme pääasiassa ulkoisia tyylitiedostoja.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
