My Terrarium
``` **Mitä tämä koodi tekee:** - **Soveltaa** punaisen värin suoraan ``-elementtiin käyttämällä inline-tyylittelyä
- **Käyttää** `style`-attribuuttia upottaakseen CSS:n suoraan HTML:ään
- **Luo** korkeimman prioriteetin tyylisäännön tälle elementille
Lisää seuraavaksi tämä sääntö `style.css`-tiedostoosi:
```css
h1 {
color: blue;
}
```
**Yllä olevassa olemme:**
- **Määrittäneet** CSS-säännön, joka kohdistuu kaikkiin ``-elementteihin
- **Asettaneet** tekstin väriksi sinisen ulkoisessa tyylitiedostossa
- **Luoneet** alemman prioriteetin säännön verrattuna inline-tyyleihin
✅ **Tietotesti**: Mikä väri näkyy verkkosovelluksessasi? Miksi juuri tämä väri voittaa? Voitko keksiä tilanteita, joissa haluaisit ohittaa tyylit?
```mermaid
flowchart TD
A["Browser encounters h1 element"] --> B{"Check for inline styles"}
B -->|Found| C["style='color: red'"]
B -->|None| D{"Check for ID rules"}
C --> E["Apply red color (1000 points)"]
D -->|Found| F["#heading { color: green }"]
D -->|None| G{"Check for class rules"}
F --> H["Apply green color (100 points)"]
G -->|Found| I[".title { color: blue }"]
G -->|None| J{"Check element rules"}
I --> K["Apply blue color (10 points)"]
J -->|Found| L["h1 { color: purple }"]
J -->|None| M["Use browser default"]
L --> N["Apply purple color (1 point)"]
style C fill:#ff6b6b
style F fill:#51cf66
style I fill:#339af0
style L fill:#9775fa
```
> 💡 **CSS-prioriteettijärjestys (korkeimmasta matalimpaan):**
> 1. **Inline-tyylit** (style-attribuutti)
> 2. **ID:t** (#myId)
> 3. **Luokat** (.myClass) ja attribuutit
> 4. **Elementtivalitsimet** (h1, div, p)
> 5. **Selaimen oletukset**
## CSS:n periytyminen käytännössä
CSS:n periytyminen toimii kuin genetiikka – elementit perivät tiettyjä ominaisuuksia vanhemmiltaan. Jos asetat fonttiperheen body-elementille, kaikki teksti sisällä käyttää automaattisesti samaa fonttia. Se on kuin Habsburg-suvun tunnusomainen leukalinja, joka siirtyi sukupolvelta toiselle ilman, että sitä erikseen määriteltiin jokaiselle yksilölle.
Kaikki ei kuitenkaan periydy. Tekstityylit, kuten fontit ja värit, periytyvät, mutta asettelun ominaisuudet, kuten marginaalit ja reunukset, eivät. Aivan kuten lapset voivat periä fyysisiä piirteitä, mutta eivät vanhempiensa muotivalintoja.
### Fontin periytymisen havainnointi
Katsotaan periytymistä asettamalla fonttiperhe ``-elementille:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
```
**Mitä tässä tapahtuu:**
- **Asettaa** fonttiperheen koko sivulle kohdistamalla ``-elementtiin
- **Käyttää** fonttipinoa varavaihtoehtoineen paremman selaimen yhteensopivuuden vuoksi
- **Soveltaa** moderneja järjestelmäfontteja, jotka näyttävät hyvältä eri käyttöjärjestelmissä
- **Varmistaa**, että kaikki lapsielementit perivät tämän fontin, ellei niitä erikseen ohiteta
Avaa selaimesi kehitystyökalut (F12), siirry Elements-välilehteen ja tarkista ``-elementtisi. Näet, että se perii fonttiperheen body-elementiltä:
✅ **Kokeilua**: Kokeile asettaa muita periytyviä ominaisuuksia ``-elementille, kuten `color`, `line-height` tai `text-align`. Mitä tapahtuu otsikolle ja muille elementeille?
> 📝 **Periytyvät ominaisuudet**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **Ei-periytyvät ominaisuudet**: `margin`, `padding`, `border`, `width`, `height`, `position`
### 🔄 **Pedagoginen tarkistus**
**CSS:n perusymmärrys**: Ennen siirtymistä valitsimiin varmista, että osaat:
- ✅ Selittää kaskadin ja periytymisen eron
- ✅ Ennustaa, mikä tyyli voittaa spesifisyyden ristiriidassa
- ✅ Tunnistaa, mitkä ominaisuudet periytyvät vanhemmilta elementeiltä
- ✅ Yhdistää CSS-tiedostot HTML:ään oikein
**Pikatesti**: Jos sinulla on nämä tyylit, minkä värinen `` ``-sisällä on?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*Vastaus: Punainen (elementtivalitsin kohdistaa suoraan h1:een)*
## CSS-valitsimien hallinta
CSS-valitsimet ovat tapa kohdistaa tiettyjä elementtejä tyylittelyä varten. Ne toimivat kuin tarkat ohjeet – sen sijaan, että sanoisit "talo", voit sanoa "sininen talo, jossa on punainen ovi Maple Streetillä".
CSS tarjoaa erilaisia tapoja olla tarkka, ja oikean valitsimen valitseminen on kuin sopivan työkalun valinta tehtävään. Joskus sinun täytyy tyylitellä kaikki naapuruston ovet, ja joskus vain yksi tietty ovi.
### Elementtivalitsimet (tagit)
Elementtivalitsimet kohdistavat HTML-elementtejä niiden tagin nimen perusteella. Ne sopivat täydellisesti perusmuotoiluun, joka koskee laajasti koko sivua:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**Näiden tyylien ymmärtäminen:**
- **Asettaa** yhtenäisen typografian koko sivulle `body`-valitsimella
- **Poistaa** selaimen oletusmarginaalit ja -täytteet paremman hallinnan vuoksi
- **Tyylittelee** kaikki otsikkoelementit värillä, kohdistuksella ja välimatkoilla
- **Käyttää** `rem`-yksiköitä skaalautuvaan ja saavutettavaan fonttikokoon
Vaikka elementtivalitsimet toimivat hyvin yleiseen muotoiluun, tarvitset tarkempia valitsimia yksittäisten komponenttien, kuten terrariumin kasvien, tyylittelyyn.
### ID-valitsimet yksittäisille elementeille
ID-valitsimet käyttävät `#`-symbolia ja kohdistavat elementtejä, joilla on tietty `id`-attribuutti. Koska ID:t ovat ainutlaatuisia sivulla, ne sopivat täydellisesti yksittäisten, erityisten elementtien, kuten terrariumin vasemman ja oikean kasvikontin, tyylittelyyn.
Luodaan tyylit terrariumin sivukontteille, joissa kasvit sijaitsevat:
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**Tämä koodi tekee seuraavaa:**
- **Sijoittaa** kontit vasemmalle ja oikealle reunalle `absolute`-sijoittelulla
- **Käyttää** `vh`-yksiköitä (näkymäkorkeus) responsiiviseen korkeuteen, joka mukautuu näytön kokoon
- **Soveltaa** `box-sizing: border-box`, jotta täyte sisältyy kokonaisleveyteen
- **Poistaa** tarpeettomat `px`-yksiköt nolla-arvoista siistimmän koodin vuoksi
- **Asettaa** hienovaraisen taustavärin, joka on silmille miellyttävämpi kuin kirkas harmaa
✅ **Koodin laatuhaaste**: Huomaa, kuinka tämä CSS rikkoo DRY-periaatetta (Don't Repeat Yourself). Voitko refaktoroida sen käyttämällä sekä ID:tä että luokkaa?
**Parannettu lähestymistapa:**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### Luokkavalitsimet uudelleenkäytettäville tyyleille
Luokkavalitsimet käyttävät `.`-symbolia ja sopivat, kun haluat soveltaa samoja tyylejä useisiin elementteihin. Toisin kuin ID:t, luokkia voidaan käyttää uudelleen HTML:ssä, mikä tekee niistä ihanteellisia yhtenäisten tyylien luomiseen.
Terrariumissamme jokainen kasvi tarvitsee samanlaista tyylittelyä, mutta myös yksilöllistä sijoittelua. Käytämme yhdistelmää luokkia yhteisiin tyyleihin ja ID:itä yksilölliseen sijoitteluun.
**Tässä on jokaisen kasvin HTML-rakenne:**
```html
```
**Keskeiset elementit selitettynä:**
- **Käyttää** `class="plant-holder"` yhtenäiseen kontin tyylittelyyn kaikille kasveille
- **Soveltaa** `class="plant"` yhteiseen kuvatyylittelyyn ja käyttäytymiseen
- **Sisältää** yksilöllisen `id="plant1"` yksilölliseen sijoitteluun ja JavaScript-vuorovaikutukseen
- **Tarjoaa** kuvailevan alt-tekstin ruudunlukijan saavutettavuuden vuoksi
Lisää nämä tyylit `style.css`-tiedostoosi:
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**Näiden tyylien erittely:**
- **Luo** suhteellisen sijoittelun kasvikontille sijoittelukontekstin luomiseksi
- **Asettaa** jokaisen kasvikontin korkeudeksi 13 %, jotta kaikki kasvit mahtuvat pystysuunnassa ilman vieritystä
- **Siirtää** kontteja hieman vasemmalle, jotta kasvit keskittyvät paremmin konttiensa sisällä
- **Mahdollistaa** kasvien responsiivisen skaalautumisen `max-width`- ja `max-height`-ominaisuuksilla
- **Käyttää** `z-index`-arvoa, jotta kasvit sijoittuvat muiden terrariumin elementtien yläpuolelle
- **Lisää** hienovaraisen hover-efektin CSS-siirtymillä paremman käyttäjäkokemuksen saavuttamiseksi
✅ **Kriittinen ajattelu**: Miksi tarvitsemme sekä `.plant-holder` että `.plant`-valitsimet? Mitä tapahtuisi, jos yrittäisimme käyttää vain yhtä?
> 💡 **Suunnittelumalli**: Kontti (`.plant-holder`) hallitsee asettelua ja sijoittelua, kun taas sisältö (`.plant`) hallitsee ulkonäköä ja skaalautuvuutta. Tämä erottelu tekee koodista helpommin ylläpidettävän ja joustavan.
## CSS-sijoittelun ymmärtäminen
CSS-sijoittelu on kuin näytelmän ohjaaja – ohjaat, missä jokainen näyttelijä seisoo ja miten he liikkuvat lavalla. Jotkut näyttelijät noudattavat normaalia muodostelmaa, kun taas toiset tarvitsevat erityistä sijoittelua dramaattisen vaikutuksen vuoksi.
Kun ymmärrät sijoittelun, monet asetteluun liittyvät haasteet muuttuvat hallittaviksi. Tarvitsetko navigointipalkin, joka pysyy ylhäällä käyttäjän vierittäessä? Sijoittelu hoitaa sen. Haluatko työkaluvihjeen, joka ilmestyy tiettyyn paikkaan? Se on myös sijoittelua.
### Viisi sijoitteluarvoa
```mermaid
quadrantChart
title CSS Positioning Strategy
x-axis Document Flow --> Removed from Flow
y-axis Static Position --> Precise Control
quadrant-1 Absolute
quadrant-2 Fixed
quadrant-3 Static
quadrant-4 Sticky
Static: [0.2, 0.2]
Relative: [0.3, 0.6]
Absolute: [0.8, 0.8]
Fixed: [0.9, 0.7]
Sticky: [0.5, 0.9]
```
| Sijoitteluarvo | Käyttäytyminen | Käyttötapaus |
|----------------|----------------|--------------|
| `static` | Oletusvirtaus, ei huomioi top/left/right/bottom | Normaali dokumenttiasettelu |
| `relative` | Sijoitettu suhteessa normaaliin sijaintiinsa | Pienet säädöt, sijoittelukontekstin luominen |
| `absolute` | Sijoitettu lähimpään sijoitettuun esivanhempaan | Tarkka sijoittelu, päällekkäisyydet |
| `fixed` | Sijoitettu suhteessa näkymään | Navigointipalkit, kelluvat elementit |
| `sticky` | Vaihtuu suhteellisen ja kiinteän välillä vierityksen mukaan | Otsikot, jotka pysyvät vieritettäessä |
### Sijoittelu terrariumissamme
Terrariumissamme käytetään strategista yhdistelmää sijoittelutyyppejä halutun asettelun luomiseksi:
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**Sijoittelustrategian ymmärtäminen:**
- **Absoluuttiset kontit** poistetaan normaalista dokumenttivirrasta ja kiinnitetään näytön reunoille
- **Suhteelliset kasvikontit** luovat sijoittelukontekstin pysyen samalla dokumenttiv
- Miten asettelu muuttuu, jos `.plant-holder` käyttää `absolute` sijasta `relative`?
- Mitä tapahtuu, kun vaihdat `.plant` suhteelliseen (`relative`) sijoitteluun?
### 🔄 **Pedagoginen tarkistus**
**CSS-sijoittelun hallinta**: Pysähdy tarkistamaan ymmärryksesi:
- ✅ Osaatko selittää, miksi kasvit tarvitsevat absoluuttista sijoittelua vedä ja pudota -toiminnossa?
- ✅ Ymmärrätkö, miten suhteelliset säiliöt luovat sijoittelukontekstin?
- ✅ Miksi sivusäiliöt käyttävät absoluuttista sijoittelua?
- ✅ Mitä tapahtuisi, jos poistaisit sijoittelumääritykset kokonaan?
**Yhteys todelliseen maailmaan**: Mieti, miten CSS-sijoittelu heijastaa todellista asettelua:
- **Static**: Kirjat hyllyssä (luonnollinen järjestys)
- **Relative**: Kirjan siirtäminen hieman mutta pitäen sen paikan
- **Absolute**: Kirjanmerkin asettaminen tarkalle sivunumerolle
- **Fixed**: Post-it-lappu, joka pysyy näkyvissä sivuja selatessa
## Terrariumin rakentaminen CSS:llä
Rakennamme nyt lasipurkin pelkästään CSS:llä – ilman kuvia tai grafiikkaohjelmistoa.
Realistisen lasin, varjojen ja syvyysefektien luominen sijoittelun ja läpinäkyvyyden avulla osoittaa CSS:n visuaaliset kyvyt. Tämä tekniikka muistuttaa, miten Bauhaus-liikkeen arkkitehdit käyttivät yksinkertaisia geometrisia muotoja luodakseen monimutkaisia, kauniita rakenteita. Kun ymmärrät nämä periaatteet, tunnistat CSS-tekniikat monien verkkosivustojen taustalla.
```mermaid
flowchart LR
A[Jar Top] --> E[Complete Terrarium]
B[Jar Walls] --> E
C[Dirt Layer] --> E
D[Jar Bottom] --> E
F[Glass Effects] --> E
A1["50% width
5% height
Top position"] --> A
B1["60% width
80% height
Rounded corners
0.5 opacity"] --> B
C1["60% width
5% height
Dark brown
Bottom layer"] --> C
D1["50% width
1% height
Bottom position"] --> D
F1["Subtle shadows
Transparency
Z-index layering"] --> F
style E fill:#d1e1df,stroke:#3a241d
style A fill:#e8f5e8
style B fill:#e8f5e8
style C fill:#8B4513
style D fill:#e8f5e8
```
### Lasipurkin osien luominen
Rakennetaan terrariumpurkki pala kerrallaan. Jokainen osa käyttää absoluuttista sijoittelua ja prosenttipohjaista mitoitusta responsiivisen suunnittelun mahdollistamiseksi:
```css
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
border-radius: 0.5rem 0.5rem 0 0;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0;
left: 25%;
opacity: 0.7;
border-radius: 0 0 0.5rem 0.5rem;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
```
**Terrariumin rakenteen ymmärtäminen:**
- **Käyttää** prosenttipohjaisia mittoja responsiiviseen skaalaamiseen kaikilla näytön kokoilla
- **Sijoittaa** elementit absoluuttisesti pinotakseen ja kohdistakseen ne tarkasti
- **Soveltaa** erilaisia läpinäkyvyysarvoja lasin läpinäkyvyysefektin luomiseksi
- **Toteuttaa** `z-index`-kerrostuksen, jotta kasvit näkyvät purkin sisällä
- **Lisää** hienovaraisen varjostuksen ja viimeistellyn pyöristetyn reunan realistisemman ulkonäön saavuttamiseksi
### Responsiivinen suunnittelu prosenttien avulla
Huomaa, että kaikki mitat käyttävät prosentteja kiinteiden pikseliarvojen sijaan:
**Miksi tämä on tärkeää:**
- **Varmistaa**, että terrarium skaalautuu suhteellisesti kaikilla näytön kokoilla
- **Säilyttää** visuaaliset suhteet purkin osien välillä
- **Tarjoaa** yhtenäisen kokemuksen mobiilipuhelimista suuriin työpöytänäyttöihin
- **Mahdollistaa**, että suunnittelu mukautuu ilman visuaalisen asettelun rikkoutumista
### CSS-yksiköt käytännössä
Käytämme `rem`-yksiköitä pyöristettyjen reunojen määrittämiseen, jotka skaalautuvat suhteessa juurikoon kokoon. Tämä luo saavutettavampia suunnitelmia, jotka kunnioittavat käyttäjän fonttiasetuksia. Lue lisää [CSS:n suhteellisista yksiköistä](https://www.w3.org/TR/css-values-3/#font-relative-lengths) virallisesta spesifikaatiosta.
✅ **Visuaalinen kokeilu**: Kokeile muuttaa näitä arvoja ja tarkkaile vaikutuksia:
- Muuta purkin läpinäkyvyys 0.5:stä 0.8:aan – miten tämä vaikuttaa lasin ulkonäköön?
- Säädä maan väriä `#3a241d`:stä `#8B4513`:een – mikä visuaalinen vaikutus tällä on?
- Muuta maan `z-index` arvoksi 2 – mitä tapahtuu kerrostukselle?
### 🔄 **Pedagoginen tarkistus**
**CSS:n visuaalisen suunnittelun ymmärtäminen**: Vahvista visuaalisen CSS:n hallintaasi:
- ✅ Miten prosenttipohjaiset mitat luovat responsiivisen suunnittelun?
- ✅ Miksi läpinäkyvyys luo lasin läpinäkyvyysefektin?
- ✅ Mikä rooli `z-index`-arvolla on elementtien kerrostuksessa?
- ✅ Miten pyöristettyjen reunojen arvot luovat purkin muodon?
**Suunnitteluperiaate**: Huomaa, miten rakennamme monimutkaisia visuaaleja yksinkertaisista muodoista:
1. **Suorakulmiot** → **Pyöristetyt suorakulmiot** → **Purkin osat**
2. **Tasaiset värit** → **Läpinäkyvyys** → **Lasiefekti**
3. **Yksittäiset elementit** → **Kerrostettu koostumus** → **3D-ulkonäkö**
---
## GitHub Copilot Agent -haaste 🚀
Käytä Agent-tilaa suorittaaksesi seuraavan haasteen:
**Kuvaus:** Luo CSS-animaatio, joka saa terrariumin kasvit heilumaan kevyesti edestakaisin, simuloiden luonnollista tuulen vaikutusta. Tämä auttaa sinua harjoittelemaan CSS-animaatioita, muunnoksia ja avainkehyksiä samalla kun parannat terrariumin visuaalista vetovoimaa.
**Ohje:** Lisää CSS-avainkehysanimaatiot, jotka saavat terrariumin kasvit heilumaan kevyesti puolelta toiselle. Luo heilumisliike, joka kiertää jokaista kasvia hieman (2-3 astetta) vasemmalle ja oikealle 3-4 sekunnin ajan, ja sovella sitä `.plant`-luokkaan. Varmista, että animaatio toistuu loputtomasti ja sisältää easing-funktion luonnollista liikettä varten.
Lue lisää [agent-tilasta](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) täällä.
## 🚀 Haaste: Lasin heijastusten lisääminen
Valmis parantamaan terrariumiasi realistisilla lasin heijastuksilla? Tämä tekniikka lisää syvyyttä ja realismia suunnitteluun.
Luot hienovaraisia korostuksia, jotka simuloivat, miten valo heijastuu lasipinnoilta. Tämä lähestymistapa on samanlainen kuin miten renessanssimaalari Jan van Eyck käytti valoa ja heijastusta saadakseen maalatun lasin näyttämään kolmiulotteiselta. Tässä on tavoitteenasi:
**Haasteesi:**
- **Luo** hienovaraisia valkoisia tai vaaleanvärisiä soikeita muotoja lasin heijastuksille
- **Sijoita** ne strategisesti purkin vasemmalle puolelle
- **Sovella** sopivia läpinäkyvyys- ja sumeusvaikutuksia realistisen valon heijastuksen saavuttamiseksi
- **Käytä** `border-radius`-ominaisuutta luodaksesi orgaanisia, kuplamaisia muotoja
- **Kokeile** gradientteja tai varjostuksia lisärealismia varten
## Luentojälkeinen kysely
[Luentojälkeinen kysely](https://ff-quizzes.netlify.app/web/quiz/18)
## Laajenna CSS-tietämystäsi
CSS voi aluksi tuntua monimutkaiselta, mutta näiden ydinkonseptien ymmärtäminen tarjoaa vankan perustan edistyneemmille tekniikoille.
**Seuraavat CSS-opiskelun alueesi:**
- **Flexbox** - yksinkertaistaa elementtien kohdistamista ja jakamista
- **CSS Grid** - tarjoaa tehokkaita työkaluja monimutkaisten asettelujen luomiseen
- **CSS-muuttujat** - vähentää toistoa ja parantaa ylläpidettävyyttä
- **Responsiivinen suunnittelu** - varmistaa, että sivustot toimivat hyvin eri näytön kokoilla
### Interaktiiviset oppimisresurssit
Harjoittele näitä konsepteja näiden mukaansatempaavien, käytännönläheisten pelien avulla:
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Hallitse Flexbox hauskojen haasteiden avulla
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - Opettele CSS Grid viljelemällä virtuaalisia porkkanoita
- 🎯 [CSS Battle](https://cssbattle.dev/) - Testaa CSS-taitojasi koodaushaasteilla
### Lisäopiskelu
CSS:n perusteiden kattavaan oppimiseen suorita tämä Microsoft Learn -moduuli: [Muotoile HTML-sovelluksesi CSS:llä](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
### ⚡ **Mitä voit tehdä seuraavan 5 minuutin aikana**
- [ ] Avaa DevTools ja tarkastele minkä tahansa verkkosivuston CSS-tyylejä Elements-paneelissa
- [ ] Luo yksinkertainen CSS-tiedosto ja linkitä se HTML-sivuun
- [ ] Kokeile värien muuttamista eri menetelmillä: heksadesimaali, RGB ja nimetty väri
- [ ] Harjoittele laatikkomallia lisäämällä paddingia ja marginaalia div-elementtiin
### 🎯 **Mitä voit saavuttaa tämän tunnin aikana**
- [ ] Suorita luennon jälkeinen kysely ja kertaa CSS:n perusteet
- [ ] Muotoile HTML-sivusi fonteilla, väreillä ja väleillä
- [ ] Luo yksinkertainen asettelu flexboxilla tai gridillä
- [ ] Kokeile CSS-siirtymiä sujuvien efektien luomiseksi
- [ ] Harjoittele responsiivista suunnittelua media-kyselyiden avulla
### 📅 **Viikon mittainen CSS-seikkailusi**
- [ ] Suorita terrariumin tyylittelytehtävä luovalla otteella
- [ ] Hallitse CSS Grid luomalla valokuvagalleria-asettelu
- [ ] Opettele CSS-animaatioita elävöittääksesi suunnitelmiasi
- [ ] Tutustu CSS-esiprosessoreihin, kuten Sass tai Less
- [ ] Tutki suunnitteluperiaatteita ja sovella niitä CSS:ään
- [ ] Analysoi ja luo uudelleen mielenkiintoisia suunnitelmia, joita löydät verkosta
### 🌟 **Kuukauden mittainen suunnittelun hallinta**
- [ ] Rakenna täydellinen responsiivinen verkkosivuston suunnittelujärjestelmä
- [ ] Opettele CSS-in-JS tai hyötylähtöisiä kehyksiä, kuten Tailwind
- [ ] Osallistu avoimen lähdekoodin projekteihin CSS-parannuksilla
- [ ] Hallitse edistyneitä CSS-konsepteja, kuten CSS-mukautettuja ominaisuuksia ja sisältöä
- [ ] Luo uudelleenkäytettäviä komponenttikirjastoja modulaarisella CSS:llä
- [ ] Mentoroida muita CSS:n oppimisessa ja jakaa suunnittelutietämystä
## 🎯 CSS-osaamisen aikajana
```mermaid
timeline
title CSS Learning Progression
section Foundation (10 minutes)
File Connection: Link CSS to HTML
: Understand cascade rules
: Learn inheritance basics
section Selectors (15 minutes)
Targeting Elements: Element selectors
: Class patterns
: ID specificity
: Combinators
section Box Model (20 minutes)
Layout Fundamentals: Margin and padding
: Border properties
: Content sizing
: Box-sizing behavior
section Positioning (25 minutes)
Element Placement: Static vs relative
: Absolute positioning
: Z-index layering
: Responsive units
section Visual Design (30 minutes)
Styling Mastery: Colors and opacity
: Shadows and effects
: Transitions
: Transform properties
section Responsive Design (45 minutes)
Multi-Device Support: Media queries
: Flexible layouts
: Mobile-first approach
: Viewport optimization
section Advanced Techniques (1 week)
Modern CSS: Flexbox layouts
: CSS Grid systems
: Custom properties
: Animation keyframes
section Professional Skills (1 month)
CSS Architecture: Component patterns
: Maintainable code
: Performance optimization
: Cross-browser compatibility
```
### 🛠️ CSS-työkalupakin yhteenveto
Tämän oppitunnin jälkeen sinulla on:
- **Kaskadin ymmärrys**: Miten tyylit periytyvät ja ohittavat toisensa
- **Valitsijoiden hallinta**: Tarkka kohdistaminen elementteihin, luokkiin ja ID:ihin
- **Sijoittelutaidot**: Strateginen elementtien sijoittaminen ja kerrostaminen
- **Visuaalinen suunnittelu**: Lasiefektien, varjojen ja läpinäkyvyyden luominen
- **Responsiiviset tekniikat**: Prosenttipohjaiset asettelut, jotka mukautuvat mihin tahansa näyttöön
- **Koodin organisointi**: Siisti, ylläpidettävä CSS-rakenne
- **Modernit käytännöt**: Suhteellisten yksiköiden ja saavutettavien suunnittelumallien käyttö
**Seuraavat askeleet**: Terrariumillasi on nyt sekä rakenne (HTML) että tyyli (CSS). Viimeinen oppitunti lisää interaktiivisuutta JavaScriptillä!
## Tehtävä
[CSS Refactoring](assignment.md)
---
**Vastuuvapauslauseke**:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
`-elementtisi. Näet, että se perii fonttiperheen body-elementiltä:
✅ **Kokeilua**: Kokeile asettaa muita periytyviä ominaisuuksia ``-elementille, kuten `color`, `line-height` tai `text-align`. Mitä tapahtuu otsikolle ja muille elementeille?
> 📝 **Periytyvät ominaisuudet**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **Ei-periytyvät ominaisuudet**: `margin`, `padding`, `border`, `width`, `height`, `position`
### 🔄 **Pedagoginen tarkistus**
**CSS:n perusymmärrys**: Ennen siirtymistä valitsimiin varmista, että osaat:
- ✅ Selittää kaskadin ja periytymisen eron
- ✅ Ennustaa, mikä tyyli voittaa spesifisyyden ristiriidassa
- ✅ Tunnistaa, mitkä ominaisuudet periytyvät vanhemmilta elementeiltä
- ✅ Yhdistää CSS-tiedostot HTML:ään oikein
**Pikatesti**: Jos sinulla on nämä tyylit, minkä värinen `` ``-sisällä on?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*Vastaus: Punainen (elementtivalitsin kohdistaa suoraan h1:een)*
## CSS-valitsimien hallinta
CSS-valitsimet ovat tapa kohdistaa tiettyjä elementtejä tyylittelyä varten. Ne toimivat kuin tarkat ohjeet – sen sijaan, että sanoisit "talo", voit sanoa "sininen talo, jossa on punainen ovi Maple Streetillä".
CSS tarjoaa erilaisia tapoja olla tarkka, ja oikean valitsimen valitseminen on kuin sopivan työkalun valinta tehtävään. Joskus sinun täytyy tyylitellä kaikki naapuruston ovet, ja joskus vain yksi tietty ovi.
### Elementtivalitsimet (tagit)
Elementtivalitsimet kohdistavat HTML-elementtejä niiden tagin nimen perusteella. Ne sopivat täydellisesti perusmuotoiluun, joka koskee laajasti koko sivua:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**Näiden tyylien ymmärtäminen:**
- **Asettaa** yhtenäisen typografian koko sivulle `body`-valitsimella
- **Poistaa** selaimen oletusmarginaalit ja -täytteet paremman hallinnan vuoksi
- **Tyylittelee** kaikki otsikkoelementit värillä, kohdistuksella ja välimatkoilla
- **Käyttää** `rem`-yksiköitä skaalautuvaan ja saavutettavaan fonttikokoon
Vaikka elementtivalitsimet toimivat hyvin yleiseen muotoiluun, tarvitset tarkempia valitsimia yksittäisten komponenttien, kuten terrariumin kasvien, tyylittelyyn.
### ID-valitsimet yksittäisille elementeille
ID-valitsimet käyttävät `#`-symbolia ja kohdistavat elementtejä, joilla on tietty `id`-attribuutti. Koska ID:t ovat ainutlaatuisia sivulla, ne sopivat täydellisesti yksittäisten, erityisten elementtien, kuten terrariumin vasemman ja oikean kasvikontin, tyylittelyyn.
Luodaan tyylit terrariumin sivukontteille, joissa kasvit sijaitsevat:
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**Tämä koodi tekee seuraavaa:**
- **Sijoittaa** kontit vasemmalle ja oikealle reunalle `absolute`-sijoittelulla
- **Käyttää** `vh`-yksiköitä (näkymäkorkeus) responsiiviseen korkeuteen, joka mukautuu näytön kokoon
- **Soveltaa** `box-sizing: border-box`, jotta täyte sisältyy kokonaisleveyteen
- **Poistaa** tarpeettomat `px`-yksiköt nolla-arvoista siistimmän koodin vuoksi
- **Asettaa** hienovaraisen taustavärin, joka on silmille miellyttävämpi kuin kirkas harmaa
✅ **Koodin laatuhaaste**: Huomaa, kuinka tämä CSS rikkoo DRY-periaatetta (Don't Repeat Yourself). Voitko refaktoroida sen käyttämällä sekä ID:tä että luokkaa?
**Parannettu lähestymistapa:**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### Luokkavalitsimet uudelleenkäytettäville tyyleille
Luokkavalitsimet käyttävät `.`-symbolia ja sopivat, kun haluat soveltaa samoja tyylejä useisiin elementteihin. Toisin kuin ID:t, luokkia voidaan käyttää uudelleen HTML:ssä, mikä tekee niistä ihanteellisia yhtenäisten tyylien luomiseen.
Terrariumissamme jokainen kasvi tarvitsee samanlaista tyylittelyä, mutta myös yksilöllistä sijoittelua. Käytämme yhdistelmää luokkia yhteisiin tyyleihin ja ID:itä yksilölliseen sijoitteluun.
**Tässä on jokaisen kasvin HTML-rakenne:**
```html
```
**Keskeiset elementit selitettynä:**
- **Käyttää** `class="plant-holder"` yhtenäiseen kontin tyylittelyyn kaikille kasveille
- **Soveltaa** `class="plant"` yhteiseen kuvatyylittelyyn ja käyttäytymiseen
- **Sisältää** yksilöllisen `id="plant1"` yksilölliseen sijoitteluun ja JavaScript-vuorovaikutukseen
- **Tarjoaa** kuvailevan alt-tekstin ruudunlukijan saavutettavuuden vuoksi
Lisää nämä tyylit `style.css`-tiedostoosi:
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**Näiden tyylien erittely:**
- **Luo** suhteellisen sijoittelun kasvikontille sijoittelukontekstin luomiseksi
- **Asettaa** jokaisen kasvikontin korkeudeksi 13 %, jotta kaikki kasvit mahtuvat pystysuunnassa ilman vieritystä
- **Siirtää** kontteja hieman vasemmalle, jotta kasvit keskittyvät paremmin konttiensa sisällä
- **Mahdollistaa** kasvien responsiivisen skaalautumisen `max-width`- ja `max-height`-ominaisuuksilla
- **Käyttää** `z-index`-arvoa, jotta kasvit sijoittuvat muiden terrariumin elementtien yläpuolelle
- **Lisää** hienovaraisen hover-efektin CSS-siirtymillä paremman käyttäjäkokemuksen saavuttamiseksi
✅ **Kriittinen ajattelu**: Miksi tarvitsemme sekä `.plant-holder` että `.plant`-valitsimet? Mitä tapahtuisi, jos yrittäisimme käyttää vain yhtä?
> 💡 **Suunnittelumalli**: Kontti (`.plant-holder`) hallitsee asettelua ja sijoittelua, kun taas sisältö (`.plant`) hallitsee ulkonäköä ja skaalautuvuutta. Tämä erottelu tekee koodista helpommin ylläpidettävän ja joustavan.
## CSS-sijoittelun ymmärtäminen
CSS-sijoittelu on kuin näytelmän ohjaaja – ohjaat, missä jokainen näyttelijä seisoo ja miten he liikkuvat lavalla. Jotkut näyttelijät noudattavat normaalia muodostelmaa, kun taas toiset tarvitsevat erityistä sijoittelua dramaattisen vaikutuksen vuoksi.
Kun ymmärrät sijoittelun, monet asetteluun liittyvät haasteet muuttuvat hallittaviksi. Tarvitsetko navigointipalkin, joka pysyy ylhäällä käyttäjän vierittäessä? Sijoittelu hoitaa sen. Haluatko työkaluvihjeen, joka ilmestyy tiettyyn paikkaan? Se on myös sijoittelua.
### Viisi sijoitteluarvoa
```mermaid
quadrantChart
title CSS Positioning Strategy
x-axis Document Flow --> Removed from Flow
y-axis Static Position --> Precise Control
quadrant-1 Absolute
quadrant-2 Fixed
quadrant-3 Static
quadrant-4 Sticky
Static: [0.2, 0.2]
Relative: [0.3, 0.6]
Absolute: [0.8, 0.8]
Fixed: [0.9, 0.7]
Sticky: [0.5, 0.9]
```
| Sijoitteluarvo | Käyttäytyminen | Käyttötapaus |
|----------------|----------------|--------------|
| `static` | Oletusvirtaus, ei huomioi top/left/right/bottom | Normaali dokumenttiasettelu |
| `relative` | Sijoitettu suhteessa normaaliin sijaintiinsa | Pienet säädöt, sijoittelukontekstin luominen |
| `absolute` | Sijoitettu lähimpään sijoitettuun esivanhempaan | Tarkka sijoittelu, päällekkäisyydet |
| `fixed` | Sijoitettu suhteessa näkymään | Navigointipalkit, kelluvat elementit |
| `sticky` | Vaihtuu suhteellisen ja kiinteän välillä vierityksen mukaan | Otsikot, jotka pysyvät vieritettäessä |
### Sijoittelu terrariumissamme
Terrariumissamme käytetään strategista yhdistelmää sijoittelutyyppejä halutun asettelun luomiseksi:
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**Sijoittelustrategian ymmärtäminen:**
- **Absoluuttiset kontit** poistetaan normaalista dokumenttivirrasta ja kiinnitetään näytön reunoille
- **Suhteelliset kasvikontit** luovat sijoittelukontekstin pysyen samalla dokumenttiv
- Miten asettelu muuttuu, jos `.plant-holder` käyttää `absolute` sijasta `relative`?
- Mitä tapahtuu, kun vaihdat `.plant` suhteelliseen (`relative`) sijoitteluun?
### 🔄 **Pedagoginen tarkistus**
**CSS-sijoittelun hallinta**: Pysähdy tarkistamaan ymmärryksesi:
- ✅ Osaatko selittää, miksi kasvit tarvitsevat absoluuttista sijoittelua vedä ja pudota -toiminnossa?
- ✅ Ymmärrätkö, miten suhteelliset säiliöt luovat sijoittelukontekstin?
- ✅ Miksi sivusäiliöt käyttävät absoluuttista sijoittelua?
- ✅ Mitä tapahtuisi, jos poistaisit sijoittelumääritykset kokonaan?
**Yhteys todelliseen maailmaan**: Mieti, miten CSS-sijoittelu heijastaa todellista asettelua:
- **Static**: Kirjat hyllyssä (luonnollinen järjestys)
- **Relative**: Kirjan siirtäminen hieman mutta pitäen sen paikan
- **Absolute**: Kirjanmerkin asettaminen tarkalle sivunumerolle
- **Fixed**: Post-it-lappu, joka pysyy näkyvissä sivuja selatessa
## Terrariumin rakentaminen CSS:llä
Rakennamme nyt lasipurkin pelkästään CSS:llä – ilman kuvia tai grafiikkaohjelmistoa.
Realistisen lasin, varjojen ja syvyysefektien luominen sijoittelun ja läpinäkyvyyden avulla osoittaa CSS:n visuaaliset kyvyt. Tämä tekniikka muistuttaa, miten Bauhaus-liikkeen arkkitehdit käyttivät yksinkertaisia geometrisia muotoja luodakseen monimutkaisia, kauniita rakenteita. Kun ymmärrät nämä periaatteet, tunnistat CSS-tekniikat monien verkkosivustojen taustalla.
```mermaid
flowchart LR
A[Jar Top] --> E[Complete Terrarium]
B[Jar Walls] --> E
C[Dirt Layer] --> E
D[Jar Bottom] --> E
F[Glass Effects] --> E
A1["50% width
5% height
Top position"] --> A
B1["60% width
80% height
Rounded corners
0.5 opacity"] --> B
C1["60% width
5% height
Dark brown
Bottom layer"] --> C
D1["50% width
1% height
Bottom position"] --> D
F1["Subtle shadows
Transparency
Z-index layering"] --> F
style E fill:#d1e1df,stroke:#3a241d
style A fill:#e8f5e8
style B fill:#e8f5e8
style C fill:#8B4513
style D fill:#e8f5e8
```
### Lasipurkin osien luominen
Rakennetaan terrariumpurkki pala kerrallaan. Jokainen osa käyttää absoluuttista sijoittelua ja prosenttipohjaista mitoitusta responsiivisen suunnittelun mahdollistamiseksi:
```css
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
border-radius: 0.5rem 0.5rem 0 0;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0;
left: 25%;
opacity: 0.7;
border-radius: 0 0 0.5rem 0.5rem;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
```
**Terrariumin rakenteen ymmärtäminen:**
- **Käyttää** prosenttipohjaisia mittoja responsiiviseen skaalaamiseen kaikilla näytön kokoilla
- **Sijoittaa** elementit absoluuttisesti pinotakseen ja kohdistakseen ne tarkasti
- **Soveltaa** erilaisia läpinäkyvyysarvoja lasin läpinäkyvyysefektin luomiseksi
- **Toteuttaa** `z-index`-kerrostuksen, jotta kasvit näkyvät purkin sisällä
- **Lisää** hienovaraisen varjostuksen ja viimeistellyn pyöristetyn reunan realistisemman ulkonäön saavuttamiseksi
### Responsiivinen suunnittelu prosenttien avulla
Huomaa, että kaikki mitat käyttävät prosentteja kiinteiden pikseliarvojen sijaan:
**Miksi tämä on tärkeää:**
- **Varmistaa**, että terrarium skaalautuu suhteellisesti kaikilla näytön kokoilla
- **Säilyttää** visuaaliset suhteet purkin osien välillä
- **Tarjoaa** yhtenäisen kokemuksen mobiilipuhelimista suuriin työpöytänäyttöihin
- **Mahdollistaa**, että suunnittelu mukautuu ilman visuaalisen asettelun rikkoutumista
### CSS-yksiköt käytännössä
Käytämme `rem`-yksiköitä pyöristettyjen reunojen määrittämiseen, jotka skaalautuvat suhteessa juurikoon kokoon. Tämä luo saavutettavampia suunnitelmia, jotka kunnioittavat käyttäjän fonttiasetuksia. Lue lisää [CSS:n suhteellisista yksiköistä](https://www.w3.org/TR/css-values-3/#font-relative-lengths) virallisesta spesifikaatiosta.
✅ **Visuaalinen kokeilu**: Kokeile muuttaa näitä arvoja ja tarkkaile vaikutuksia:
- Muuta purkin läpinäkyvyys 0.5:stä 0.8:aan – miten tämä vaikuttaa lasin ulkonäköön?
- Säädä maan väriä `#3a241d`:stä `#8B4513`:een – mikä visuaalinen vaikutus tällä on?
- Muuta maan `z-index` arvoksi 2 – mitä tapahtuu kerrostukselle?
### 🔄 **Pedagoginen tarkistus**
**CSS:n visuaalisen suunnittelun ymmärtäminen**: Vahvista visuaalisen CSS:n hallintaasi:
- ✅ Miten prosenttipohjaiset mitat luovat responsiivisen suunnittelun?
- ✅ Miksi läpinäkyvyys luo lasin läpinäkyvyysefektin?
- ✅ Mikä rooli `z-index`-arvolla on elementtien kerrostuksessa?
- ✅ Miten pyöristettyjen reunojen arvot luovat purkin muodon?
**Suunnitteluperiaate**: Huomaa, miten rakennamme monimutkaisia visuaaleja yksinkertaisista muodoista:
1. **Suorakulmiot** → **Pyöristetyt suorakulmiot** → **Purkin osat**
2. **Tasaiset värit** → **Läpinäkyvyys** → **Lasiefekti**
3. **Yksittäiset elementit** → **Kerrostettu koostumus** → **3D-ulkonäkö**
---
## GitHub Copilot Agent -haaste 🚀
Käytä Agent-tilaa suorittaaksesi seuraavan haasteen:
**Kuvaus:** Luo CSS-animaatio, joka saa terrariumin kasvit heilumaan kevyesti edestakaisin, simuloiden luonnollista tuulen vaikutusta. Tämä auttaa sinua harjoittelemaan CSS-animaatioita, muunnoksia ja avainkehyksiä samalla kun parannat terrariumin visuaalista vetovoimaa.
**Ohje:** Lisää CSS-avainkehysanimaatiot, jotka saavat terrariumin kasvit heilumaan kevyesti puolelta toiselle. Luo heilumisliike, joka kiertää jokaista kasvia hieman (2-3 astetta) vasemmalle ja oikealle 3-4 sekunnin ajan, ja sovella sitä `.plant`-luokkaan. Varmista, että animaatio toistuu loputtomasti ja sisältää easing-funktion luonnollista liikettä varten.
Lue lisää [agent-tilasta](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) täällä.
## 🚀 Haaste: Lasin heijastusten lisääminen
Valmis parantamaan terrariumiasi realistisilla lasin heijastuksilla? Tämä tekniikka lisää syvyyttä ja realismia suunnitteluun.
Luot hienovaraisia korostuksia, jotka simuloivat, miten valo heijastuu lasipinnoilta. Tämä lähestymistapa on samanlainen kuin miten renessanssimaalari Jan van Eyck käytti valoa ja heijastusta saadakseen maalatun lasin näyttämään kolmiulotteiselta. Tässä on tavoitteenasi:
**Haasteesi:**
- **Luo** hienovaraisia valkoisia tai vaaleanvärisiä soikeita muotoja lasin heijastuksille
- **Sijoita** ne strategisesti purkin vasemmalle puolelle
- **Sovella** sopivia läpinäkyvyys- ja sumeusvaikutuksia realistisen valon heijastuksen saavuttamiseksi
- **Käytä** `border-radius`-ominaisuutta luodaksesi orgaanisia, kuplamaisia muotoja
- **Kokeile** gradientteja tai varjostuksia lisärealismia varten
## Luentojälkeinen kysely
[Luentojälkeinen kysely](https://ff-quizzes.netlify.app/web/quiz/18)
## Laajenna CSS-tietämystäsi
CSS voi aluksi tuntua monimutkaiselta, mutta näiden ydinkonseptien ymmärtäminen tarjoaa vankan perustan edistyneemmille tekniikoille.
**Seuraavat CSS-opiskelun alueesi:**
- **Flexbox** - yksinkertaistaa elementtien kohdistamista ja jakamista
- **CSS Grid** - tarjoaa tehokkaita työkaluja monimutkaisten asettelujen luomiseen
- **CSS-muuttujat** - vähentää toistoa ja parantaa ylläpidettävyyttä
- **Responsiivinen suunnittelu** - varmistaa, että sivustot toimivat hyvin eri näytön kokoilla
### Interaktiiviset oppimisresurssit
Harjoittele näitä konsepteja näiden mukaansatempaavien, käytännönläheisten pelien avulla:
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Hallitse Flexbox hauskojen haasteiden avulla
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - Opettele CSS Grid viljelemällä virtuaalisia porkkanoita
- 🎯 [CSS Battle](https://cssbattle.dev/) - Testaa CSS-taitojasi koodaushaasteilla
### Lisäopiskelu
CSS:n perusteiden kattavaan oppimiseen suorita tämä Microsoft Learn -moduuli: [Muotoile HTML-sovelluksesi CSS:llä](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
### ⚡ **Mitä voit tehdä seuraavan 5 minuutin aikana**
- [ ] Avaa DevTools ja tarkastele minkä tahansa verkkosivuston CSS-tyylejä Elements-paneelissa
- [ ] Luo yksinkertainen CSS-tiedosto ja linkitä se HTML-sivuun
- [ ] Kokeile värien muuttamista eri menetelmillä: heksadesimaali, RGB ja nimetty väri
- [ ] Harjoittele laatikkomallia lisäämällä paddingia ja marginaalia div-elementtiin
### 🎯 **Mitä voit saavuttaa tämän tunnin aikana**
- [ ] Suorita luennon jälkeinen kysely ja kertaa CSS:n perusteet
- [ ] Muotoile HTML-sivusi fonteilla, väreillä ja väleillä
- [ ] Luo yksinkertainen asettelu flexboxilla tai gridillä
- [ ] Kokeile CSS-siirtymiä sujuvien efektien luomiseksi
- [ ] Harjoittele responsiivista suunnittelua media-kyselyiden avulla
### 📅 **Viikon mittainen CSS-seikkailusi**
- [ ] Suorita terrariumin tyylittelytehtävä luovalla otteella
- [ ] Hallitse CSS Grid luomalla valokuvagalleria-asettelu
- [ ] Opettele CSS-animaatioita elävöittääksesi suunnitelmiasi
- [ ] Tutustu CSS-esiprosessoreihin, kuten Sass tai Less
- [ ] Tutki suunnitteluperiaatteita ja sovella niitä CSS:ään
- [ ] Analysoi ja luo uudelleen mielenkiintoisia suunnitelmia, joita löydät verkosta
### 🌟 **Kuukauden mittainen suunnittelun hallinta**
- [ ] Rakenna täydellinen responsiivinen verkkosivuston suunnittelujärjestelmä
- [ ] Opettele CSS-in-JS tai hyötylähtöisiä kehyksiä, kuten Tailwind
- [ ] Osallistu avoimen lähdekoodin projekteihin CSS-parannuksilla
- [ ] Hallitse edistyneitä CSS-konsepteja, kuten CSS-mukautettuja ominaisuuksia ja sisältöä
- [ ] Luo uudelleenkäytettäviä komponenttikirjastoja modulaarisella CSS:llä
- [ ] Mentoroida muita CSS:n oppimisessa ja jakaa suunnittelutietämystä
## 🎯 CSS-osaamisen aikajana
```mermaid
timeline
title CSS Learning Progression
section Foundation (10 minutes)
File Connection: Link CSS to HTML
: Understand cascade rules
: Learn inheritance basics
section Selectors (15 minutes)
Targeting Elements: Element selectors
: Class patterns
: ID specificity
: Combinators
section Box Model (20 minutes)
Layout Fundamentals: Margin and padding
: Border properties
: Content sizing
: Box-sizing behavior
section Positioning (25 minutes)
Element Placement: Static vs relative
: Absolute positioning
: Z-index layering
: Responsive units
section Visual Design (30 minutes)
Styling Mastery: Colors and opacity
: Shadows and effects
: Transitions
: Transform properties
section Responsive Design (45 minutes)
Multi-Device Support: Media queries
: Flexible layouts
: Mobile-first approach
: Viewport optimization
section Advanced Techniques (1 week)
Modern CSS: Flexbox layouts
: CSS Grid systems
: Custom properties
: Animation keyframes
section Professional Skills (1 month)
CSS Architecture: Component patterns
: Maintainable code
: Performance optimization
: Cross-browser compatibility
```
### 🛠️ CSS-työkalupakin yhteenveto
Tämän oppitunnin jälkeen sinulla on:
- **Kaskadin ymmärrys**: Miten tyylit periytyvät ja ohittavat toisensa
- **Valitsijoiden hallinta**: Tarkka kohdistaminen elementteihin, luokkiin ja ID:ihin
- **Sijoittelutaidot**: Strateginen elementtien sijoittaminen ja kerrostaminen
- **Visuaalinen suunnittelu**: Lasiefektien, varjojen ja läpinäkyvyyden luominen
- **Responsiiviset tekniikat**: Prosenttipohjaiset asettelut, jotka mukautuvat mihin tahansa näyttöön
- **Koodin organisointi**: Siisti, ylläpidettävä CSS-rakenne
- **Modernit käytännöt**: Suhteellisten yksiköiden ja saavutettavien suunnittelumallien käyttö
**Seuraavat askeleet**: Terrariumillasi on nyt sekä rakenne (HTML) että tyyli (CSS). Viimeinen oppitunti lisää interaktiivisuutta JavaScriptillä!
## Tehtävä
[CSS Refactoring](assignment.md)
---
**Vastuuvapauslauseke**:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
`-sisällä on?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*Vastaus: Punainen (elementtivalitsin kohdistaa suoraan h1:een)*
## CSS-valitsimien hallinta
CSS-valitsimet ovat tapa kohdistaa tiettyjä elementtejä tyylittelyä varten. Ne toimivat kuin tarkat ohjeet – sen sijaan, että sanoisit "talo", voit sanoa "sininen talo, jossa on punainen ovi Maple Streetillä".
CSS tarjoaa erilaisia tapoja olla tarkka, ja oikean valitsimen valitseminen on kuin sopivan työkalun valinta tehtävään. Joskus sinun täytyy tyylitellä kaikki naapuruston ovet, ja joskus vain yksi tietty ovi.
### Elementtivalitsimet (tagit)
Elementtivalitsimet kohdistavat HTML-elementtejä niiden tagin nimen perusteella. Ne sopivat täydellisesti perusmuotoiluun, joka koskee laajasti koko sivua:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**Näiden tyylien ymmärtäminen:**
- **Asettaa** yhtenäisen typografian koko sivulle `body`-valitsimella
- **Poistaa** selaimen oletusmarginaalit ja -täytteet paremman hallinnan vuoksi
- **Tyylittelee** kaikki otsikkoelementit värillä, kohdistuksella ja välimatkoilla
- **Käyttää** `rem`-yksiköitä skaalautuvaan ja saavutettavaan fonttikokoon
Vaikka elementtivalitsimet toimivat hyvin yleiseen muotoiluun, tarvitset tarkempia valitsimia yksittäisten komponenttien, kuten terrariumin kasvien, tyylittelyyn.
### ID-valitsimet yksittäisille elementeille
ID-valitsimet käyttävät `#`-symbolia ja kohdistavat elementtejä, joilla on tietty `id`-attribuutti. Koska ID:t ovat ainutlaatuisia sivulla, ne sopivat täydellisesti yksittäisten, erityisten elementtien, kuten terrariumin vasemman ja oikean kasvikontin, tyylittelyyn.
Luodaan tyylit terrariumin sivukontteille, joissa kasvit sijaitsevat:
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**Tämä koodi tekee seuraavaa:**
- **Sijoittaa** kontit vasemmalle ja oikealle reunalle `absolute`-sijoittelulla
- **Käyttää** `vh`-yksiköitä (näkymäkorkeus) responsiiviseen korkeuteen, joka mukautuu näytön kokoon
- **Soveltaa** `box-sizing: border-box`, jotta täyte sisältyy kokonaisleveyteen
- **Poistaa** tarpeettomat `px`-yksiköt nolla-arvoista siistimmän koodin vuoksi
- **Asettaa** hienovaraisen taustavärin, joka on silmille miellyttävämpi kuin kirkas harmaa
✅ **Koodin laatuhaaste**: Huomaa, kuinka tämä CSS rikkoo DRY-periaatetta (Don't Repeat Yourself). Voitko refaktoroida sen käyttämällä sekä ID:tä että luokkaa?
**Parannettu lähestymistapa:**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### Luokkavalitsimet uudelleenkäytettäville tyyleille
Luokkavalitsimet käyttävät `.`-symbolia ja sopivat, kun haluat soveltaa samoja tyylejä useisiin elementteihin. Toisin kuin ID:t, luokkia voidaan käyttää uudelleen HTML:ssä, mikä tekee niistä ihanteellisia yhtenäisten tyylien luomiseen.
Terrariumissamme jokainen kasvi tarvitsee samanlaista tyylittelyä, mutta myös yksilöllistä sijoittelua. Käytämme yhdistelmää luokkia yhteisiin tyyleihin ja ID:itä yksilölliseen sijoitteluun.
**Tässä on jokaisen kasvin HTML-rakenne:**
```html
```
**Keskeiset elementit selitettynä:**
- **Käyttää** `class="plant-holder"` yhtenäiseen kontin tyylittelyyn kaikille kasveille
- **Soveltaa** `class="plant"` yhteiseen kuvatyylittelyyn ja käyttäytymiseen
- **Sisältää** yksilöllisen `id="plant1"` yksilölliseen sijoitteluun ja JavaScript-vuorovaikutukseen
- **Tarjoaa** kuvailevan alt-tekstin ruudunlukijan saavutettavuuden vuoksi
Lisää nämä tyylit `style.css`-tiedostoosi:
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**Näiden tyylien erittely:**
- **Luo** suhteellisen sijoittelun kasvikontille sijoittelukontekstin luomiseksi
- **Asettaa** jokaisen kasvikontin korkeudeksi 13 %, jotta kaikki kasvit mahtuvat pystysuunnassa ilman vieritystä
- **Siirtää** kontteja hieman vasemmalle, jotta kasvit keskittyvät paremmin konttiensa sisällä
- **Mahdollistaa** kasvien responsiivisen skaalautumisen `max-width`- ja `max-height`-ominaisuuksilla
- **Käyttää** `z-index`-arvoa, jotta kasvit sijoittuvat muiden terrariumin elementtien yläpuolelle
- **Lisää** hienovaraisen hover-efektin CSS-siirtymillä paremman käyttäjäkokemuksen saavuttamiseksi
✅ **Kriittinen ajattelu**: Miksi tarvitsemme sekä `.plant-holder` että `.plant`-valitsimet? Mitä tapahtuisi, jos yrittäisimme käyttää vain yhtä?
> 💡 **Suunnittelumalli**: Kontti (`.plant-holder`) hallitsee asettelua ja sijoittelua, kun taas sisältö (`.plant`) hallitsee ulkonäköä ja skaalautuvuutta. Tämä erottelu tekee koodista helpommin ylläpidettävän ja joustavan.
## CSS-sijoittelun ymmärtäminen
CSS-sijoittelu on kuin näytelmän ohjaaja – ohjaat, missä jokainen näyttelijä seisoo ja miten he liikkuvat lavalla. Jotkut näyttelijät noudattavat normaalia muodostelmaa, kun taas toiset tarvitsevat erityistä sijoittelua dramaattisen vaikutuksen vuoksi.
Kun ymmärrät sijoittelun, monet asetteluun liittyvät haasteet muuttuvat hallittaviksi. Tarvitsetko navigointipalkin, joka pysyy ylhäällä käyttäjän vierittäessä? Sijoittelu hoitaa sen. Haluatko työkaluvihjeen, joka ilmestyy tiettyyn paikkaan? Se on myös sijoittelua.
### Viisi sijoitteluarvoa
```mermaid
quadrantChart
title CSS Positioning Strategy
x-axis Document Flow --> Removed from Flow
y-axis Static Position --> Precise Control
quadrant-1 Absolute
quadrant-2 Fixed
quadrant-3 Static
quadrant-4 Sticky
Static: [0.2, 0.2]
Relative: [0.3, 0.6]
Absolute: [0.8, 0.8]
Fixed: [0.9, 0.7]
Sticky: [0.5, 0.9]
```
| Sijoitteluarvo | Käyttäytyminen | Käyttötapaus |
|----------------|----------------|--------------|
| `static` | Oletusvirtaus, ei huomioi top/left/right/bottom | Normaali dokumenttiasettelu |
| `relative` | Sijoitettu suhteessa normaaliin sijaintiinsa | Pienet säädöt, sijoittelukontekstin luominen |
| `absolute` | Sijoitettu lähimpään sijoitettuun esivanhempaan | Tarkka sijoittelu, päällekkäisyydet |
| `fixed` | Sijoitettu suhteessa näkymään | Navigointipalkit, kelluvat elementit |
| `sticky` | Vaihtuu suhteellisen ja kiinteän välillä vierityksen mukaan | Otsikot, jotka pysyvät vieritettäessä |
### Sijoittelu terrariumissamme
Terrariumissamme käytetään strategista yhdistelmää sijoittelutyyppejä halutun asettelun luomiseksi:
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**Sijoittelustrategian ymmärtäminen:**
- **Absoluuttiset kontit** poistetaan normaalista dokumenttivirrasta ja kiinnitetään näytön reunoille
- **Suhteelliset kasvikontit** luovat sijoittelukontekstin pysyen samalla dokumenttiv
- Miten asettelu muuttuu, jos `.plant-holder` käyttää `absolute` sijasta `relative`?
- Mitä tapahtuu, kun vaihdat `.plant` suhteelliseen (`relative`) sijoitteluun?
### 🔄 **Pedagoginen tarkistus**
**CSS-sijoittelun hallinta**: Pysähdy tarkistamaan ymmärryksesi:
- ✅ Osaatko selittää, miksi kasvit tarvitsevat absoluuttista sijoittelua vedä ja pudota -toiminnossa?
- ✅ Ymmärrätkö, miten suhteelliset säiliöt luovat sijoittelukontekstin?
- ✅ Miksi sivusäiliöt käyttävät absoluuttista sijoittelua?
- ✅ Mitä tapahtuisi, jos poistaisit sijoittelumääritykset kokonaan?
**Yhteys todelliseen maailmaan**: Mieti, miten CSS-sijoittelu heijastaa todellista asettelua:
- **Static**: Kirjat hyllyssä (luonnollinen järjestys)
- **Relative**: Kirjan siirtäminen hieman mutta pitäen sen paikan
- **Absolute**: Kirjanmerkin asettaminen tarkalle sivunumerolle
- **Fixed**: Post-it-lappu, joka pysyy näkyvissä sivuja selatessa
## Terrariumin rakentaminen CSS:llä
Rakennamme nyt lasipurkin pelkästään CSS:llä – ilman kuvia tai grafiikkaohjelmistoa.
Realistisen lasin, varjojen ja syvyysefektien luominen sijoittelun ja läpinäkyvyyden avulla osoittaa CSS:n visuaaliset kyvyt. Tämä tekniikka muistuttaa, miten Bauhaus-liikkeen arkkitehdit käyttivät yksinkertaisia geometrisia muotoja luodakseen monimutkaisia, kauniita rakenteita. Kun ymmärrät nämä periaatteet, tunnistat CSS-tekniikat monien verkkosivustojen taustalla.
```mermaid
flowchart LR
A[Jar Top] --> E[Complete Terrarium]
B[Jar Walls] --> E
C[Dirt Layer] --> E
D[Jar Bottom] --> E
F[Glass Effects] --> E
A1["50% width
5% height
Top position"] --> A B1["60% width
80% height
Rounded corners
0.5 opacity"] --> B C1["60% width
5% height
Dark brown
Bottom layer"] --> C D1["50% width
1% height
Bottom position"] --> D F1["Subtle shadows
Transparency
Z-index layering"] --> F style E fill:#d1e1df,stroke:#3a241d style A fill:#e8f5e8 style B fill:#e8f5e8 style C fill:#8B4513 style D fill:#e8f5e8 ``` ### Lasipurkin osien luominen Rakennetaan terrariumpurkki pala kerrallaan. Jokainen osa käyttää absoluuttista sijoittelua ja prosenttipohjaista mitoitusta responsiivisen suunnittelun mahdollistamiseksi: ```css .jar-walls { height: 80%; width: 60%; background: #d1e1df; border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; opacity: 0.5; z-index: 1; box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1); } .jar-top { width: 50%; height: 5%; background: #d1e1df; position: absolute; bottom: 80.5%; left: 25%; opacity: 0.7; z-index: 1; border-radius: 0.5rem 0.5rem 0 0; } .jar-bottom { width: 50%; height: 1%; background: #d1e1df; position: absolute; bottom: 0; left: 25%; opacity: 0.7; border-radius: 0 0 0.5rem 0.5rem; } .dirt { width: 60%; height: 5%; background: #3a241d; position: absolute; border-radius: 0 0 1rem 1rem; bottom: 1%; left: 20%; opacity: 0.7; z-index: -1; } ``` **Terrariumin rakenteen ymmärtäminen:** - **Käyttää** prosenttipohjaisia mittoja responsiiviseen skaalaamiseen kaikilla näytön kokoilla - **Sijoittaa** elementit absoluuttisesti pinotakseen ja kohdistakseen ne tarkasti - **Soveltaa** erilaisia läpinäkyvyysarvoja lasin läpinäkyvyysefektin luomiseksi - **Toteuttaa** `z-index`-kerrostuksen, jotta kasvit näkyvät purkin sisällä - **Lisää** hienovaraisen varjostuksen ja viimeistellyn pyöristetyn reunan realistisemman ulkonäön saavuttamiseksi ### Responsiivinen suunnittelu prosenttien avulla Huomaa, että kaikki mitat käyttävät prosentteja kiinteiden pikseliarvojen sijaan: **Miksi tämä on tärkeää:** - **Varmistaa**, että terrarium skaalautuu suhteellisesti kaikilla näytön kokoilla - **Säilyttää** visuaaliset suhteet purkin osien välillä - **Tarjoaa** yhtenäisen kokemuksen mobiilipuhelimista suuriin työpöytänäyttöihin - **Mahdollistaa**, että suunnittelu mukautuu ilman visuaalisen asettelun rikkoutumista ### CSS-yksiköt käytännössä Käytämme `rem`-yksiköitä pyöristettyjen reunojen määrittämiseen, jotka skaalautuvat suhteessa juurikoon kokoon. Tämä luo saavutettavampia suunnitelmia, jotka kunnioittavat käyttäjän fonttiasetuksia. Lue lisää [CSS:n suhteellisista yksiköistä](https://www.w3.org/TR/css-values-3/#font-relative-lengths) virallisesta spesifikaatiosta. ✅ **Visuaalinen kokeilu**: Kokeile muuttaa näitä arvoja ja tarkkaile vaikutuksia: - Muuta purkin läpinäkyvyys 0.5:stä 0.8:aan – miten tämä vaikuttaa lasin ulkonäköön? - Säädä maan väriä `#3a241d`:stä `#8B4513`:een – mikä visuaalinen vaikutus tällä on? - Muuta maan `z-index` arvoksi 2 – mitä tapahtuu kerrostukselle? ### 🔄 **Pedagoginen tarkistus** **CSS:n visuaalisen suunnittelun ymmärtäminen**: Vahvista visuaalisen CSS:n hallintaasi: - ✅ Miten prosenttipohjaiset mitat luovat responsiivisen suunnittelun? - ✅ Miksi läpinäkyvyys luo lasin läpinäkyvyysefektin? - ✅ Mikä rooli `z-index`-arvolla on elementtien kerrostuksessa? - ✅ Miten pyöristettyjen reunojen arvot luovat purkin muodon? **Suunnitteluperiaate**: Huomaa, miten rakennamme monimutkaisia visuaaleja yksinkertaisista muodoista: 1. **Suorakulmiot** → **Pyöristetyt suorakulmiot** → **Purkin osat** 2. **Tasaiset värit** → **Läpinäkyvyys** → **Lasiefekti** 3. **Yksittäiset elementit** → **Kerrostettu koostumus** → **3D-ulkonäkö** --- ## GitHub Copilot Agent -haaste 🚀 Käytä Agent-tilaa suorittaaksesi seuraavan haasteen: **Kuvaus:** Luo CSS-animaatio, joka saa terrariumin kasvit heilumaan kevyesti edestakaisin, simuloiden luonnollista tuulen vaikutusta. Tämä auttaa sinua harjoittelemaan CSS-animaatioita, muunnoksia ja avainkehyksiä samalla kun parannat terrariumin visuaalista vetovoimaa. **Ohje:** Lisää CSS-avainkehysanimaatiot, jotka saavat terrariumin kasvit heilumaan kevyesti puolelta toiselle. Luo heilumisliike, joka kiertää jokaista kasvia hieman (2-3 astetta) vasemmalle ja oikealle 3-4 sekunnin ajan, ja sovella sitä `.plant`-luokkaan. Varmista, että animaatio toistuu loputtomasti ja sisältää easing-funktion luonnollista liikettä varten. Lue lisää [agent-tilasta](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) täällä. ## 🚀 Haaste: Lasin heijastusten lisääminen Valmis parantamaan terrariumiasi realistisilla lasin heijastuksilla? Tämä tekniikka lisää syvyyttä ja realismia suunnitteluun. Luot hienovaraisia korostuksia, jotka simuloivat, miten valo heijastuu lasipinnoilta. Tämä lähestymistapa on samanlainen kuin miten renessanssimaalari Jan van Eyck käytti valoa ja heijastusta saadakseen maalatun lasin näyttämään kolmiulotteiselta. Tässä on tavoitteenasi:  **Haasteesi:** - **Luo** hienovaraisia valkoisia tai vaaleanvärisiä soikeita muotoja lasin heijastuksille - **Sijoita** ne strategisesti purkin vasemmalle puolelle - **Sovella** sopivia läpinäkyvyys- ja sumeusvaikutuksia realistisen valon heijastuksen saavuttamiseksi - **Käytä** `border-radius`-ominaisuutta luodaksesi orgaanisia, kuplamaisia muotoja - **Kokeile** gradientteja tai varjostuksia lisärealismia varten ## Luentojälkeinen kysely [Luentojälkeinen kysely](https://ff-quizzes.netlify.app/web/quiz/18) ## Laajenna CSS-tietämystäsi CSS voi aluksi tuntua monimutkaiselta, mutta näiden ydinkonseptien ymmärtäminen tarjoaa vankan perustan edistyneemmille tekniikoille. **Seuraavat CSS-opiskelun alueesi:** - **Flexbox** - yksinkertaistaa elementtien kohdistamista ja jakamista - **CSS Grid** - tarjoaa tehokkaita työkaluja monimutkaisten asettelujen luomiseen - **CSS-muuttujat** - vähentää toistoa ja parantaa ylläpidettävyyttä - **Responsiivinen suunnittelu** - varmistaa, että sivustot toimivat hyvin eri näytön kokoilla ### Interaktiiviset oppimisresurssit Harjoittele näitä konsepteja näiden mukaansatempaavien, käytännönläheisten pelien avulla: - 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Hallitse Flexbox hauskojen haasteiden avulla - 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - Opettele CSS Grid viljelemällä virtuaalisia porkkanoita - 🎯 [CSS Battle](https://cssbattle.dev/) - Testaa CSS-taitojasi koodaushaasteilla ### Lisäopiskelu CSS:n perusteiden kattavaan oppimiseen suorita tämä Microsoft Learn -moduuli: [Muotoile HTML-sovelluksesi CSS:llä](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon) ### ⚡ **Mitä voit tehdä seuraavan 5 minuutin aikana** - [ ] Avaa DevTools ja tarkastele minkä tahansa verkkosivuston CSS-tyylejä Elements-paneelissa - [ ] Luo yksinkertainen CSS-tiedosto ja linkitä se HTML-sivuun - [ ] Kokeile värien muuttamista eri menetelmillä: heksadesimaali, RGB ja nimetty väri - [ ] Harjoittele laatikkomallia lisäämällä paddingia ja marginaalia div-elementtiin ### 🎯 **Mitä voit saavuttaa tämän tunnin aikana** - [ ] Suorita luennon jälkeinen kysely ja kertaa CSS:n perusteet - [ ] Muotoile HTML-sivusi fonteilla, väreillä ja väleillä - [ ] Luo yksinkertainen asettelu flexboxilla tai gridillä - [ ] Kokeile CSS-siirtymiä sujuvien efektien luomiseksi - [ ] Harjoittele responsiivista suunnittelua media-kyselyiden avulla ### 📅 **Viikon mittainen CSS-seikkailusi** - [ ] Suorita terrariumin tyylittelytehtävä luovalla otteella - [ ] Hallitse CSS Grid luomalla valokuvagalleria-asettelu - [ ] Opettele CSS-animaatioita elävöittääksesi suunnitelmiasi - [ ] Tutustu CSS-esiprosessoreihin, kuten Sass tai Less - [ ] Tutki suunnitteluperiaatteita ja sovella niitä CSS:ään - [ ] Analysoi ja luo uudelleen mielenkiintoisia suunnitelmia, joita löydät verkosta ### 🌟 **Kuukauden mittainen suunnittelun hallinta** - [ ] Rakenna täydellinen responsiivinen verkkosivuston suunnittelujärjestelmä - [ ] Opettele CSS-in-JS tai hyötylähtöisiä kehyksiä, kuten Tailwind - [ ] Osallistu avoimen lähdekoodin projekteihin CSS-parannuksilla - [ ] Hallitse edistyneitä CSS-konsepteja, kuten CSS-mukautettuja ominaisuuksia ja sisältöä - [ ] Luo uudelleenkäytettäviä komponenttikirjastoja modulaarisella CSS:llä - [ ] Mentoroida muita CSS:n oppimisessa ja jakaa suunnittelutietämystä ## 🎯 CSS-osaamisen aikajana ```mermaid timeline title CSS Learning Progression section Foundation (10 minutes) File Connection: Link CSS to HTML : Understand cascade rules : Learn inheritance basics section Selectors (15 minutes) Targeting Elements: Element selectors : Class patterns : ID specificity : Combinators section Box Model (20 minutes) Layout Fundamentals: Margin and padding : Border properties : Content sizing : Box-sizing behavior section Positioning (25 minutes) Element Placement: Static vs relative : Absolute positioning : Z-index layering : Responsive units section Visual Design (30 minutes) Styling Mastery: Colors and opacity : Shadows and effects : Transitions : Transform properties section Responsive Design (45 minutes) Multi-Device Support: Media queries : Flexible layouts : Mobile-first approach : Viewport optimization section Advanced Techniques (1 week) Modern CSS: Flexbox layouts : CSS Grid systems : Custom properties : Animation keyframes section Professional Skills (1 month) CSS Architecture: Component patterns : Maintainable code : Performance optimization : Cross-browser compatibility ``` ### 🛠️ CSS-työkalupakin yhteenveto Tämän oppitunnin jälkeen sinulla on: - **Kaskadin ymmärrys**: Miten tyylit periytyvät ja ohittavat toisensa - **Valitsijoiden hallinta**: Tarkka kohdistaminen elementteihin, luokkiin ja ID:ihin - **Sijoittelutaidot**: Strateginen elementtien sijoittaminen ja kerrostaminen - **Visuaalinen suunnittelu**: Lasiefektien, varjojen ja läpinäkyvyyden luominen - **Responsiiviset tekniikat**: Prosenttipohjaiset asettelut, jotka mukautuvat mihin tahansa näyttöön - **Koodin organisointi**: Siisti, ylläpidettävä CSS-rakenne - **Modernit käytännöt**: Suhteellisten yksiköiden ja saavutettavien suunnittelumallien käyttö **Seuraavat askeleet**: Terrariumillasi on nyt sekä rakenne (HTML) että tyyli (CSS). Viimeinen oppitunti lisää interaktiivisuutta JavaScriptillä! ## Tehtävä [CSS Refactoring](assignment.md) --- **Vastuuvapauslauseke**: Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
5% height
Top position"] --> A B1["60% width
80% height
Rounded corners
0.5 opacity"] --> B C1["60% width
5% height
Dark brown
Bottom layer"] --> C D1["50% width
1% height
Bottom position"] --> D F1["Subtle shadows
Transparency
Z-index layering"] --> F style E fill:#d1e1df,stroke:#3a241d style A fill:#e8f5e8 style B fill:#e8f5e8 style C fill:#8B4513 style D fill:#e8f5e8 ``` ### Lasipurkin osien luominen Rakennetaan terrariumpurkki pala kerrallaan. Jokainen osa käyttää absoluuttista sijoittelua ja prosenttipohjaista mitoitusta responsiivisen suunnittelun mahdollistamiseksi: ```css .jar-walls { height: 80%; width: 60%; background: #d1e1df; border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; opacity: 0.5; z-index: 1; box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1); } .jar-top { width: 50%; height: 5%; background: #d1e1df; position: absolute; bottom: 80.5%; left: 25%; opacity: 0.7; z-index: 1; border-radius: 0.5rem 0.5rem 0 0; } .jar-bottom { width: 50%; height: 1%; background: #d1e1df; position: absolute; bottom: 0; left: 25%; opacity: 0.7; border-radius: 0 0 0.5rem 0.5rem; } .dirt { width: 60%; height: 5%; background: #3a241d; position: absolute; border-radius: 0 0 1rem 1rem; bottom: 1%; left: 20%; opacity: 0.7; z-index: -1; } ``` **Terrariumin rakenteen ymmärtäminen:** - **Käyttää** prosenttipohjaisia mittoja responsiiviseen skaalaamiseen kaikilla näytön kokoilla - **Sijoittaa** elementit absoluuttisesti pinotakseen ja kohdistakseen ne tarkasti - **Soveltaa** erilaisia läpinäkyvyysarvoja lasin läpinäkyvyysefektin luomiseksi - **Toteuttaa** `z-index`-kerrostuksen, jotta kasvit näkyvät purkin sisällä - **Lisää** hienovaraisen varjostuksen ja viimeistellyn pyöristetyn reunan realistisemman ulkonäön saavuttamiseksi ### Responsiivinen suunnittelu prosenttien avulla Huomaa, että kaikki mitat käyttävät prosentteja kiinteiden pikseliarvojen sijaan: **Miksi tämä on tärkeää:** - **Varmistaa**, että terrarium skaalautuu suhteellisesti kaikilla näytön kokoilla - **Säilyttää** visuaaliset suhteet purkin osien välillä - **Tarjoaa** yhtenäisen kokemuksen mobiilipuhelimista suuriin työpöytänäyttöihin - **Mahdollistaa**, että suunnittelu mukautuu ilman visuaalisen asettelun rikkoutumista ### CSS-yksiköt käytännössä Käytämme `rem`-yksiköitä pyöristettyjen reunojen määrittämiseen, jotka skaalautuvat suhteessa juurikoon kokoon. Tämä luo saavutettavampia suunnitelmia, jotka kunnioittavat käyttäjän fonttiasetuksia. Lue lisää [CSS:n suhteellisista yksiköistä](https://www.w3.org/TR/css-values-3/#font-relative-lengths) virallisesta spesifikaatiosta. ✅ **Visuaalinen kokeilu**: Kokeile muuttaa näitä arvoja ja tarkkaile vaikutuksia: - Muuta purkin läpinäkyvyys 0.5:stä 0.8:aan – miten tämä vaikuttaa lasin ulkonäköön? - Säädä maan väriä `#3a241d`:stä `#8B4513`:een – mikä visuaalinen vaikutus tällä on? - Muuta maan `z-index` arvoksi 2 – mitä tapahtuu kerrostukselle? ### 🔄 **Pedagoginen tarkistus** **CSS:n visuaalisen suunnittelun ymmärtäminen**: Vahvista visuaalisen CSS:n hallintaasi: - ✅ Miten prosenttipohjaiset mitat luovat responsiivisen suunnittelun? - ✅ Miksi läpinäkyvyys luo lasin läpinäkyvyysefektin? - ✅ Mikä rooli `z-index`-arvolla on elementtien kerrostuksessa? - ✅ Miten pyöristettyjen reunojen arvot luovat purkin muodon? **Suunnitteluperiaate**: Huomaa, miten rakennamme monimutkaisia visuaaleja yksinkertaisista muodoista: 1. **Suorakulmiot** → **Pyöristetyt suorakulmiot** → **Purkin osat** 2. **Tasaiset värit** → **Läpinäkyvyys** → **Lasiefekti** 3. **Yksittäiset elementit** → **Kerrostettu koostumus** → **3D-ulkonäkö** --- ## GitHub Copilot Agent -haaste 🚀 Käytä Agent-tilaa suorittaaksesi seuraavan haasteen: **Kuvaus:** Luo CSS-animaatio, joka saa terrariumin kasvit heilumaan kevyesti edestakaisin, simuloiden luonnollista tuulen vaikutusta. Tämä auttaa sinua harjoittelemaan CSS-animaatioita, muunnoksia ja avainkehyksiä samalla kun parannat terrariumin visuaalista vetovoimaa. **Ohje:** Lisää CSS-avainkehysanimaatiot, jotka saavat terrariumin kasvit heilumaan kevyesti puolelta toiselle. Luo heilumisliike, joka kiertää jokaista kasvia hieman (2-3 astetta) vasemmalle ja oikealle 3-4 sekunnin ajan, ja sovella sitä `.plant`-luokkaan. Varmista, että animaatio toistuu loputtomasti ja sisältää easing-funktion luonnollista liikettä varten. Lue lisää [agent-tilasta](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) täällä. ## 🚀 Haaste: Lasin heijastusten lisääminen Valmis parantamaan terrariumiasi realistisilla lasin heijastuksilla? Tämä tekniikka lisää syvyyttä ja realismia suunnitteluun. Luot hienovaraisia korostuksia, jotka simuloivat, miten valo heijastuu lasipinnoilta. Tämä lähestymistapa on samanlainen kuin miten renessanssimaalari Jan van Eyck käytti valoa ja heijastusta saadakseen maalatun lasin näyttämään kolmiulotteiselta. Tässä on tavoitteenasi:  **Haasteesi:** - **Luo** hienovaraisia valkoisia tai vaaleanvärisiä soikeita muotoja lasin heijastuksille - **Sijoita** ne strategisesti purkin vasemmalle puolelle - **Sovella** sopivia läpinäkyvyys- ja sumeusvaikutuksia realistisen valon heijastuksen saavuttamiseksi - **Käytä** `border-radius`-ominaisuutta luodaksesi orgaanisia, kuplamaisia muotoja - **Kokeile** gradientteja tai varjostuksia lisärealismia varten ## Luentojälkeinen kysely [Luentojälkeinen kysely](https://ff-quizzes.netlify.app/web/quiz/18) ## Laajenna CSS-tietämystäsi CSS voi aluksi tuntua monimutkaiselta, mutta näiden ydinkonseptien ymmärtäminen tarjoaa vankan perustan edistyneemmille tekniikoille. **Seuraavat CSS-opiskelun alueesi:** - **Flexbox** - yksinkertaistaa elementtien kohdistamista ja jakamista - **CSS Grid** - tarjoaa tehokkaita työkaluja monimutkaisten asettelujen luomiseen - **CSS-muuttujat** - vähentää toistoa ja parantaa ylläpidettävyyttä - **Responsiivinen suunnittelu** - varmistaa, että sivustot toimivat hyvin eri näytön kokoilla ### Interaktiiviset oppimisresurssit Harjoittele näitä konsepteja näiden mukaansatempaavien, käytännönläheisten pelien avulla: - 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Hallitse Flexbox hauskojen haasteiden avulla - 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - Opettele CSS Grid viljelemällä virtuaalisia porkkanoita - 🎯 [CSS Battle](https://cssbattle.dev/) - Testaa CSS-taitojasi koodaushaasteilla ### Lisäopiskelu CSS:n perusteiden kattavaan oppimiseen suorita tämä Microsoft Learn -moduuli: [Muotoile HTML-sovelluksesi CSS:llä](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon) ### ⚡ **Mitä voit tehdä seuraavan 5 minuutin aikana** - [ ] Avaa DevTools ja tarkastele minkä tahansa verkkosivuston CSS-tyylejä Elements-paneelissa - [ ] Luo yksinkertainen CSS-tiedosto ja linkitä se HTML-sivuun - [ ] Kokeile värien muuttamista eri menetelmillä: heksadesimaali, RGB ja nimetty väri - [ ] Harjoittele laatikkomallia lisäämällä paddingia ja marginaalia div-elementtiin ### 🎯 **Mitä voit saavuttaa tämän tunnin aikana** - [ ] Suorita luennon jälkeinen kysely ja kertaa CSS:n perusteet - [ ] Muotoile HTML-sivusi fonteilla, väreillä ja väleillä - [ ] Luo yksinkertainen asettelu flexboxilla tai gridillä - [ ] Kokeile CSS-siirtymiä sujuvien efektien luomiseksi - [ ] Harjoittele responsiivista suunnittelua media-kyselyiden avulla ### 📅 **Viikon mittainen CSS-seikkailusi** - [ ] Suorita terrariumin tyylittelytehtävä luovalla otteella - [ ] Hallitse CSS Grid luomalla valokuvagalleria-asettelu - [ ] Opettele CSS-animaatioita elävöittääksesi suunnitelmiasi - [ ] Tutustu CSS-esiprosessoreihin, kuten Sass tai Less - [ ] Tutki suunnitteluperiaatteita ja sovella niitä CSS:ään - [ ] Analysoi ja luo uudelleen mielenkiintoisia suunnitelmia, joita löydät verkosta ### 🌟 **Kuukauden mittainen suunnittelun hallinta** - [ ] Rakenna täydellinen responsiivinen verkkosivuston suunnittelujärjestelmä - [ ] Opettele CSS-in-JS tai hyötylähtöisiä kehyksiä, kuten Tailwind - [ ] Osallistu avoimen lähdekoodin projekteihin CSS-parannuksilla - [ ] Hallitse edistyneitä CSS-konsepteja, kuten CSS-mukautettuja ominaisuuksia ja sisältöä - [ ] Luo uudelleenkäytettäviä komponenttikirjastoja modulaarisella CSS:llä - [ ] Mentoroida muita CSS:n oppimisessa ja jakaa suunnittelutietämystä ## 🎯 CSS-osaamisen aikajana ```mermaid timeline title CSS Learning Progression section Foundation (10 minutes) File Connection: Link CSS to HTML : Understand cascade rules : Learn inheritance basics section Selectors (15 minutes) Targeting Elements: Element selectors : Class patterns : ID specificity : Combinators section Box Model (20 minutes) Layout Fundamentals: Margin and padding : Border properties : Content sizing : Box-sizing behavior section Positioning (25 minutes) Element Placement: Static vs relative : Absolute positioning : Z-index layering : Responsive units section Visual Design (30 minutes) Styling Mastery: Colors and opacity : Shadows and effects : Transitions : Transform properties section Responsive Design (45 minutes) Multi-Device Support: Media queries : Flexible layouts : Mobile-first approach : Viewport optimization section Advanced Techniques (1 week) Modern CSS: Flexbox layouts : CSS Grid systems : Custom properties : Animation keyframes section Professional Skills (1 month) CSS Architecture: Component patterns : Maintainable code : Performance optimization : Cross-browser compatibility ``` ### 🛠️ CSS-työkalupakin yhteenveto Tämän oppitunnin jälkeen sinulla on: - **Kaskadin ymmärrys**: Miten tyylit periytyvät ja ohittavat toisensa - **Valitsijoiden hallinta**: Tarkka kohdistaminen elementteihin, luokkiin ja ID:ihin - **Sijoittelutaidot**: Strateginen elementtien sijoittaminen ja kerrostaminen - **Visuaalinen suunnittelu**: Lasiefektien, varjojen ja läpinäkyvyyden luominen - **Responsiiviset tekniikat**: Prosenttipohjaiset asettelut, jotka mukautuvat mihin tahansa näyttöön - **Koodin organisointi**: Siisti, ylläpidettävä CSS-rakenne - **Modernit käytännöt**: Suhteellisten yksiköiden ja saavutettavien suunnittelumallien käyttö **Seuraavat askeleet**: Terrariumillasi on nyt sekä rakenne (HTML) että tyyli (CSS). Viimeinen oppitunti lisää interaktiivisuutta JavaScriptillä! ## Tehtävä [CSS Refactoring](assignment.md) --- **Vastuuvapauslauseke**: Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.