CSS:n Liittäminen HTML-Dokumenttiin
Kolme CSS:n polkua
Verkkosivun visuaalinen ilme perustuu HTML:n ja CSS:n yhteistoimintaan. Näitä teknologioita voidaan käyttää kolmella eri tavalla sisällön tyylittelyyn: sisäiset tyylit, upotetut tyylitiedostot ja ulkoiset tyylitiedostot. Tarkastellaan kutakin lähestymistapaa sekä niiden vahvuuksia ja rajoituksia.
Sisäiset tyylit
Sisäiset tyylit määritellään suoraan elementille style-attribuutin avulla. Ne ovat nopeita käyttää, mutta eivät uudelleenkäytettäviä.
index.html
Tässä color: blueviolet vaikuttaa vain tähän tiettyyn <p>-elementtiin.
Upotettu tyylitiedosto
Upotettu tyylitiedosto sijoitetaan HTML-dokumentin <head>-osioon käyttämällä <style>-tageja. Se vaikuttaa vain nykyiseen sivuun.
index.html
Kaikki tämän sivun <p>-elementit saavat määritellyn värin ja fonttikoon.
Ulkoinen tyylitiedosto
Ulkoinen CSS on skaalautuvin ja suositelluin menetelmä. Tyylit tallennetaan erilliseen .css-tiedostoon ja liitetään käyttämällä <link>-elementtiä <head>-osiossa.
index.html
styles.css
Ulkoinen tiedosto sisältää uudelleenkäytettäviä sääntöjä koko projektille. Attribuutti rel="stylesheet" ilmaisee, että tämä linkki lataa CSS-tiedoston.
Inline-tyylit: nopea, mutta ei uudelleenkäytettävä.
Upotettu tyylitiedosto: hyödyllinen yksittäisen sivun tyylitykseen
Ulkoinen tyylitiedosto: paras suuremmille tai monisivuisille projekteille
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Mahtavaa!
Completion arvosana parantunut arvoon 2.56CSS:n Liittäminen HTML-Dokumenttiin
Pyyhkäise näyttääksesi valikon
Kolme CSS:n polkua
Verkkosivun visuaalinen ilme perustuu HTML:n ja CSS:n yhteistoimintaan. Näitä teknologioita voidaan käyttää kolmella eri tavalla sisällön tyylittelyyn: sisäiset tyylit, upotetut tyylitiedostot ja ulkoiset tyylitiedostot. Tarkastellaan kutakin lähestymistapaa sekä niiden vahvuuksia ja rajoituksia.
Sisäiset tyylit
Sisäiset tyylit määritellään suoraan elementille style-attribuutin avulla. Ne ovat nopeita käyttää, mutta eivät uudelleenkäytettäviä.
index.html
Tässä color: blueviolet vaikuttaa vain tähän tiettyyn <p>-elementtiin.
Upotettu tyylitiedosto
Upotettu tyylitiedosto sijoitetaan HTML-dokumentin <head>-osioon käyttämällä <style>-tageja. Se vaikuttaa vain nykyiseen sivuun.
index.html
Kaikki tämän sivun <p>-elementit saavat määritellyn värin ja fonttikoon.
Ulkoinen tyylitiedosto
Ulkoinen CSS on skaalautuvin ja suositelluin menetelmä. Tyylit tallennetaan erilliseen .css-tiedostoon ja liitetään käyttämällä <link>-elementtiä <head>-osiossa.
index.html
styles.css
Ulkoinen tiedosto sisältää uudelleenkäytettäviä sääntöjä koko projektille. Attribuutti rel="stylesheet" ilmaisee, että tämä linkki lataa CSS-tiedoston.
Inline-tyylit: nopea, mutta ei uudelleenkäytettävä.
Upotettu tyylitiedosto: hyödyllinen yksittäisen sivun tyylitykseen
Ulkoinen tyylitiedosto: paras suuremmille tai monisivuisille projekteille
Kiitos palautteestasi!
