4.4.2. Äärised

Ääriste defineerimisel saab kasutada järgmisi võimalusi (NB! Äärise parameetreid loetakse ringiratast alates ülalt ja lõpetades vasakuga). Esmalt värvuse määramine:

• border-top-color - elemendi äärise ülemise külje värvus
• border-right-color - elemendi äärise parema külje värvus
• border-bottom-color - elemendi äärise alumise külje värvus
• border-left-color - elemendi äärise vasaku külje värvus

Näide:

body
{
border-top-color: #00ffcc
}

Seejärel äärisejoone paksus:

• border-top-width - elemendi äärise ülemise külje paksus
• border-right-width - elemendi äärise parema külje paksus
• border-bottom-width - elemendi äärise alumise külje paksus
• border-left-width - elemendi äärise vasaku külje paksus

Võimalikud väärtused:

• thin - õhuke
• medium - keskmine
• thick - paks
• konkreetne arvuline väärtus - mistahes CSS-is lubatud ühikutes

Näide:

body
{
border-top-width: 10px
}

Äärisejoone stiili määramiseks on järgnevad parameetrid:

• border-top-style - elemendi äärise ülemise külje stiil
• border-right-style - elemendi äärise parema külje stiil
• border-bottom-style - elemendi äärise alumise külje stiil
• border-left-style - elemendi äärise vasaku külje stiil

Võimalikud väärtused:

• none - puudub
• hidden - peaaegu nagu eelmine, v.a. mõned tabelijuhud
• solid - harilik täisjoon
• double - topeltjoon
• dotted - punktjoon (.......)
• dashed - kriipsjoon (-----)
• grooved, ridged, inset, outset - erinevad reljeefiefektid

Näide:

table
{
border-right-style: double
}

Lisaks saab määrata erinevaid parameetrikomplekte erinevatele ääristele:

• border-top -lühikuju elemendi äärise ülemise külje parameetrite määramiseks
• border-right -lühikuju elemendi äärise parema külje parameetrite määramiseks
• border-bottom -lühikuju elemendi äärise alumise külje parameetrite määramiseks
• border-left -lühikuju elemendi äärise vasaku külje parameetrite määramiseks

Näide:

table
{
border-right: thin dashed #00ffcc
}

Lisaks eespool vaadeldud detailsematele määrangutele on olemas ka n.ö. lühikujud, millega saab paika panna mitu parameetrit korraga. Näiteks :

border-color - lühikuju elemendi äärise värvuse määramiseks

Näide:

table {border-color: red green blue yellow}

NB! Näites on ülemine serv punane, parem roheline, alumine sinine ja vasak valge (vt. märkust eespool).

border-width - lühikuju elemendi äärise laiuse määramiseks

Näide:

table {border-width: thin medium thick none}

NB! Näites on ülemine serv õhuke, parem keskmine, alumine paks ja vasak puudub.

border-style - lühikuju elemendi äärise stiili määramiseks.

Näide:

table {border-style: dotted dashed solid double}

NB! Näites on ülemine serv punktjoon, parem kriipsjoon, alumine tavajoon ja vasak topeltjoon.

border - lühikuju kõigi elemendi äärise parameetrite määramiseks.

Näide:

p
{
border: thick dashed #00FFcc
}

2003-2024 Kaido Kikkas.
Käesoleva dokumendi paljundamine, edasiandmine ja/või muutmine on
sätestatud GNU Vaba Dokumentatsiooni Litsentsiga (versioon 1.2 või uuem).
Litsentsi ingliskeelne täistekst