În CSS există două tipuri diferite de margini: border și outline. În timp ce border marchează întotdeauna o margine dreptunghiulară, marginile outline introduse în CSS2 sunt destinate zonelor necunoscute pătratice. Și mai există o diferență: în cazul marginii outline, încadrarea se face în afara marginii, ceea ce face posibil ca un element să primească atât o margine cu border, cât și o încadrare cu outline.
Definițiile marginilor prezentate în acest tutorial sunt deosebit de utile pentru elemente care formează un paragraf propriu. În principiu, ele se pot aplica și altora tipuri de elemente.
Definirea marginilor
Cu border, aspectul întregii margini a unui element poate fi determinat.
Proprietatea generală border este un rezumat al următoarelor valori, la care se va reveni în detaliu:
• border-color
• border-style
• border-width
Valorile pentru fiecare proprietate sunt notate separat prin spațiu. Ordinea în care se specifică proprietățile nu are importanță. Pentru border, există de asemenea patru subproprietăți, prin care pot fi făcute specificări referitoare la culoarea marginii, grosimea marginii și tipul marginii pentru fiecare latură a elementului.
• border-top – margine de sus
• border-right – margine dreapta
• border-bottom – margine de jos
• border-left – margine stânga
Exemplul următor arată modul de folosire a border. Prin această definiție se creează o margine neagră, de trei puncte lățime, și discontinuă.
<p style="border:3pt solid #000000;"> Bun venit </p>
Rezultatul în browser:
Culoarea marginii
Prin border-color se stabilește culoarea marginii. Sunt permise următoarele valori:
• transparent – margine transparentă
• Valoare colorată
Dacă se specifică doar o valoare, aceasta este valabilă pentru toate laturilele marginii. Pentru a defini culori diferite pentru laturile individuale, se introduc mai multe valori, separate prin spații.
• Două valori – prima valoare pentru marginile superioare și inferioare, a doua pentru marginile stânga și dreaptă.
• Trei valori – prima valoare pentru marginea superioară, a doua pentru marginile stânga și dreaptă, a treia pentru marginea inferioară.
• Patru valori – prima valoare pentru marginea de sus, a doua pentru marginea dreaptă, a treia pentru marginea de jos și a patra pentru marginea din stânga.
La fel ca și subproprietățile border de mai jos pot fi folosite:
• border-top-color – culoarea marginii de sus
• border-right-color – culoarea marginii din dreapta
• border-bottom-color – culoarea marginii de jos
• border-left-color – culoarea marginii din stânga
Un exemplu:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
Și aici este rezultatul în browser:
Tipul liniei de margini
Prin border-style se poate stabili tipul liniilor marginii. Mai jos găsiți o listă a variantelor posibile ale marginii:
• none – margine invizibilă
• dotted – punctat
• dashed – discontinuu
• solid – continuu
• double – dublu continuu
• groove – linie 3D
• ridge – linie 3D
• inset – linie 3D
• outset – linie 3D
Iată un exemplu despre cum arată tipurile de linii de margini:
<!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>Rezultatul în browser:
Dacă se specifică doar o valoare, aceasta este valabilă pentru toate laturilele marginii. Pentru a defini tipuri de linii diferite pentru laturile individuale, sunt introduse mai multe valori, separate prin spații.
De asemenea, iată un exemplu:
<p style="border-bottom-style: dashed;"> Ramă punctată </p>
Și așa arată în browser:
Stabilirea lățimii ramelor
Prin border-width se determină lățimea ramei.
• Specificarea lungimii
• thin – ramă subțire
• medium – ramă de grosime medie
• thick – ramă groasă
Dacă se furnizează doar o valoare, aceasta se aplică pentru toate laturile elementului. Pentru a specifica grosimi de ramă diferite pentru laturi individuale, există două opțiuni. În prima variantă se vor înregistra mai multe valori separate prin spații goale.
• Două valori - prima valoare pentru laturile superioară și inferioară, a doua pentru cele stângă și dreaptă.
• Trei valori - prima valoare pentru latura superioară, a doua pentru laturile stângă și dreaptă, a treia pentru latura inferioară.
• Patru valori - prima valoare pentru partea de sus, a doua pentru partea dreaptă, a treia pentru partea de jos și a patra pentru partea stângă a ramei.
De asemenea, puteți folosi și următoarele proprietăți suplimentare pentru ramă:
• border-top-width – grosimea ramei de sus
• border-right-width – grosimea ramei din dreapta
• border-bottom-width – grosimea ramei de jos
• border-left-width – grosimea ramei din stânga
Un exemplu:
<p style="border-width:2px;border-style: dotted;"> Bine ați venit </p>
Culoarea ramei pentru contur
Prin proprietatea outline-color se definește culoarea ramă. Specificarea este identică cu border-color.
• invert – se inversează o culoare. Această culoare rezultă din reversarea tuturor biților unei valori hexadecimale de culoare.
• Specificarea culorii
Un exemplu:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
Așa arată în browser:
Tipul ramei pentru contur
Specificarea outline-style determină tipul de contur. Se permit aceleași valori ca în cazul border-style.
• none – ramă invizibilă
• dotted – punctat
• dashed – stins
• solid – continuu
• double – dublu continuu
• groove – linie 3D
• ridge – linie 3D
• inset – linie 3D
• outset – linie 3D
Un exemplu:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
Grosimea ramei pentru contur
Specificarea outline-width este identică cu border-width. Prin aceasta se definește grosimea conturului. Pentru a crea o linie de ramă vizibilă, se combină întotdeauna outline-width cu outline-style.
• medium – ramă de grosime medie
• thin – ramă subțire
• thick – ramă groasă
• Specificarea lungimii – determină grosimea conturului
Un exemplu:
<p style="outline-width: thin;outline-style: solid; outline-color: red;">
Bine ați venit
</p>
Și la fel ca în cazul bordurii, există o proprietate generală pentru ramă outline.
<!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>Bine ați venit la PSD-Tutorials.de!</p>
</body>
</html>
Aceasta rezumă următoarele proprietăți:
• outline-width
• outline-style
• outline-color
Principiul este identic cu cel al proprietății generale border.
