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

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.

Először adjuk meg a szegély szélességét.
Megadhatunk tetszőleges hosszúságértékeket.
- A thin érték vékony szegélyt eredményez.
- A medium érték közepes szegélyt eredményez.
- A thick érték vastag szegélyt eredményez.
Az inherit esetén a szegély szélesség a szülő elemtől öröklődik.
Majd adjuk meg a vonalstílust.
- solid: szimpla vonalas szegélyt eredményez.
- dotted: pontozott vonalas szegélyt eredményez.
- dashed: szaggatott vonalas szegélyt eredményez.
- double: dupla vonalas szegélyt eredményez.
- groove: faragott keret hatású szegélyt eredményez.
- ridge: a képernyő síkjához képpest kiemelt hatásúvá teszi a dobozt.
- inset: süllyesztett hatású dobozt eredményez.
- outset: kiemelt hatású dobozt eredményez, de ridge-től különböző módon. Bizonyos vonalstílusok esetében megváltozik a minimális vonalvastagság értéke is. Egy double vonalstílusú szegély értelemszerűen csak akkor lesz dupla vonalas a képernyőn, ha a vastagsága legalább három pixel.
none: érték hatására nem jelenik meg a szegély.
hidden: hasonló mint, a none, kivéve ha olyan táblázatnál használjuk, ahol a szegély össze van vonva a border-collapse:collapse beállítással. Ha a hidden értéket állítjuk be egy cellára, akkor a cella körül akkor sem jelenik meg szegély, ha a szomszédos cellán van szegély beállítva. A none érték hatására viszont a szomszédos cella szegélybeállítása érvényesülni tud.
inherit: hatásra a szegélystílus a szülő elemtől öröklődik.
Végül adjunk meg egy tetszőleges színértéket a szegély számára.
Az inherit kulcsszó segítségével a szegély színe a szülőtől öröklődik.

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

border-width: a szegély szélessége
border-color: a szegély színe
border-style: a szegély stílusa

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:

border-top: felső szegély. Például: border-top:1px solid green;
border-right: jobb oldali szegély.
border-bottom: alsó szegély.
border-left: bal oldali szegély.

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

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Szegélyfajták bemutatása</title>
<meta charset="utf-8">
<style type="text/css">
  div {
       width:100px;    /*szélesség*/
       height:100px;   /*magasság*/
       margin:10px;    /*margó*/
       padding:10px;   /*belső kitöltés*/ 
       background-color:#efefef; /*háttérszín*/
       }
  div:nth-child(1) {border:thin solid blue}   
  div:nth-child(2) {border:medium dotted blue}   
  div:nth-child(3) {border:thick dashed blue}   
  div:nth-child(4) {border:4px double blue}   
  div:nth-child(5) {border:6px groove blue}   
  div:nth-child(6) {border:6px ridge blue}   
  div:nth-child(7) {border:6px inset blue}   
  div:nth-child(8) {border:6px outset blue}   
  div:nth-child(9) {border:none}   
  div:nth-child(10) {border:hidden}   
</style>
</head>
<body>
  <div>thin solid</div>
  <div>medium dotted</div>
  <div>thick dashed</div>
  <div>4px double</div>
  <div>6px groove</div>
  <div>6px ridge</div>
  <div>6px inset</div>
  <div>6px outset</div>
  <div>none</div>
  <div>hidden</div>
</body>
</html>

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.

Először adjunk meg neki azt a színértéket, amilyen színű outline-t szeretnénk.
Majd adjuk meg a kívánt szélességét. Minden érték megadható, ami szegély szélességként lehetséges.
Végül adjuk meg a stílusát. Itt minden érték megadható, ami szegély stílusként lehetséges.

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

Megadhatunk tetszőleges hosszúságértékeket, amik a sugarát határozza meg a lekerekített saroknak.
Megadhatunk százalékos értékeket is.
0% és 50% közötti értékekkel a lekerekített sarkok sugarának a mérete állítható be.
50% feletti érték esetén a doboz oldalai félkörbe mennek át.

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

border-top-right-radius: jobb felső sarok lekerekítettségének mértéke.
border-bottom-right-radius: jobb alsó sarok lekerekítettségének mértéke.
border-bottom-left-radius: bal alsó sarok lekerekítettségének mértéke.
border-top-left-radius: bal felső sarok lekerekítettségének mértéke.

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ő:

Egy paraméter esetén ez az érték állítódik be mind a négy sarokra.
Két paraméter esetén az első paraméter a bal-felső és jobb-alsó sarokba; a második pedig a bal-alsó és jobb-felső sarokba állítódik be.
Három érték esetén, az első érték a bal-felső; a második bal-alsó és jobb-felső; a harmadik pedig jobb-alsó sarokba állítódik be.
Négy paraméter esetén, az első a bal-felső, a második a jobb-felső, a harmadik a jobb-alsó és a negyedik a bal-alsó sarokba állítódik be.

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

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Szegély lekerekítettség</title>
<meta charset="utf-8">
<style type="text/css">
  div {
     width:100px;    /*szélesség*/
     height:100px;   /*magasság*/
     margin:15px;    /*margó*/
     padding:10px;   /*belső kitöltés*/ 
     background-color:#efefef; /*háttérszín*/
     border:3px solid blue;    /*szegély*/
     float: left;              /*balra lebegtetés*/
     text-align:center;        /*szöveg igazítása középre*/
     }
  div:nth-child(1) {border-radius: 20px;}
  div:nth-child(2) {border-radius: 40px 20px;}
  div:nth-child(3) {border-radius: 40px 20px 0;}
  div:nth-child(4) {border-radius: 40px 20px 0 10px;}
  div:nth-child(5) {border-radius: 20%;}
  div:nth-child(6) {border-radius: 70%;}
  div:nth-child(7) 
             {
               border-top-left-radius:40px;
               border-top-right-radius:20px;
               border-bottom-right-radius:0;
               border-bottom-left-radius:10px;
             }   
  
</style>
</head>
<body>
  <div>border-radius:20px</div>
  <div>border-radius:40px 20px;</div>
  <div>border-radius:40px 20px 0;</div>
  <div>border-radius:40px 20px 0 10px;</div>
  <div>border-radius:20%;</div>
  <div>border-radius:70%;</div>
  <div>lekerekítés a hosszabb (longhand) megadási móddal</div>
</body>
</html>

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:

A visible érték esetén a tartalom teljesen megjelenítésre kerül, az átfedő részek pedig a dobozon kívülre igazítódnak.
A hidden érték esetén a tartalom elvágásra kerül, és a nem látszó részekhez semmilyen módon nem lehet hozzáférni.
A scroll érték esetén görgetősáv jelenik meg, így elérhetjük a kitakart részeket.
Az auto érték esetén ha szükséges, a böngésző görgetősávot helyez ki.

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

<!DOCTYPE html>
<html lang="hu">
<head>
<title> Túlcsordulás kezelése </title>
<meta charset="utf-8">
<style type="text/css">
  div {
     width:150px;              /*szélesség beállítása relatívan*/
     height:150px;             /*magasság*/
     background-color:#efefef; /*háttérszín*/
     margin:20px;              /*margót állítunk be*/
     float:left;                    /*balra lebegtetjük az elemet */
     border:1px solid black;   /*szegélyt állítunk be*/
     }
     div:nth-child(1) {overflow: auto} 
     div:nth-child(2) {overflow: hidden} 
     div:nth-child(3) {overflow: scroll} 
     div:nth-child(4) {overflow: visible} 
</style>
</head>
<body>
  <div>(auto) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam mauris nec lorem scelerisque consectetur. Sed quis libero suscipit, laoreet risus nec, dapibus lacus. Nunc rutrum viverra odio quis posuere. Ut ullamcorper libero est, sed ullamcorper turpis convallis quis.</div>
  <div>(hidden) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam mauris nec lorem scelerisque consectetur. Sed quis libero suscipit, laoreet risus nec, dapibus lacus. Nunc rutrum viverra odio quis posuere. Ut ullamcorper libero est, sed ullamcorper turpis convallis quis.</div>
  <div>(scroll) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam mauris nec lorem scelerisque consectetur. Sed quis libero suscipit, laoreet risus nec, dapibus lacus. Nunc rutrum viverra odio quis posuere. Ut ullamcorper libero est, sed ullamcorper turpis convallis quis.</div>
  <div>(visible) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam mauris nec lorem scelerisque consectetur. Sed quis libero suscipit, laoreet risus nec, dapibus lacus. Nunc rutrum viverra odio quis posuere. Ut ullamcorper libero est, sed ullamcorper turpis convallis quis.</div>
  </body>
</html>

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

Fel a lap tetejére

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.