CSS-is on olemas kaks erinevat raamitüüpi border ja outline. Border tähistab alati ristkülikukujulist raami, samal ajal kui CSS2-s tutvustatud outline raamid on mõeldud ebatäisnurksetele aladele. Ja veel üks erinevus on: Outline'i puhul toimub piirjoon raami välisküljel, mis tähendab, et element võib saada nii raami border kui ka piirjoone outline määratud.
Selles õpetuses esitletud raamidefinitisoonid on eelkõige huvitavad nende elementide puhul, mis moodustavad oma lõigu, kuid põhimõtteliselt saab neid muidugi rakendada ka teistele elementidele.
Raami määratlemine
Border'iga saab määrata elemendi kogu raami väljanägemise.
Tavaline border omadus on kokkuvõte järgmistest väärtustest, millele hiljem põhjalikumalt keskendutakse:
• border-color
• border-style
• border-width
Iga omaduse väärtused on eraldatud tühikutega. Omaduste järjekord ei mängi rolli. Lisaks on olemas neli borderialamomadust, mis võimaldavad määrata raamivärvi, raami paksuse ja raami tüübi üksikutele elemendi külgedele.
• border-top – ülemine raam
• border-right – parem raam
• border-bottom – alumine raam
• border-left – vasak raam
Allpool toodud näide näitab border kasutamist. Selle määratlusega luuakse kolm punkti lai, must ja katkendlik raam.
<p style="border:3pt solid #000000;"> Tere tulemast </p>
Internetilehitsejas tulemus:
Raamivärv
Kasutades border-color saab määrata raamivärvi. Võimalikud väärtused on järgmised:
• transparent – läbipaistev raam
• Värvikood
Kui antakse ainult üks väärtus, siis see kehtib kõigi raamikülgede jaoks. Erinevate värvide määramiseks iga külje jaoks tuleb määrata mitu väärtust, millest igaüks on eraldatud tühikuga.
• Kaks väärtust – esimene ülemise ja alumise, teine vasaku ja parema raamivärvi jaoks.
• Kolm väärtust – esimene ülemise, teine vasaku ja parema, kolmas alumise raamivärvi jaoks.
• Neli väärtust – esimene ülemise, teine parema, kolmas alumise ja neljas vasaku raamivärviks.
Samuti saab kasutada järgnevaid border-alamosi:
• border-top-color – ülemise raamivärv
• border-right-color – parema raamivärv
• border-bottom-color – alumise raamivärv
• border-left-color – vasaku raamivärv
Näide:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
Ja siin on tulemus internetilehitsejas:
Joone tüüp
Kasutades border-style saab määrata raami joone tüübi.
Allpool leiate loendi võimalikest raamitüüpidest:
• none – nähtamatu raam
• dotted – punktiir
• dashed – kriipsutatud
• solid – katkendatud
• double – topeltkatkendatud
• groove – 3D-joon
• ridge – 3D-joon
• inset – 3D-joon
• outset – 3D-joon
Allpool on näide raamitüüpide väljanägemisest:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">none</p>
<p class="dotted">dotted</p>
<p class="dashed">dashed</p>
<p class="solid">solid</p>
<p class="double">double</p>
<p class="groove">groove</p>
<p class="ridge">ridge</p>
<p class="inset">inset</p>
<p class="outset">outset</p>
<p class="hidden">hidden</p>
</body>
</html>Tulemus internetilehitsejas:
Kui antakse ainult üks väärtus, kehtib see kõigile raamikülgedele. Üksikute külgede raamitüüpide määramiseks tuleb määrata mitu väärtust, millest igaüks on eraldatud tühikuga.
• Kaks väärtust – esimene ülemise ja alumise, teine vasaku ja parema raamitüübi jaoks.
• Kolm väärtust – esimene ülemise, teine vasaku ja parema, kolmas alumise raamitüübi jaoks.
• Neli väärtust – esimene ülemise, teine parema, kolmas alumise ja neljas vasaku raamitüübi jaoks.
Samuti saab kasutada järgmisi border-alamosi:
• border-top-style – ülemine raamitüüp
• border-right-style – parem raamitüüp
• border-bottom-style – alumine raamitüüp
• border-left-style – vasak raamitüüp
Ka siin on näide:
<p style="border-bottom-style: dashed;"> Katkendlik raam </p>
Ja nii see välja näeb veebibrauseris:
Määrake raami laius
border-width abil määratakse raami laius.
• Pikkusmõõt
•thin - õhuke raam
•medium - keskmise tugevusega raam
•thick - paks raam
Kui antakse ainult üks väärtus, kehtib see kõigi elemendi külgede jaoks. Erinevate raamipaksuste määramiseks üksikutele külgedele on kaks võimalust. Esimese variandi korral kirjutatakse mitu tühikutega eraldatud väärtust.
• Kaks väärtust - esimene väärtus ülemise ja alumise, teine parema ja vasaku raami laiuse jaoks.
• Kolm väärtust - esimene väärtus ülemise, teine vasaku ja parema, kolmas alumise raami laiuse jaoks.
• Neli väärtust - esimene väärtus ülemise, teine parema, kolmas alumise ja neljas vasaku raami laiuse jaoks.
Samuti saate kasutada järgmisi border-alamomadusi:
• border-top-width - ülemine raamipaksus
• border-right-width - parem raamipaksus
• border-bottom-width - alumine raamipaksus
• border-left-width - vasak raamipaksus
Näide:
<p style="border-width:2px;border-style: dotted;"> Tere tulemast </p>
Äärise värvimine kontuuri jaoks
outline-color-omadusega määratakse kontuuri värv. Andmed on identsed border-color omadega.
• invert - värv inverditakse. See värv luuakse heksadetsimaalvärvuse kõigi bittide pööramise teel.
• Värvandmed
Näide:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
See näeb välja veebibrauseris:
Äärise tüüp kontuuri jaoks
outline-style-määrab kontuuri tüübi. Lubatud on samad väärtused nagu border-style.
• none - nähtamatu raam
• dotted - punktiraam
• dashed - kriipsraam
• solid - täisraam
• double - topelt täisraam
• groove - 3D-joon
• ridge - 3D-joon
• inset - 3D-joon
• outset - 3D-joon
Näide:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
Äärise paksus kontuuri jaoks
outline-width määrab ääre paksuse border-width abil. Ka siin määratakse ääre paksus. Nähtava raamijoone loomiseks kombineeritakse alati outline-width ja outline-style.
• medium - keskmise paksusega raam
• thin - õhuke raam
• thick - paks raam
• Pikkusmõõt - määrab ääre paksuse
Näide:
<p style="outline-width: thin;outline-style: solid; outline-color: red;">
Tere tulemast
</p>
Nagu ääre puhul, on ka kontuuridele outline jaoks üldine omadus.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p {
border:red solid thick;
outline:green dotted thick;
}
</style>
</head>
<body>
<p>Tere tulemast PSD-Tutorials.de-sse!</p>
</body>
</html>
See kokku võtab järgmised omadused:
• outline-width
• outline-style
• outline-color
Põhimõte on siin identne üldise border-omadusega.
