CSS-taustat mahdollistavat verkkosivujen taustan muotoilun ja ulkonäön muokkaamisen. CSS:ssä on monia tapoja määrittää taustan ulkoasua, kuten taustaväri, taustakuva, toistuvat kuvat, gradientit jne. Alla on esimerkkejä CSS-taustojen käytöstä:

Voit määrittää taustavärin CSS:ssä käyttämällä background-color -ominaisuutta. Esimerkiksi, jos haluat asettaa taustan värin valkoiseksi, voit kirjoittaa seuraavan säännön:

Tämä sääntö asettaa sivun taustavärin valkoiseksi.

Voit määrittää taustakuvan CSS:ssä käyttämällä background-image -ominaisuutta. Esimerkiksi, jos haluat asettaa taustakuvaksi kukkakuvan, voit kirjoittaa seuraavan säännön:

Tämä sääntö asettaa sivun taustakuvaksi kukkakuvan, joka on tallennettu samassa kansiossa kuin sivun tiedostot.

Voit määrittää toistuvan taustakuvan CSS:ssä käyttämällä background-repeat -ominaisuutta. Esimerkiksi, jos haluat toistaa kukkakuvan taustassa sekä vaaka- että pystysuunnassa, voit kirjoittaa seuraavan säännön:

Tämä sääntö asettaa kukkakuvan toistumaan sekä vaaka- että pystysuunnassa.

Voit määrittää gradientin CSS:ssä käyttämällä background-image -ominaisuutta ja gradientti-toimintoa. Esimerkiksi, jos haluat asettaa taustan sinisestä valkoiseksi gradienttina, voit kirjoittaa seuraavan säännön:

Tämä sääntö asettaa sivun taustaksi gradientin, joka alkaa sinisestä ja päättyy valkoiseen alhaalta ylöspäin.

CSS-taustojen käyttö antaa sinulle runsaasti mahdollisuuksia verkkosivujen taustan muotoiluun ja tyyliin. On tärkeää huomata, että liian raskas taustakuva tai liian monta toistoa voivat hidastaa sivun latautumista ja vaikuttaa käyttäjän kokemukseen.

CSS-taustat mahdollistavat verkkosivujen taustan muotoilun ja ulkonäön muokkaamisen. CSS:ssä on monia tapoja määrittää taustan ulkoasua, kuten taustaväri, taustakuva, toistuvat kuvat, gradientit jne. Alla on esimerkkejä CSS-taustojen käytöstä:

## Taustavärin määrittäminen

Voit määrittää taustavärin CSS:ssä käyttämällä background-color -ominaisuutta. Esimerkiksi, jos haluat asettaa taustan värin valkoiseksi, voit kirjoittaa seuraavan säännön:

```css
body {
  background-color: white;
}
```

Tämä sääntö asettaa sivun taustavärin valkoiseksi.

---

## Taustakuvan määrittäminen

Voit määrittää taustakuvan CSS:ssä käyttämällä background-image -ominaisuutta. Esimerkiksi, jos haluat asettaa taustakuvaksi kukkakuvan, voit kirjoittaa seuraavan säännön:

```css
body {
  background-image: url("kukkakuva.jpg");
}
```

Tämä sääntö asettaa sivun taustakuvaksi kukkakuvan, joka on tallennettu samassa kansiossa kuin sivun tiedostot.

---

## Toistuvan taustakuvan määrittäminen

Voit määrittää toistuvan taustakuvan CSS:ssä käyttämällä background-repeat -ominaisuutta. Esimerkiksi, jos haluat toistaa kukkakuvan taustassa sekä vaaka- että pystysuunnassa, voit kirjoittaa seuraavan säännön:

```css
body {
  background-image: url("kukkakuva.jpg");
  background-repeat: repeat;
}
```

Tämä sääntö asettaa kukkakuvan toistumaan sekä vaaka- että pystysuunnassa.

---

## 
Gradientin määrittäminen

Voit määrittää gradientin CSS:ssä käyttämällä background-image -ominaisuutta ja gradientti-toimintoa. Esimerkiksi, jos haluat asettaa taustan sinisestä valkoiseksi gradienttina, voit kirjoittaa seuraavan säännön:

```css
body {
  background-image: linear-gradient(to bottom, blue, white);
}
```

Tämä sääntö asettaa sivun taustaksi gradientin, joka alkaa sinisestä ja päättyy valkoiseen alhaalta ylöspäin.

CSS-taustojen käyttö antaa sinulle runsaasti mahdollisuuksia verkkosivujen taustan muotoiluun ja tyyliin. On tärkeää huomata, että liian raskas taustakuva tai liian monta toistoa voivat hidastaa sivun latautumista ja vaikuttaa käyttäjän kokemukseen.

---

## Harjoittele

@embed 0482233562d7


CSS Taustat

Tämä kurssi on johdatus web-kehitykseen ja se keskittyy HTML:n, CSS:n, JavaScriptin ja taustajärjestelmien perusteisiin. Kurssin tavoitteena on antaa opiskelijoille tarvittavat taidot ja tietämys, jotta he voivat suunnitella ja kehittää ja ymmärtää yksinkertaisia web-sovelluksia.

Tämä kurssi on johdatus web-kehitykseen ja se keskittyy verkkosivustojen peruspalikoiden, eli HTML:n, CSS:n ja JavaScriptin sekä taustajärjestelmien perusteisiin. Kurssin tavoitteena on antaa sinulle tarvittavat taidot ja tietämys, jotta voit suunnitella ja kehittää yksinkertaisia full-stack web-sovelluksia, sekä ymmärtää muiden tekemiä web-sovelluksia.

Ensimmäisessä osassa opiskellaa HTML:ää joka on verkkosivustojen rakentamisessa käytetty merkintäkieli.


Toisessa osassa opiskellaan CSS:n perusteita, kuten tyylitiedoston käyttöä, sääntöjä, selektoreita ja muotoilua. Käsitellään myös CSS:n edistyneitä ominaisuuksia, kuten animaatioita ja responsiivista suunnittelua.


Kolmannessa osassa opiskellaan JavaScriptia joka on nykyisin valtavan tärkeä työkalu sekä frontend että backend -kehityksessä ja sitä kautta myös tietoturvassa ja eettisessä hakkeroinnissa.

Viimeisessä osassa opiskellaan rakentamaan taustajärjestelmiä Python Flask sovelluskehyksellä. Opit taustajärjestelmien perusteet, kuten tietokantojen käytön, autentikoinnin, istunnonhallinnan sekä pääsynhallinnan.

Voit tehdä kurssin tehtäviä omalla koneellasi jos haluat, mutta jokaisessa koodiesimerkissä on nappi jolla voit suoraan selaimessa ajaa kyseisen koodin ja nähdä miltä sivu näyttää, tai mitä skripti tulostaa. Sinun ei siis tarvitse asentaa mitään, mutta voit jos haluat.

On suositeltavaa mutta vapaaehtoista tehdä tili replit.com palvelussa, tällöin voit vain klikata "Fork" koodiesimerkeissä niin saat niistä kopion itsellesi jolla voit leikkiä

CSS Taustat

Taustavärin määrittäminen

Hakkeroinnin oppiminen alkaa tästä