К содержанию

HTML:n ja CSS:n alkeisopas

Yksinkertainen opas HTML- ja CSS-verkkosivujen luomiseen aloittelijoille, jossa on yksityiskohtaista teoriaa ja tehtäviä.

Valitsimet

HTML-tagien sukulaissuhteet

CSS-ominaisuuksien periytyminen

Valitsijaryhmittely CSS:ssä

Yleiset ominaisuudet valitsijoiden ryhmittelyssä CSS:ssä

CSS:n jälkeläisvalitsimet

Lastenselektori CSS:ssä

Elementtien luokat CSS:ssä

Span-elementti tekstin osien muotoiluun HTML:ssä

HTML-div-tagi elementtien ryhmittelyyn

CSS-luokkien ryhmittely

Tagi annetulla luokalla CSS:ssä

Jälkeläisvalitsija ja luokat CSS:ssä

Monimutkaiset jälkeläisvalitsijan ja luokkien yhdistelmät CSS:ssä

Aloittelijan virhe jälkeläisvalitsimessa

Elementti, jolla on useita CSS-luokkia

Elementin valinta yksilöllisellä id:llä CSS:ssä

Id-valitsin ja CSS-luokat

ID:n käyttö CSS:ssä

Elementin valinta useilla luokilla CSS:ssä

Useita valitsimia peräkkäin CSS:ssä

Virhe useiden CSS-valitsimien käytössä

Monimutkaisten CSS-valitsimien ryhmittely

Virhe monimutkaisten CSS-valitsimien ryhmittelyssä

CSS-valitsinten yhdistelmien harjoittelu

CSS-valitsijoiden prioriteetti

Huomautus CSS-ominaisuuksien ristiriitasta

Spesifisyyssäännöt CSS:ssä

CSS:n jälkeläisvalitsijoiden prioriteetti

Vierekkäinen valitsin CSS:ssä

Sivuselektori CSS:ssä

Yleinen valitsin CSS:ssä

Attribuuttivalitsimet CSS:ssä

Linkkien tilat CSS:ssä

CSS-linkkien tilajärjestyksen vivahteet

Link- ja visited-linkkien tilat CSS:ssä

Linkkien tilojen yleinen käyttö CSS:ssä

Monimutkaiset valitsimet linkkien tiloilla CSS:ssä

Linkki luokalla CSS:ssä

CSS:n loppuelementtien valinta

Elementtien sijainnin perusteella valinta CSS:ssä

Yksittäisen lapsen valinta CSS:ssä

Tyhjien elementtien valinta CSS:ssä

Valinta sijainnin ja elementtityypin mukaan CSS:ssä

Negointiselektori CSS:ssä

Sisustus

Taustavärin asettaminen CSS:llä

CSS:n rajojen perusteet

Yhtenäinen reunus CSS:ssä

Pisteellinen reunus CSS:ssä

Katkoviiva reunuksen tyylinä CSS:ssä

Kupera reuna CSS:ssä

Kaksoisreunus CSS:ssä

CSS:n rajan omaisuuslyhenne

Yksittäisten sivujen reunukset CSS:ssä

Lohkon reunusten pyöristäminen CSS:llä

Taustan reunojen pyöristäminen CSS:ssä

Ympyrän luominen CSS:llä

Eri pyöristykset eri kulmiin CSS

Neljä CSS-pyöristysarvoa eri kulmille

Kaksi pyöristysarvoa eri kulmiille CSS

Kolme pyöristysarvoa eri kulmille CSS:ssä

Pyöristetyt kulmat prosentteina CSS:ssä

Ympyrän luominen prosentuaalisella pyöristyksellä CSS:ssä

Taustakuva CSS:ssä

Taustakuvan toistaminen CSS:ssä

Muut CSS:n taustan ominaisuudet

Luettelon ul-merkkien käsittely CSS:ssä

Neliömäiset listamerkit ul-listoille CSS:ssä

Luettelon merkitsimet ul ympyröinä CSS:ssä

Luettelomerkkien käsittely ul-luetteloissa CSS:llä

Listamerkkien poistaminen ul-listoista CSS:llä

Luettelomerkkien ol käsittely CSS:ssä

Rivinumeroiden roomalaiset numerot luetteloille ol CSS:ssä

Pääkirjaimiset roomalaiset numerot ol-listoille CSS:ssä

Pienet latinalaiset kirjaimet ol-luetteloille CSS:ssä

ISO latinalaiset aakkoset listoille ol CSS:ssä

Rivikkäiset kreikkalaiset kirjaimet ol-listoille CSS:ssä

Numerot etunollalla ol-luetteloille CSS:ssä

Lohkomalli

Marginaalien käsittely CSS:ssä

Marginaalit eri sivuille CSS:ssä

Useita arvoja margin-ominaisuudessa CSS:ssä

Neljä arvoa margin-ominaisuudessa CSS:ssä

Kaksi arvoa margin-ominaisuudessa CSS:ssä

Kolme arvoa margin-ominaisuudessa CSS:ssä

CSS:n padding-marginaalien käsittely

Sisenäisten marginaalien padding eri puolille CSS:ssä

Useita arvoja padding-ominaisuudessa CSS:ssä

Työstäminen CSS-padding-sisennösten kanssa

Reunuksen vaikutus elementtien laajenemiseen CSS:ssä

Paddingin ja reunuksen vaikutus elementtien laajenemiseen CSS:ssä

Elementtien laajenemisen peruuttaminen CSS:ssä

CSS:n lohkoelementtien erityispiirteet

Lohkoelementin leveys ja korkeus CSS:ssä

Lohkomaisen elementin leveys CSS:ssä

Lohkoelementin korkeus CSS:ssä

Tyhjän lohkoelementin korkeus CSS:ssä

Useita lohkoelementtejä vierekkäin CSS:ssä

CSS:n rivielementtien erityispiirteet

Rivielementin leveys ja korkeus CSS:ssä

Useita rivissä olevia inline-elementtejä CSS:ssä

Rivinsisäisten elementtien välit CSS:ssä

HTML-tägien lohkomallin määrittely

Display-ominaisuuden käyttö CSS:ssä

CSS:n inline-block-elementtien erityispiirteet

Rivimuotoisen lohkoelementin leveys ja korkeus CSS:ssä

Rivimaisesti lohkoelementin leveys CSS:ssä

Rivinsisäisen lohkoelementin korkeus CSS:ssä

Useita rivisisäisiä lohkoelementtejä vierekkäin CSS:ssä

Lohkoelementtien tasaus CSS:ssä

Lohkoelementin tasaus vasemmalla marginaalilla CSS:ssä

Lohkomuotoisen elementin tasaus oikealla marginaalilla CSS:ssä

Rivielementtien tasaus CSS:ssä

Rivielementtien keskittäminen CSS:llä

Usean rivitetyn elementin keskittäminen

Rivielementtien oikeaan reunaan kohdistaminen CSS:ssä

Rivinsisäisten lohkoelementtien tasaus CSS:ssä

Rivimäisten lohkoelementtien keskittäminen CSS:llä

CSS:ssä inline-block-elementtien oikean reunan tasaus

Flex-elementit CSS:ssä

Flex-elementtien vanhemman korkeus CSS:ssä

Flex-elementtien vanhemman leveys CSS:ssä

Rivissä lohkomainen flex-elementtien yläelementti CSS:ssä

Padding-marginaalien vanhempien flex-elementtien CSS:ssä

Marginaalit CSS:n jälkeläisille

Flex-elementtien tasaus CSS:ssä

Flex-elementtien keskittäminen CSS:llä

Flex-elementtien tasaus CSS:ssä vanhempielementin suhteen

Flex-elementtien tasaus vanhempaelementin kanssa marginaaleilla

Flex-elementtien tasaus vanhempaelementtiin yhtäläisin välein

Sijoittelu

Elementtien absoluuttinen sijoittelu CSS:ssä

Elementtien suhteellinen sijoittelu CSS:ssä

Suhteellinen positiointi vanhempaan nähden CSS:ssä

Sijoittaminen absoluuttiseen vanhempaan CSS:ssä

Absoluuttinen positioiminen ilman koordinaatteja CSS:ssä

Keskeytys absoluuttisen positsioinnin avulla CSS:ssä

Negatiiviset arvot asemointia CSS:ssä

Kiinteä sijainti CSS:ssä

Kokonaisen näytön levyinen lohko CSS:llä

Elementtien asettelu Z-akselilla CSS:ssä

Z-akselin suunnassa tapahtuvan elementtien limittymisen säätely CSS:ssä

Z-indeksin negatiivisen arvon käytön vivahteet CSS:ssä

Floatit

CSS-ominaisuuden float esittely

Kelluvien elementtien tunkeutuminen tagien läpi CSS:ssä

Float- ja margin-ominaisuuksien yhdistäminen CSS:ssä

Float- ja padding-ominaisuuksien yhdistäminen CSS:ssä

Kellaavat elementit tagien alla CSS:ssä

Float-elementtien vaikutus vanhempaan CSS:ssä

Float-elementtien vanhemman korkeus CSS:ssä

Teksti float-elementtien vanhemmassa CSS:ssä

Kellunta CSS:ssä

Kelluvien elementtien peruutus clear-ominaisuudella CSS:ssä

Erillinen div clearfix:llä CSS:ssä

Clearfix ja vanhemman korkeus CSS:ssä

CSS:n float-ominaisuus lohkoille

Float-ominaisuus ja useita lohkoja CSS:ssä

Float-ominaisuus ja tekstiton vanhempi CSS:ssä

Flexbox

Flex-elementtien sijoittaminen riviin tai sarakkeeseen CSS:ssä

Flex-elementtien sijoittaminen käännetyssä rivissä CSS:ssä

Flex-elementtien sijoittaminen sarakkeeseen CSS:ssä

Flex-elementtien sarakkeen kääntäminen CSS:ssä

Pää- ja poikittaisakselit CSS-flexboxeissa

Flex-elementien tasaus pääakselilla CSS:ssä

Flex-lohkojen tasaus poikittaisakselilla CSS:ssä

align-items-ominaisuuden center-arvon merkitys CSS:ssä

Keskitäminen ilman korkeutta CSS:ssä

Eri korkuisien elementtien keskittäminen CSS:llä

align-items-ominaisuuden stretch-arvon merkitys CSS:ssä

Harjoitus CSS-akselin suuntausten asetteluun

Yksittäisen elementin kohdistus CSS:n flex-mallissa

Flex-lohkojen järjestys CSS:ssä

Gridit

CSS Grid -johdanto

Radat ja linjat CSS Gridissä

Gridien näyttö selaimen debuggerissa

Sarakkeiden lukumäärä ja leveys CSS-gridissä

Fr-yksikkö CSS Gridissä

Murtolukuyksiköt fr CSS-gridissä

Pikselit ja fr-yksiköt CSS-gridissä

Prosentit ja fr-yksiköt CSS-gridissä

CSS-gridien repeat-funktio

Auto-arvon merkitys CSS-gridissä

Auto-fill-arvon merkitys CSS-gridissa

Minmax-funktio CSS-gridissä

Auto-fit-arvon merkitys CSS-gridissä

Rivien määrä ja leveys CSS-gridissä

Lyhenne riveille ja sarakkeille CSS-gridissä

Rivien yhdistäminen CSS-gridissä

Sarakkeiden yhdistäminen CSS-gridissä

Rivien ja sarakkeiden yhdistelmien yhdistelmät CSS-gridissä

Sarakkeiden limittyminen CSS-gridissä

Sarakkeiden välinen etäisyys CSS-gridissä

Rivien välinen etäisyys CSS-gridissä

Sarakkeiden ja rivien välimatkat CSS-gridissä

Laatoitus CSS Gridissä

Asettelut

Valikon luominen CSS:llä

Yksinkertaiset yksisarakkeiset verkkosivujen asettelut CSS:ssä

Useita wrapper-elementtejä käyttävä layout-kaavio CSS:ssä

Sivuston rakenteelliset lohkot HTML:ssä

Kaksisarakkeisen verkkosivun asettelun kaavio CSS:ssä

Kolmen sarakkeen verkkosivun asettelukaavio CSS:llä

Sivuston asettelun elementtien erikoistagit HTML:ssä

Pääasialliset layout-tagit HTML:ssä

Osio-elementti HTML:ssä

HTML- ja CSS-asetteluiden harjoittelu