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
Can you explain the pros and cons of each CSS method?
Which CSS method is best for large projects?
How do I choose between inline, embedded, and external CSS?
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!
