Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Ismerkedés a CSS dobozmodelljével /Szegély beállítása (border, border-left, border-right, border-top, border-bottom)

Ismerkedés a CSS dobozmodelljével

Szegély beállítása (border, border-left, border-right, border-top, border-bottom)

A border tulajdonság segítségével a dobozok körüli szegély tulajdonságait állíthatjuk be.

Ha a doboz különböző oldalaira különböző szegélyt szeretnénk, azt megtehetjük a border-top, border-bottom, border-left, border-right tulajdonságok segítségével. Ezek paraméterei megegyeznek a border tulajdonságéval.

Ezek a paraméterek a rövidített (shorthand) változatok, később a hosszabb változatokra is kitérünk.

Paraméterek, és azok értékei:

A tulajdonságnak három szóközzel elválasztott paramétere van.

A szélesség, szín és stílus önálló beállítására (longhand paraméter) is van lehetőség:

Példa
Forráskód
  border-width: 1px;
  border-color: red;
  border-style: solid;

A fenti paraméterek rövidíthetők az alábbi formában:

Forráskód
  border: 1px solid red;

Ezen felül lehetőségünk van a négy oldalnak külön-külön szegélyt beállítani:

A négy oldalra külön-külön megadott szegélyek értékeit is beállíthatjuk egyenként a border-top-style, a border-top-color, a border-top-width, a border-right-style, a border-right-color, a border-right-width, a border-bottom-style, a border-bottom-color, a border-bottom-width, a border-left-style, a border-left-color és a border-left-width tulajdonságokkal.

Példa
Forráskód
div {border:1px solid red;}
div {border:4px double #0000FF;}
div#pelda {border-left:1px solid blue;}
div#pelda {
                  border-right:1px solid blue;
                  border-top:none;
                  border-bottom:2px solid blue;
                  }

Az alábbi interaktív példában letesztelhetjük a szegélyfajtákat.

Példa - Szegélyfajták bemutatása

Interaktív példa

Körvonal (outline) beállítása

Egy elem körvonala az elem szegélye körül helyezkedik el. Azonban a doboz szélességébe és magasságába nem számolódik bele a körvonal vastagsága.

Az outline paraméter segítségével megadhatjuk az outline stílusát, szélességét és színét. A körvonal a szegéllyel ellentétben minden oldalon ugyanolyan megjelenésű. Az outline tulajdonság értékei nem öröklődnek.

Paraméterei, és azok értékei:

A tulajdonság három szóközzel elválasztott paraméterrel rendelkezik.

Ezeket a tulajdonságokat megadhatjuk külön-külön is az outline-color, outline-width és outline-style segítségével.

Az outline-offset tulajdonsággal távolságot állíthatunk be a szegély és a körvonal között. Itt megadhatunk tetszőleges hosszúságértéket, valamint az inherit kulcsszóval a szülőtől örököltethetjük az értékét.

Kapcsolódó akadálymentességi elvek

Az outline paramétert gyakran használjuk akadálymentességi okokból, hiszen a segítségével jól kiemelhetjük azon elemeket (pl. gombokat, linkeket), amelyek éppen fókuszban vannak, tehát billentyűzettel navigáltunk rájuk.

Éppen ezért nagyon helytelen, ha a vastagságát 0-ra állítjuk.

Példa - Szegély és körvonal példa

Interaktív példa
Magyarázat

Az első esetben csak szegélyt, a másodikban csak körvonalat állítottunk be. A harmadik esetben látszik, hogy a körvonal a szegély körül helyezkedik el. A negyedik példában a szegély és a körvonal között az outline-offset paraméterrel állítottunk be térközt.

Lekerekített szegély (border-radius)

A border-radius paraméter segítségével lekerekített sarkú szegélyeket készíthetünk. A border-radius tulajdonságok értékei nem öröklődnek.

Értékek

A sarkok lekerekítettsége külön-külön is beállítható a következő paraméterekkel:

Paraméterek száma

A border-radius tulajdonságnak – köríves lekerekítés esetén – legfeljebb négy szóközzel elválasztott paramétert adhatunk meg, melyek jelentése a következő:

Megjegyzés

Ha ellipszisívet szeretnénk, akkor egy / után felsorolhatunk további legfeljebb 4 értéket. Ilyenkor a / előtti érték(ek) az ellipszisívek vízszintes tengelyeinek sugarát, a / utániak pedig a függőleges tengelyre illeszkedő sugarak nagyságát jelölik.

Példa - Szegély lekerekítés bemutatása

Interaktív példa
Magyarázat

A fenti példában bemutattuk, hogy különböző számú paraméter megadása mellett hogyan alakul a doboz sarkainak lekerekítettsége. A 6. példában a nagyfokú lekerekítettség miatt kör alakú szegélyt kaptunk. Az utolsó példában a paramétereket a hosszabb megadási formával definiáltuk.

Tartalom túlcsordulás (overflow, overflow-x, overflow-y)

Az előbbi példáinkban is láthattuk, hogy a tartalom nem feltétlenül fér ki az általunk megadott méretű dobozba, és akkor túlcsordul. Az overflow tulajdonság segítségével ezeket a túlfolyó tartalmakat kezelhetjük. Ezen felül az overflow-x és az overflow-y tulajdonságokkal külön-külön kezelhetjük a vízszintes és a függőleges tartalom túlcsordulásokat.

Az overflow/overflow-x/overflow-y tulajdonságok értékei nem öröklődnek.

Értékek:

Megjegyzés

A fenti értékeken kívül továbbiak megjelenése is várható a szabvány végleges változatában, lásd a CSS basic box model dokumentációt.

Példa - Túlcsordulás kezelése

Interaktív példa
Magyarázat

Négy div elemet helyeztünk el, ahol sorrendben az auto, hidden, scroll és visible értékeket adtuk meg az overflow paraméternek. Látható, hogy az első esetben csak a függőleges gördítősáv látszik, hiszen a vízszintesre a szöveg tördelése miatt nincs szükség. A másodikban levágásra kerül a tartalom, a harmadik esetben megjelenik a vízszintes és függőleges gördítősáv, az utolsó esetben pedig a szöveg kilóg a dobozból

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.