CSS:n Liittäminen HTML-Dokumenttiin
Kolme tapaa liittää CSS
Verkkosivun visuaalinen ilme perustuu HTML:n ja CSS:n yhteistoimintaan. Näitä teknologioita voidaan käyttää kolmella eri tavalla sisällön tyylittämiseen: rivinsisäiset tyylit, upotetut tyylitiedostot ja ulkoiset tyylitiedostot. Tarkastellaan kutakin lähestymistapaa sekä niiden vahvuuksia ja rajoituksia.
Rivinsisäiset tyylit
Rivinsisäisillä tyyleillä CSS voidaan liittää suoraan HTML-elementtiin käyttämällä style-attribuuttia. Tämä menetelmä on yksinkertainen ja hyödyllinen nopeisiin, dynaamisiin muutoksiin. Haittapuolena on kuitenkin rajattu käyttöalue; tyylejä ei voi helposti laajentaa tai käyttää uudelleen eri elementeissä.
index.html
Tässä esimerkissä color: blueviolet -tyyli on lisätty suoraan <p>-elementtiin, jolloin teksti näkyy blueviolet-värisenä. Tämä tyyli vaikuttaa vain tähän tiettyyn <p>-elementtiin.
Upotettu tyylisivu
Upotettu tyylisivu sijaitsee HTML-dokumentin <head>-osiossa, <style>-tagien sisällä. Tämä menetelmä mahdollistaa tyylien määrittelyn yksittäiselle sivulle. Menetelmä ei kuitenkaan sovellu tyylien jakamiseen useille sivuille.
index.html
Tässä <style>-elementti <head>-osiossa määrittelee tyylit kaikille <p>-elementeille. Tekstin väri asetetaan bluevioletiksi ja fonttikoko kasvatetaan 36px:iin. Nämä tyylit sovelletaan johdonmukaisesti kaikkiin dokumentin <p>-elementteihin.
Ulkoinen tyylitiedosto
Ulkoinen tyylitiedosto on CSS-hallinnan kultainen standardi laajemmissa projekteissa. Siinä liitetään ulkoinen .css-tiedosto HTML-dokumenttiin käyttämällä <link>-elementtiä <head>-osiossa. Tämä menetelmä edistää skaalautuvuutta, ylläpidettävyyttä ja uudelleenkäytettävyyttä, mikä tekee siitä ihanteellisen monisivuisille projekteille.
index.html
styles.css
Ulkoinen .css-tiedosto sisältää uudelleenkäytettäviä tyylejä koko projektille. Tässä kaikki HTML-dokumentin <p>-elementit muotoillaan index.css-tiedostossa määritellyillä säännöillä. rel="stylesheet"-tunnisteen <link>-attribuutti määrittää HTML:n ja CSS-tiedoston välisen suhteen.
Huomio
- Rivinsisäiset tyylit soveltuvat yksittäisen elementin muotoiluun, mutta eivät ole uudelleenkäytettäviä;
- Upotettu tyylitiedosto sopii hyvin yhden sivun muotoiluun;
- Ulkoinen tyylitiedosto on erinomainen tyylien hallintaan useilla sivuilla ja tehostaa suunnitteluprosessia.
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 in more detail?
Which CSS method should I use for a small website?
How do I choose between embedded and external style sheets?
Awesome!
Completion rate improved to 2.56CSS:n Liittäminen HTML-Dokumenttiin
Pyyhkäise näyttääksesi valikon
Kolme tapaa liittää CSS
Verkkosivun visuaalinen ilme perustuu HTML:n ja CSS:n yhteistoimintaan. Näitä teknologioita voidaan käyttää kolmella eri tavalla sisällön tyylittämiseen: rivinsisäiset tyylit, upotetut tyylitiedostot ja ulkoiset tyylitiedostot. Tarkastellaan kutakin lähestymistapaa sekä niiden vahvuuksia ja rajoituksia.
Rivinsisäiset tyylit
Rivinsisäisillä tyyleillä CSS voidaan liittää suoraan HTML-elementtiin käyttämällä style-attribuuttia. Tämä menetelmä on yksinkertainen ja hyödyllinen nopeisiin, dynaamisiin muutoksiin. Haittapuolena on kuitenkin rajattu käyttöalue; tyylejä ei voi helposti laajentaa tai käyttää uudelleen eri elementeissä.
index.html
Tässä esimerkissä color: blueviolet -tyyli on lisätty suoraan <p>-elementtiin, jolloin teksti näkyy blueviolet-värisenä. Tämä tyyli vaikuttaa vain tähän tiettyyn <p>-elementtiin.
Upotettu tyylisivu
Upotettu tyylisivu sijaitsee HTML-dokumentin <head>-osiossa, <style>-tagien sisällä. Tämä menetelmä mahdollistaa tyylien määrittelyn yksittäiselle sivulle. Menetelmä ei kuitenkaan sovellu tyylien jakamiseen useille sivuille.
index.html
Tässä <style>-elementti <head>-osiossa määrittelee tyylit kaikille <p>-elementeille. Tekstin väri asetetaan bluevioletiksi ja fonttikoko kasvatetaan 36px:iin. Nämä tyylit sovelletaan johdonmukaisesti kaikkiin dokumentin <p>-elementteihin.
Ulkoinen tyylitiedosto
Ulkoinen tyylitiedosto on CSS-hallinnan kultainen standardi laajemmissa projekteissa. Siinä liitetään ulkoinen .css-tiedosto HTML-dokumenttiin käyttämällä <link>-elementtiä <head>-osiossa. Tämä menetelmä edistää skaalautuvuutta, ylläpidettävyyttä ja uudelleenkäytettävyyttä, mikä tekee siitä ihanteellisen monisivuisille projekteille.
index.html
styles.css
Ulkoinen .css-tiedosto sisältää uudelleenkäytettäviä tyylejä koko projektille. Tässä kaikki HTML-dokumentin <p>-elementit muotoillaan index.css-tiedostossa määritellyillä säännöillä. rel="stylesheet"-tunnisteen <link>-attribuutti määrittää HTML:n ja CSS-tiedoston välisen suhteen.
Huomio
- Rivinsisäiset tyylit soveltuvat yksittäisen elementin muotoiluun, mutta eivät ole uudelleenkäytettäviä;
- Upotettu tyylitiedosto sopii hyvin yhden sivun muotoiluun;
- Ulkoinen tyylitiedosto on erinomainen tyylien hallintaan useilla sivuilla ja tehostaa suunnitteluprosessia.
Kiitos palautteestasi!
