A CSS-ben két különböző keretfajta létezik: a border és az outline. Míg a border mindig egy téglalap alakú keretet jelöl, addig az CSS2-ben bevezetett outline-keretek nem téglalap alakú területekre szolgálnak. Emellett van még egy különbség: az outline esetében a körvonal a kereten kívül található, így egy elem egyszerre kaphat egy keretet a border-nél és egy körvonalat az outline-nál.
Az ebben a bemutatóban szereplő keretdefiníciók elsősorban azokra az elemekre vonatkoznak, amelyek saját bekezdést alkotnak. Alapvetően természetesen más elemekre is alkalmazhatók.
Keret meghatározása
A border-rel egy elem teljes keretének megjelenését lehet meghatározni.
Az általános border-tulajdonság egy összefoglaló a következő értékekről, amelyekre még részletesen kitérünk:
• border-color
• border-style
• border-width
Az egyes tulajdonságokhoz tartozó értékeket szóközzel választjuk el egymástól. Nem számít, hogy milyen sorrendben adjuk meg a tulajdonságokat. A border-hez továbbá négy résztulajdonság is tartozik, amelyek segítségével az egyes elemoldalakhoz keretszín, keretszélesség és kerettípus megadható.
• border-top – felső keret
• border-right – jobb keret
• border-bottom – alsó keret
• border-left – bal keret
A következő példa bemutatja a border használatát. Ezen definíció segítségével egy hárompontos széles, fekete és folytonos vonalú keretet hozunk létre.
<p style="border:3pt solid #000000;"> Üdvözöljük </p>
A böngészőben látható eredmény:
A keretszín
Az border-color-ral határozható meg a keretszín. Az alábbi értékek megengedettek:
• transparent – átlátszó keret
• színérték
Ha csak egy értéket adunk meg, az az összes keretoldalra vonatkozik. Az egyes oldalakhoz különböző színeket meghatározni több érték megadásával lehet, amelyeket szóközzel választunk el.
• Két érték – az első érték az felső és alsó, a második a bal és jobb keretszínéhez.
• Három érték – az első érték az felső, a második a bal és jobb, a harmadik az alsó keret színéhez.
• Négy érték – az első érték a felső, a második a jobb, a harmadik az alsó, a negyedik a bal keretszínéhez.
Az alábbiakban a következő border-résztulajdonságok is használhatók:
• border-top-color – felső keretszín
• border-right-color – jobb keretszín
• border-bottom-color – alsó keretszín
• border-left-color – bal keretszín
Egy példa:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
És itt az eredmény a böngészőben:
A vonaltípus
A border-style révén lehet meghatározni a keret vonaltípusát.
A lehetséges keretvariációk alább találhatók:
• none – láthatatlan keret
• dotted – pontozott
• dashed – szaggatott
• solid – folytonos
• double – kettős folytonos
• groove – 3D-vonal
• ridge – 3D-vonal
• inset – 3D-vonal
• outset – 3D-vonal
Itt egy példa a különböző kerettípusok kinézetére:
<!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>A böngészőben látható eredmény:
Ha csak egy értéket adunk meg, az minden keretsíkra vonatkozik. Az egyes oldalakhoz kerettípusokat meghatározni több érték megadásával lehet, melyeket szóközzel választunk el.
• Két érték – az első érték az felső és alsó, a második a bal és jobb keretvonal típusához.
• Három érték – az első érték az felső, a második a bal és jobb, a harmadik az alsó keretvonal típusához.
• Négy érték – az első érték a felső, a második a jobb, a harmadik az alsó, a negyedik a bal keretvonal típusához.
Az alábbi border-résztulajdonságok is használhatók:
• border-top-style – felső keretvonal típusa
• border-right-style – jobb keretvonal típusa
• border-bottom-style – alsó keretvonal típusa
• border-left-style – bal keretvonal típusa
Itt is egy példa:
<p style="keret-alja-stílus: megszakadt;"> Szaggatott keret </p>
Így néz ki a böngészőben:
A keretszélesség meghatározása
Az keret-szélesség meghatározza a keret szélességét.
• Hosszúság
• vékony – vékony keret
• közepes – közepes erőségű keret
• vastag – vastag keret
Ha csak egy érték van megadva, az minden oldalra vonatkozik az elemen. Különböző keretvastagságokat az egyes oldalakhoz meghatározni két lehetőség van. Az első módszernél több értéket különválasztó szóközöket kell beírni.
• Két érték – az első érték a felső és alsó, a második a bal és jobb keretszélességhez.
• Három érték – az első érték a felső, a második a bal és jobb, a harmadik az alsó keretszélességhez.
• Négy érték – az első érték fent, a második jobbra, a harmadik lent, a negyedik bal oldali keretszélességhez.
Ugyanezen border-alsó tulajdonságokat is használhatjátok:
• keret-felső-szélesség – keretszélesség felül
• keret-jobb-szélesség – keretszélesség jobbra
• keret-alsó-szélesség – keretszélesség alul
• keret-bal-szélesség – keretszélesség balra
Egy példa:
<p style="keret-szélesség:2px;keret-stílus: pontozott;"> Üdvözöljük </p>
A keretszín az outline-hoz
Az outline-szín tulajdonságon keresztül határozzátok meg a keret színét. A megadás azonos a keret-szín-nál.
• inverz – egy szín inverz árnyalata lesz. Ez a szín az összes hexadecimális színérték bitjeinek megfordítása útján jön létre.
• Szín megadása
Egy példa:
<p style="outline-szélesség: közepes; outline-stílus: állandó; outline-szín: kék;"> PSD-Tutorials.de </p>
Így néz ki a böngészőben:
A keret típus az outline-hoz
Az outline-stílus megadja a kontúr típusát. Az engedélyezett értékek megegyeznek a keret-stílus-okkal.
• none – láthatatlan keret
• pontozott – pontozott
• szaggatott – szaggatott
• állandó – folytonos
• dupla – dupla vonal
• árok – 3D-vonal
• gerinc – 3D-vonal
• beásott – 3D-vonal
• kiosztott – 3D-vonal
Egy példa:
<p style="outline-stílus:állandó;outline-szélesség:2px; outline-szín:vörös;"> PSD-Tutorials.de </p>
A keret vastagsága az outline-hoz
Az outline-szélesség megegyezik a keret-szélesség-el. Itt határozzátok meg a keret vastagságát. Egy látható keretvonal létrehozásához mindig kombináljátok az outline-szélesség-et az outline-stílus-al.
• közepes – közepes erőségű keret
• vékony – vékony keret
• vastag – vastag keret
• Hosszúság – meghatározza a keretvastagságot
Egy példa:
<p style="outline-szélesség: vékony;outline-stílus: állandó; outline-szín: vörös;">
Üdvözöljük
</p>
És ahogy a keretnél, úgy az outline-keretekhez is van egy általános tulajdonság.
<!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>Köszöntünk a PSD-Tutorials.de oldalon!</p>
</body>
</html>
Ebben az esetben a következő tulajdonságokat foglalja össze:
• outline-szélesség
• outline-stílus
• outline-szín
Az elv ebben az esetben megegyezik az általános keret-tulajdonsággal.
