Johdanto CSS:ään Verkkosivujen Tyylittelyssä
CSS (Cascading Style Sheets) määrittää verkkosivujen visuaalisen ilmeen. HTML tarjoaa rakenteen, kun taas CSS hallitsee värejä, fontteja, välistyksiä ja asettelua—samalla tavalla kuin sisustus ja sisustussuunnittelu määrittävät talon ulkonäön.
CSS:n lisääminen HTML:n tyylittelyyn
CSS voidaan ottaa käyttöön kolmella pääasiallisella tavalla.
Sisäiset tyylit
style-attribuutin käyttö yksittäisen elementin nopeaan muotoiluun.
index.html
Sisäiset tyylisäännöt
<style>-lohkon lisääminen <head>-osioon saman sivun elementtien muotoilua varten.
index.html
Ulkoiset tyylitiedostot
Suuremmissa projekteissa CSS kannattaa pitää erillisessä tiedostossa ja liittää se HTML-tiedostoon.
Tarkista esimerkistä index.html ja index.css -tiedostot.
index.html
index.css
CSS-valitsimet
Valitsimet määrittävät, mitkä elementit saavat tietyt tyylit.
Elementtivalitsin
Kohdistaa kaikkiin tietyn tyypin elementteihin.
p {
/* styles */
}
Luokkavalitsin
Kohdistaa elementteihin, joilla on tietty class-attribuutti.
.highlight {
/* styles */
}
ID-valitsin
Kohdistaa tiettyyn elementtiin, jolla on yksilöllinen ID-attribuutti.
#header {
/* styles */
}
CSS-ominaisuudet
CSS-ominaisuudet määrittävät, miten valitut elementit tyylitellään. Tässä on joitakin yleisiä CSS-ominaisuuksia:
colormäärittää tekstin värin;background-colormäärittää elementin taustavärin;font-sizemäärittää tekstin koon;marginlisää tilaa elementin ympärille.
Voimme mukauttaa verkkosivun ulkoasua soveltamalla CSS-tyylejä HTML-elementteihin luodaksemme visuaalisesti miellyttäviä ja käyttäjäystävällisiä kokemuksia.
Esimerkki:
index.html
index.css
Videotutoriaali
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Mahtavaa!
Completion arvosana parantunut arvoon 5Johdanto CSS:ään Verkkosivujen Tyylittelyssä
Pyyhkäise näyttääksesi valikon
CSS (Cascading Style Sheets) määrittää verkkosivujen visuaalisen ilmeen. HTML tarjoaa rakenteen, kun taas CSS hallitsee värejä, fontteja, välistyksiä ja asettelua—samalla tavalla kuin sisustus ja sisustussuunnittelu määrittävät talon ulkonäön.
CSS:n lisääminen HTML:n tyylittelyyn
CSS voidaan ottaa käyttöön kolmella pääasiallisella tavalla.
Sisäiset tyylit
style-attribuutin käyttö yksittäisen elementin nopeaan muotoiluun.
index.html
Sisäiset tyylisäännöt
<style>-lohkon lisääminen <head>-osioon saman sivun elementtien muotoilua varten.
index.html
Ulkoiset tyylitiedostot
Suuremmissa projekteissa CSS kannattaa pitää erillisessä tiedostossa ja liittää se HTML-tiedostoon.
Tarkista esimerkistä index.html ja index.css -tiedostot.
index.html
index.css
CSS-valitsimet
Valitsimet määrittävät, mitkä elementit saavat tietyt tyylit.
Elementtivalitsin
Kohdistaa kaikkiin tietyn tyypin elementteihin.
p {
/* styles */
}
Luokkavalitsin
Kohdistaa elementteihin, joilla on tietty class-attribuutti.
.highlight {
/* styles */
}
ID-valitsin
Kohdistaa tiettyyn elementtiin, jolla on yksilöllinen ID-attribuutti.
#header {
/* styles */
}
CSS-ominaisuudet
CSS-ominaisuudet määrittävät, miten valitut elementit tyylitellään. Tässä on joitakin yleisiä CSS-ominaisuuksia:
colormäärittää tekstin värin;background-colormäärittää elementin taustavärin;font-sizemäärittää tekstin koon;marginlisää tilaa elementin ympärille.
Voimme mukauttaa verkkosivun ulkoasua soveltamalla CSS-tyylejä HTML-elementteihin luodaksemme visuaalisesti miellyttäviä ja käyttäjäystävällisiä kokemuksia.
Esimerkki:
index.html
index.css
Videotutoriaali
Kiitos palautteestasi!
