TESTING AREA for teachers - real service at plus.tuni.fi
CSS: SWOT¶
Harjoitusohjeet¶
Lataa ja pura harjoituspohja paikalliseen hakemistoosi:
Toteuta tämän jälkeen seuraavat tyylimääritykset:
Luo CSS-tiedosto nimeltä style.css. Tiedoston tulee sijaita samassa hakemistossa kuin h3.html.
Lisää tarvittavat luokkamäärittelyt tiedostoon style.css. Muokkaa body-elementtiä ja div-elementtejä siten, että ne muodostavat neliulotteisen ruudukon täsmälleen kuvan mukaisesti.
Kaikkien div-elementtien tulee käyttää seuraavaa reunamääritystä:
border: 1px solid blue;
Huom: Jotta reunukset eivät kasvata elementtien ulkoista kokoa ja riko asettelua, käytä box-sizing: border-box; -määritystä. Tätä samaa reunamääritystä käytetään myös automaattisissa testeissä.
Jokaisen neljästä div-elementistä (A, B, C, D) tulee täyttää täsmälleen yksi neljäsosa (1/4) näkymäalueesta (100vw × 100vh).
Leveyksiä ja korkeuksia määritettäessä tulee käyttää viewport-yksiköitä:
vw 1 % näkymäalueen leveydestä
vh 1 % näkymäalueen korkeudesta
W3C määrittelee viewportin seuraavasti:
Viewport on verkkosivun käyttäjälle näkyvä alue. Sen koko riippuu käytetystä laitteesta — esimerkiksi matkapuhelimella näkymäalue on pienempi kuin tietokoneen näytöllä.
Lisätietoja: W3Schools: CSS Viewport Units.
Attention
ÄLÄ muokkaa h3.html-tiedostoa
A+ esittää tässä kohdassa tehtävän palautuslomakkeen.