XHTML&CSS: Kasti mudel

xhtmlLiigume html-st natuke eemale ja keskendume css-le. Selleks, et aru saada järgnevast teemast, kujutage ette järgnevat: igal veebilehel elemendil, olgu selleks pilt või tekst, on oma kast, kus ta mugavalt pesitseb.Css-i abil saab muuta iga sellise elemendi kasti suurust, selle piirjoone paksust ja muid parameetreid. Teil võib tekkida peas küsimus “Milleks on üldse vaja sellega tegeleda?”. Kasti elementide kasutamine on vajalik veebilehe elementide paigutamiseks ning seega on see väga tähtis teema veebilehe ehitamise õppimisel.

Antud teema on veidi keerukas, kuid ma üritan selgitada seda nii hästi kui võimalik. Iga veebilehe element koosneb 4 osast: elemendi sisust (content), elemendi piirjoontest (border), elemendi sisu ja piirjoone vahelisest alast (padding) ning alast väljaspool elemendi piirjoont (margin).

Padding

paddingNagu ma juba varem mainisin, siis xhtml-s sõna “padding” tähendab seda ala, mis on elemendi piirjoone ja elemendi sisu vahel. Me võime näha seda ala, kui teksti puhul tõmbame hiirekursoriga üle teksti, ning teksti ümber tekib värviline taust. See värviline ala ongi “padding”.

padding2Selle ala suuruste muutmiseks on kaks võimalust: esimeseks võimaluseks on muuta kogu elemendi ümber oleva ala suurust, lisades stiililehte elemendi märgend ja looksulgude vahel omadus “padding” ja andes selle väärtus pikslites. Sellisel juhul suureneb elemendi ala suurus kõikides suundades. Kuid selline variant ei pruugi alati sobida. Kui me tahame suurendada ala ainult mõnes kindlas suunas, saab kasutada järgmisi omadusi:

  • padding3padding-top: ala suureneb elemendi sisust üleval pool
  • padding-bottom: ala suureneb elemendi sisust allpool
  • padding-left: ala suureneb elemendist sisust vasakul pool
  • padding-right: ala suureneb elemendi sisust paremal pool

Elemendi piir

borderElemendi piiri kasutatakse rohkem kujunduses kui elementide paigutuses, kuid see omadus kehtib iga veebilehe elemendi puhul ja see on igal elemendil olemas, kuigi ta ei ole alati silmaga nähtav. Selleks, et muuta elemendi piirjoon nähtavaks ja ilusaks, tuleb stiililehes ühele või teisele elemendile märgendi omaduseks lisada “border”. Piirjoonel saab olla kolm parameetrit:

  • border2border-color: määrab piirjoone värvuse
  • border-width: määrab piirjoone paksuse
  • border-style: määrab piirjoone kuju, struktuuri jne. (neid väärtusi saab googeldada).

Muide, neid omadusi ei pea iga kord välja kirjutama. Piisab vaid looksulgude vahel olevast sõnast “border” ning kooloni järel kirjutada piirjoone värvuse, paksuse ja stiili. Näiteks: “border: red 2px solid;”

Margin

margin“Margin” on ala väljaspool igat elementi, mis ei lase teistel elementidel enda ligi. Kõige silmapaistvam näide sellisest tõkkest esineb paragrahvil. Kaks paragrahvi on veebilehel alati üksteisest kindlal kaugusel ja nad ei puutu kunagi kokku, nad on alati üksteisest kindlal kaugusel. Kuid seda elementide vahelist kaugust üksteisest saab muuta css-i omadusega “margin”.  Nagu ka “padding”-u puhul saab selle ala suurust muuta kahel viisil: muuta elementide vahelist kaugust kõigis suundades või siis ainult ühes kindlas suunas:

  • margin2margin-top: suureneb vahemaa elemendist üleval pool
  • margin-bottom: suureneb vahemaa elemendist allpool
  • margin-left: suureneb vahemaa elemendist vasakul pool
  • margin-right: suureneb vahemaa elemendist paremal pool

Niisiis, “margin”, “padding” ja “border” on olulised elemendid veebilehe elementide paigutamisel. Loodan, et suutsin antud teemat piisavalt arusaadavalt selgitada.

Advertisements

Kirjuta kommentaar

Täida nõutavad väljad või kliki ikoonile, et sisse logida:

WordPress.com Logo

Sa kommenteerid kasutades oma WordPress.com kontot. Logi välja / Muuda )

Twitter picture

Sa kommenteerid kasutades oma Twitter kontot. Logi välja / Muuda )

Facebook photo

Sa kommenteerid kasutades oma Facebook kontot. Logi välja / Muuda )

Google+ photo

Sa kommenteerid kasutades oma Google+ kontot. Logi välja / Muuda )

Connecting to %s