CSS egzistuoja dvi skirtingos rėmo rūšys: border ir outline. Border visada nurodo stačiakampį rėmą, tada, kai CSS2 buvo įvestas rėmo rūšis outline skirta ne stačiakampiams plotams. Taip pat yra dar viena skirtumas: su outline rėmas yra apibrėžiamas už rėmo ribų, todėl elementui gali būti priskirtas tiek rėmas su border, tiek užrėmimas su outline.
Šiame vadove pateiktos rėmo apibrėžtys yra labiausiai skirtos tokiems elementams, kurie suformuoja savo pastraipą. Principialiai jas galima taikyti ir kituose elementuose.
Apibrėžti rėmą
Su border galima nustatyti elemento rėmo išvaizdą.
Bendra border savybė yra suvestinė visų šių verčių, į kurias dar bus išsamiai aptarta:
• border-color
• border-style
• border-width
Verčių, susijusių su atskirų savybių, beiš Jose yra atskirti tarpu. Savybių tvarka nesvarbu. Be to, border turi dar keturias po-savybes, leidžiančias nurodyti rėmo spalvą, storį ir tipą atskiriems elemento pusėms.
• border-top – rėmas viršuje
• border-right – rėmas dešinėje
• border-bottom – rėmas apačioje
• border-left – rėmas kairėje
Sekantis pavyzdys demonstruoja border naudojimą. Šia apibrėžtimi sukuriamas trys taškų platumo, juodas ir tirštas rėmas.
<p style="border:3pt solid #000000;"> Sveiki atvykę </p>
Naršyklėje rezultatas:
Rėmo spalva
Per border-color nustatoma rėmo spalva. Leidžiami šie verčių tipai:
• transparent – skaidrus rėmas
• Spalvos kodas
Jei pateikiamas vienas verčius, jis taikomas visoms rėmo pusėms. Kad apibrėžti skirtingas spalvas atskirioms pusėms, pateikiamos daugiau verčių, kiekvienas iš jų atskiriamas tarpu.
• Du verčiai – pirmas viršutinei ir apatinei, antras kairiai ir dešinėms rėmo spalvoms.
• Trys verčiai - pirmas viršutinei, antras kairiai ir dešinėms, trečias apatinei rėmo spalvoms.
• Keturi verčiai - pirmas viršutinei, antras dešinei, trečias apatinei rėmo spalvai, ketvirtas kairiai rėmo spalvai.
Taip pat galima naudoti šias border po-savybes:
• border-top-color – viršutinė rėmo spalva
• border-right-color – dešininė rėmo spalva
• border-bottom-color – apatinė rėmo spalva
• border-left-color – kairė rėmo spalva
Pavyzdžys:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
Ir naršyklėje rezultatas:
Linijos tipas
Per border-style galima nustatyti rėmo linijos tipą.
Apskritai, čia yra sąrašas galimų rėmo variantų:
• none – nematomas rėmas
• dotted – taškuotas
• dashed – brūkšninis
• solid – neištrintas
• double – dvigubas neištrintas
• groove – 3D linija
• ridge – 3D linija
• inset – 3D linija
• outset – 3D linija
Čia pavyzdys, kaip atrodo rėmo tipai:
<!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>Naršyklėje rezultatas:
Jeigu nurodoma tik viena verčius, jis taikomas visoms rėmo pusėms. Norint apibrėžti rėmo tipus atskiriems pusėms, reikia parašyti kelis verčius, kiekvienas atskirtas tarpu.
• Du verčiai – pirmas viršutinei ir apatinei, antras kairiai ir dešinėms rėmo rūšims.
• Trys verčiai - pirmas viršutinei, antras kairiai ir dešinėms, trečias apatinei rėmo rūšims.
• Keturi verčiai - pirmas viršutinei, antras dešinei, trečias apatinei rėmo rūšiai, ketvirtas kairiai rėmo rūšiai.
Taip pat galima naudoti šias border po-savybes:
• border-top-style – viršutinė rėmo rūšis
• border-right-style – dešininė rėmo rūšis
• border-bottom-style – apatinė rėmo rūšis
• border-left-style – kairė rėmo rūšis
Tai taip pat yra pavyzdys:
<p style="border-bottom-style: dashed;"> Brūkšninė rėmo linija </p>
O taip tai atrodo naršyklėje:
Nustatyti rėmo plotį
Naudojant border-width, nustatomas rėmo plotis.
• Ilgio nustatymas
• thin – plonas rėmas
• medium – vidutinio stiprumo rėmas
• thick – storas rėmas
Jei nurodomas tik vienas nustatymas, jis taikomas visoms elemento pusėms. Norint nustatyti skirtingus rėmo storius atskiriems puslapiams, yra du būdai. Pirmuoju atveju surašomi keli skiriami tarpais nustatymai.
• Du nustatymai – pirmasis nustatymas viršutinei ir apatinė ramens plotyje, o antrasis kairiajai ir dešiniajai rėmo plotyje.
• Trys nustatymai – pirmasis nustatymas viršutiniam, antrasis kairiajam ir dešiniajam, o trečiasis apatiniam rėmo plotyje.
• Keturi nustatymai – pirma reikšmė viršuje, antra dešiniai, trečia apatinėje, o ketvirta kairėje rėmo plotyje.
Taip pat galite naudoti šias border-po-savybes:
• border-top-width – rėmo pločio viršuje
• border-right-width – rėmo pločio dešinėje
• border-bottom-width – rėmo pločio apačioje
• border-left-width – rėmo pločio kairėje
Pavyzdys:
<p style="border-width:2px;border-style: dotted;"> Sveiki atvykę </p>
Rėmo spalva kontūrui
Naudodami savybę outline-color nustatoma rėmo spalva. Nurodymas yra identiškas border-color.
• invert – spalva apverčiama. Ši spalva susidaro iš visų iš hexadecimalinio spalvos kodo apverstų bitų inversijos.
• Spalvų nurodymas
Pavyzdys:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
Tai atrodo naršyklėje:
Kontūro tipas kontūrui
Nustatymas outline-style nusako kontūro tipą. Leidžiami tie patys nustatymo variantai kaip ir border-style.
• none – nematomas rėmas
• dotted – taškuotas
• dashed – brūkšniuotas
• solid – vienalytis
• double – dvigubas
• groove – 3D linija
• ridge – 3D linija
• inset – 3D linija
• outset – 3D linija
Pavyzdys:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
Kontūro storis kontūrui
Nustatymas outline-width yra identiškas border-width. Taip pat juo nustatoma kontūro storis. Norint sukurti matomą rėmo liniją, visada deriname outline-width su outline-style.
• medium – vidutinio stiprumo rėmas
• thin – plonas rėmas
• thick – storas rėmas
• Ilgio nustatymas – apibrėžia rėmo storį
Pavyzdys:
<p style="outline-width: thin;outline-style: solid; outline-color: red;">
Sveiki atvykę
</p>
O su rėmu, taip pat yra bendra savybė kontūrui.
<!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>Sveiki atvykę į PSD-Tutorials.de!</p>
</body>
</html>
Ši grandinė tada apima šias savybes:
• outline-width
• outline-style
• outline-color
Toks principas čia yra identiškas kaip ir bendrai border savybei.
