CSS/Servad, veerised ja polstrid

Igat objekti ümbritsevad polster, serv ja veeris. Objektiks võib olla täht, sõna, lõik, pilt, kasvõi kogu dokument.

padding - polster on ala, mis jääb objekti enda ja tema serva vahele. Veeris on sama värvi kui objekti taustavärv.
border - serv on joon, mis ümbritseb objekti. Serval võib olla eraldi määratud värv, kuju ja paksus.
margin - veeris on ala, mis eraldab objekti teistest tema kõrval, ees ja järel asuvatest objektidest. Veeris on sama värvi kui objekti ümbritseva elemendi taust - täpsemalt öeldes, veeris on läbipaistev.

Polster, serv ja veeris võivad olla elemendi neljal küljel täiesti erinevad või puududa hoopis. Vaikimisi puuduvadki need paljudel elementidel.

Polstrid: padding

Väärtus: <pikkus> | <protsent> | inherit

Atribuut padding võib omada nelja erisugust süntaksit:

padding: <kõik-küljed>;
padding: <ülal-all> <paremal-vasakul>;
padding: <ülal> <paremal-vasakul> <all>;
padding: <ülal> <paremal> <all> <vasakul>;

Esimene muudab polstri nii ülal, all, vasakul kui paremal ühesuuruseks.
Teine annab ülemise ja alumise polstri väärtuseks <ülal-all> ning parema ja pahema väärtuseks <paremal-vasakul>.
Kolmandas määratakse esiteks ülemise, siis parema ja pahema ning viimaks alumise polstri laius.
Neljandas antakse igale küljele eraldi väärtus.

Näiteks:

p { padding: 3em }
p { padding: 5px 10px }
p { padding: 1em 2em 0em }
p { padding: 10% 5% 15% 5% }

Esimene muudab kõik polstrid kolme tähekõrguse laiuseks.
Teine muudab ülemise ja alumine polstri viie ning parema ja vasaku kümne pikseli paksuseks.
Kolmas määrab ülemisele väärtuseks '1em', külgedele '2em' ning alumisele '0em'.
Neljas annab igale küljele eraldi väärtuse: üleval 10%, paremal 5%, all 15% ja vasakul 5% elemendi laiusest (määratud atribuudiga 'width').

Lisaks parameetrile 'padding' saab polstri määramiseks kasutada ka atribuute padding-top, padding-right, padding-bottom ja padding-left, mis siis vastavalt määravad ülemise, parema, alumise ja vasakpoolse polstri. Neid on mugav kasutada, kui on vaja määrata polster üksnes ühele küljele või määrata mõnele küljele erinev polster ülejäänutest.

p {
    padding: 4em;
    padding-left: 1em;
}

Näites muudetakse alustuseks kõikide külgede polster '4em' paksuseks ning seejärel seatakse vasaku polstri laiuseks '1em'.

Veerised: margin

Väärtus: <pikkus> | <protsent> | auto | inherit

Veeriste puhul on pea kõik analoogne polstritega. Atribuudi 'margin' väärtus võib olla neljas eri vormis:

margin: <kõik-küljed>;
margin: <ülal-all> <paremal-vasakul>;
margin: <ülal> <paremal-vasakul> <all>;
margin: <ülal> <paremal> <all> <vasakul>;

Näiteks:

p { margin: 3em }
p { margin: 5px 10px }
p { margin: 1em 2em 0em }
p { margin: 10% 5% 15% 5% }

Samuti saab kasutada ka eraldi parameetreid kõigi külgede jaoks: margin-top, margin-right, margin-bottom ja margin-left.

p {
    margin-top: 3em;
    margin-bottom: 2em;
}

Automaatsed veerised

Väärtus 'auto' tähendab, et kogu vaba ruum sellel küljel täidetakse automaatselt veerisega. Et 'auto' toimiks, peab elemendile olema määratud laius (atribuut 'width'). Kui vasakule ja paremale küljele määratakse väärtus 'auto', siis täidetakse kummalgi pool pool olev vaba ruum võrdselt, mille tulemusena joondatakse element horisontaalselt keskele. Kui anda väärtus 'auto' vasakule küljele, siis paigutub element paremale.

p {

   width: 200px;
   margin: 1em auto;

}

Veeriste kattumine

Meil on tarvis, et iga esimese taseme pealkirja ja temale järgneva teksti vahel oleks 30 pikseli jagu vahet ning eelneva tekstiga oleks vahe 60 pikselit. Iga lõigu vahel peaks aga tühja ruumi olema 10 pikseli jagu. Seega me teeme sellise stiililehe:

p {
    margin-top: 10px;
    margin-bottom: 10px;
}
h1 {
    margin-top: 30px;
    margin-bottom: 20px;
}

Kui palju jääb nende stiilide kohaselt üksteisele järgnevate lõikude vahele? Näib, et kuna ühe 'p' alumine veeris on 10px ja järgmise ülemine veeris samuti 10px, siis kokku tuleb vaheks 20px. Tegelikult on aga vahe vaid 10px, sest kui veerised vertikaalsuunas kohtuvad, siis nad kattuvad ning vahe jääb suurema veerise paksuseks. Niiviisi pole ka 'h1' ja 'p' vahekaugus 20px + 10px = 30px vaid hoopis max( 20px, 10px ) = 20px.

Kattumises seisnebki veerise ja polstri üks põhilisi erinevusi: veerised on tekstiblokkide eraldamiseks, polstrid on tekstibloki siseseks kasutamiseks.

Servad

Serva kuju: border-style

Atribuut border-style määrab serva kuju. Väärtuseks võib olla üks võtmesõnadest:

none - serv puudub, samaväärne serva paksuse sättimisega nulliks.
hidden - sama mis 'none', aga kasutades koos atribuudiga 'border-collapse', annab erineva tulemuse.
solid - ühtlane joon.
dotted - punktjoon.
dashed - punktiirjoon.
double - topeltjoon.
groove - väljapoole surutud joon.
ridge - sissepoole surutud joon.
inset - sissepoole surutud ala piirjoon.
outset - väljapoole surutud ala piirjoon.

Vaikimisi on serva stiiliks 'none' ning paksuse ja / või värvi määramisest hoolimata ei muutu serv nähtavaks. Lihtsa joone nähtavale toomiseks tuleb määrata serva stiiliks vähemalt 'solid'.

Süntaks sama, mis atribuutidel 'margin' ja 'padding':

border-style: <kõik-küljed>;
border-style: <ülal-all> <paremal-vasakul>;
border-style: <ülal> <paremal-vasakul> <all>;
border-style: <ülal> <paremal> <all> <vasakul>;

Näiteks:

p { border-style: solid }
em { border-style: dashed dotted }
a { solid none solid double }

Samuti on ka atribuudid iga külje jaoks: border-top-style, border-right-style, border-bottom-style ja border-left-style.

pre {
    border-style: solid;
    border-left-style: none;
}

Serva paksus: border-width

Väärtus: <pikkus> | thin | medium | thick | inherit

Atribuut border-width määrab serva paksuse. Paksus võib olla määratud konkreetse mõõduga, nagu näiteks:

a { border-width: 1px }

või hoopis võtmesõnaga:

thin - õhuke serv
medium - harilik serv (see väärtus on kasutusel vaikimisi)
thick - paks serv

Võtmesõnade arvulised väärtused on brauserispetsiifilised ega vasta kindlale pikkusühikule.

p { border-width: thick }

Parameeter 'border-width' toimib samamoodi nagu 'border-style':

p { border-width: 1px }
p { border-width: 2px 0px }
p { border-width: thin thin medium }
p { border-width: thin 0px thin thick }

Lisaks on olemas ka atribuudid iga konkreetse serva jaoks: border-top-width, border-rigth-width, border-bottom-width, border-left-width.

p {
    border-width: 1px;
    border-bottom-width: 2px;
}

Serva värv: border-color

Väärtus: <värv> | transparent | inherit

Atribuut border-color määrab serva värvuse. Väärtus 'transparent' teeb serva läbipaistvaks ehk siis sama värvi mis objekti taustavärv. Kui Servale värvi mitte määrata, siis kasutatakse objekti tekstivärvi (määratud atribuudiga 'color'). Süntaks on üldjoontes sama, mis eelnevatel:

p { border-color: #ff5080 }
p { border-color: #fff #000 }
p { border-color: #f00 #0f0 #00f }
p { border-color: red green blue transparent }

Samuti on ka atribuudid iga serva jaoks: border-top-color, border-rigth-color, border-bottom-color, border-left-color.

em {
    border-color: blue;
    border-left-color: #fac;
    border-right-color: #0cc;
}

Lühendatud parameeter: border

Väärtus: <border-style> | <border-width> | <border-color> | inherit

Atribuut border ja tema velled border-top, border-rigth, border-bottom ja border-left annavad võimaluse määrata korraga serva kuju, paksuse ja värvi. Atribuut 'border' määrab need omadused korraga kõigi külgede jaoks, ülejäänud parameetrid määravad need vaid vastava külje kohta.

p { border: solid thin red }

Selles näites määratakse kõik servad ühtlaseks, õhukeseks ja punaseks.

em {
    color: red;
    border-left: dashed;
}

Siin näites määratakse vasak serv hariliku paksusega punktiirjooneks, mis on sama värvi kui elemendi tekstivärv; antud juhul punane.

h1 { 
    border-bottom-style: solid;
    border-bottom: #ccc 5px;
}

Selles näites aga pealkirja 'h1' alla joont ei teki, ehkki alguses on määratud stiiliks 'solid', mis peaks ju joone nähtavale tooma. Kuid atribuut 'border-bottom' kirjutab üle kõik kolm serva omadust ning nende tarbeks mida mainitud pole, kasutab vaikimisi väärtusi mitte neid, mis on juba varem sellele servale määratud.

Raamat: CSS

<< Teksti paigutamine

Positsioneerimine >>

Sisukord