szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[:oktatas:web:css|< CSS]]

====== CSS ======

  * **Szerző:** Sallai András
  * Copyright (c) 2011, Sallai András
  * Szerkesztve: 2011-2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</html>

===== Bevezetés =====
A **CSS** a **Cascading Style Sheets** betűszavaiból alkotott mozaikszó. 
Magyarul **Lépcsős stíluslapok** néven fordítható. 

A CSS egy egyszerű mechanizmus amellyel stílust 
(pl.: fontok, színek, helyek) határozhatunk meg webes dokumentumainkhoz.

A CSS legelterjedtebb használata a weboldalak alakításánál legismertebb.
A webet Tim Berners-Lee eredetileg is úgy tervezte, hogy szétválasszák a szerkezetet és a kinézetet meghatározó elemeket. A kezdeti böngészők
viszont erre nem voltak képesek. Kezdetben a HTML elemekkel 
adtak stílusinformációkat a weblapokhoz, ami sokáig nem is változott. 

**Tim Berners-Lee** 1990 év, második felében 
elkészítette az első böngészőt, amit WorldWideWeb-nek
nevezett el, majd később átnevezték Nexus névre.
A böngésző NeXTSTEP operációs rendszerre készült. 

**Marc Andreessen** és **Eric Bina** az NCSA-nál fejleszteni
kezdik a Mosaic böngészőt Unix operációs rendszeren,
X Window System felületre, ekkor még xmosaic a neve.
Az első kiadás 1993-01-23-án készült el. A Mosaic
böngészőt később portolják AmigaOS, OpenVMS,
Classic Mac OS, MS Windowsra.

1994 október 10-én, **Hákon Wium Lie** közzétette **lépcsőzetes stíluslapok** nevű **nyelvet**.
1994 október 13 Marc Andreessen bejelenti a Mosaic böngésző támogatja a lépcsőzetes
stíluslapokat, amely kezdetben csak a középre igazítást támogatja. 
A Mosaic-ból későbbi tovább fejlesztés eredményeképpen
létrejön a Netscape böngésző. A Mosaic-ot közben (1995) megvásárolja a Microsoft, akik 
Internet Exploler nevű böngészőt hozzák belőle létre. 

Mára a böngészők CSS képessége messze túlhaladja a HTML elemekkel 
lehetséges stílusbeállításokat. 



===== Stíluslapkészítés =====

A CSS használata során, elsőként meg kell adnunk melyik HTML elem
tulajdonságait akarjuk beállítani, vagyis választanunk kell egy szelektort.
A szelektorhoz egy vagy több tulajdonság-értékpárt rendelünk. 

Szelektor lehet például a h1 elem, ha h1 fejezet címmel meghatározott
tartalomra szeretnék stílust meghatározni. Magát a stílusinformációt 
kapcsos zárójelek közzé teszem. Pl.:
<code css>
szelektor {
      tulajdonság1: érték1;
      tulajdonság2: érték2;
}
</code>

Láthatjuk, hogy a kapcsos zárójelen belül a tulajdonságok és az értékek
között kettőspont (:) szerepel szeparátorként. Minden tulajdonság-érték
párt pontosvesszővel (;) zárunk. 


CSS-t több szereplő is megadhat. 

A CSS lehet 
  * **Szerzői**
    * a webmester beállításai
  * **Felhasználói**
    * a felhasználó saját beállításai
  * **Kliens** 
    * a böngésző beállításai

Mi a szerzői stíluslapokkal foglalkozunk.

A szerzői stíluslapokat három módon köthetjük HTML dokumentumunkhoz:
  * **Inline**
    * attribútum stílus
    * helyben felülírva a általános stílus
  * **Internal**
    * tag stílus
    * beágyazva a dokumentumba
  * **External**
    * külső stílus
    * fájl a dokumentumból hivatkozva

Ebben az írásban előnyben részesítjük az External módon megadott CSS-t. 

Externál stílusmeghatározásnál a stílusinformációk 
k**ülön állományban** vannak. A HTML dokumentumban csak
egy hivatkozást teszünk rá. Ez a legelőnyösebb, ha
egy több HTML oldalból álló webhelyet akarunk készíteni.
Ha változtatni akarunk weblapjaink stílusán csak egyetlen
helyen kell a változtatást megtenni.

A stílusinformációkat tartalmazó állomány kiterjesztése:
  .css
Ha csak egy ilyen állományunk van szokásos neve:
  style.css

A HTML oldalon, a head elemek közzé kell elhelyezni a hivatkozást
egy link elem segítségével:

<code html>
<link href="style.css" type="text/css" rel="stylesheet" />
</code>
A HTML5 esetén nem kötelező a type attribútum használta.

Újabban, már ebben a formában is illeszthetünk stílusinformációkat tároló állományokat:
<code css>
<style>
@import url("style.css");
</style>
</code>

===== Szelektor =====

Fentebb már láttuk, hogy a szelektorral válasszuk ki, melyik 
HTML elemre szeretnénk beállítani stílust. 

Ha van egy H1 elemünk, akkor:

<code css>
h1 {
  /* ide jön a stílus információ */
}
</code>

Vagy H2 elemek esetén:
<code css>
h2 {
  /* ide jön a stílus információ */
}
</code>

Egyszerre felsorolhatunk több HTML elemet is, vesszővel tagolva:

<code css>
h1, h2, h3 {
  /* ide jön a stílus információ */
}
</code>

Mi van akkor ha több h2, vagy p elemünk van, de csak az 
egyikre szeretnénk stílusinformációt beállítani?

Ekkor a HTML kódban azonosítót, vagy osztályt rendelünk
a kívánt elemhez. 

Nézzünk egy példát h2 elemmel, ahol osztályt
állítok be "egyik" néven:

<code html>
<h2 class="egyik">Valami</h2>
</code>

A CSS kódban, ezek után így hivatkozhatok rá:
<code css>
h2.egyik {
  /* ide jön a stílus információ */
}
</code>
Az elem neve után (h2) egy (.) pontot írunk, majd jön az osztály neve.


A HTML elemek számára azonosítót is megadhatunk.
A következő példában a h2 elem az "egyik" nevű azonosítót kapja. 

<code html>
<h2 id="egyik">Valami</h2>
</code>

A CSS kódban, ezek után így tudunk rá hivatkozni:

<code css>
h2#egyik {
  /* ide jön a stílus információ */
}
</code>

Leírjuk a HTML elem nevét (h2, majd (#) kettőskereszt után jön az azonosító neve.


A class és az id között az a különbség, hogy egy id attribútum értéke,
egy weblapon belül csak egyszer szerepelhet, az osztály neve
többször is szerepelhet.


Ha CSS kódban azonosítóra vagy osztálynévre hivatkozom, 
a HTML elem neve elhagyható.

<code css>
.egyik {
  /* ide jön a stílus információ */
}
</code>

<code css>
#masik {
  /* ide jön a stílus információ */
}
</code>

===== Szöveg igazítása =====

A szöveg igazítását h1 elem tartalmán nézzük meg. 
Szeretném a h1 elemek között elhelyezett főcímünk
középre legyen igazítva. Szelektornak adjuk meg az elem nevét,
ami esetünkben h1:

<code css>
h1 {
  
}
</code>

A szöveg igazítását a text-align tulajdonsággal lehet
állítani, középre igazításhoz a center értéket adjuk meg:

<code css>
h1 {
    text-align: center;
} 
</code>


==== Próba ====

Próbáljuk ki az alábbi szövegen az igazítás változtatását. 
<html>
<style>
#textalignexample {
    border: 1px solid navy;
    margin: 3px 0;
}
</style>

<div id="textalignexample">Lorem ipsum</div>
<select id="textalignexampleselect">
  <option>left</option>
  <option>center</option>
  <option>right</option>
</select>

<script>
$("#textalignexampleselect").click(function(){
    var textalignment = $("#textalignexampleselect").val();
    $("#textalignexample").css("text-align", textalignment);
});
</script>

</html>




<html>
<style>
#textalignexample2 {
    border: 1px solid navy;
    margin: 3px 0;
}
</style>

<div id="textalignexample2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<select id="textalignexampleselect2">
  <option>left</option>
  <option>center</option>
  <option>right</option>
  <option>justify</option>
</select>

<script>
$("#textalignexampleselect2").click(function(){
    var textalignment = $("#textalignexampleselect2").val();
    $("#textalignexample2").css("text-align", textalignment);
});
</script>

</html>

===== Szöveg színezése =====
<code css>
h1 {
    color: blue;
} 
</code>


Próbálja ki az alábbi szöveg színezését. A szín választása után, kattintsunk a 
a színválasztón kívül.

<html>

<div id="textcolorexample">Lorem ipsum</div>
<input type="color" id="textcolorexampleselect">
<div id="textcolorexamplecaption">színkód</div>

<script>
$("#textcolorexampleselect").change(function(){
    var textcolor = $("#textcolorexampleselect").val();
    $("#textcolorexample").css("color", textcolor);
    $("#textcolorexamplecaption").text(textcolor);
});
</script>

</html>
===== Háttér =====

A következő táblázat tartalmazza, milyen lehetőségeink vannak:

^  Háttér beállítások  ^^
^  Tulajdonság  ^  Lehetséges értékek  ^
| background-color  | #RGBszínkód  |
| background-image  | url(kepneve.kit)  |
| background-repeat  | no-repeat, repeat-x, repeat-y, repeat  |
| background-position  | left, center, right, top, bottom  |
| background-attachment  | scroll, fixed, local  |
| background-size | méret pl.: 140px 300px vagy "cover", "contain"  |
| background-origin  | padding-box, border-box, content-box  |
| background-clip    | padding-box, border-box, content-box  |


==== Háttérszín ====

<code css>  
background-color:#990000;
</code>



Próbálja ki az alábbi szöveg hátterének színezését.

<html>

<div id="textbackgroundcolorexample">Lorem ipsum</div>
<input type="color" id="textbackgroundcolorexampleselect">
<div id="textbackgroundcolorexamplecaption">színkód</div>

<script>
$("#textbackgroundcolorexampleselect").change(function(){
    var textbackgroundcolor = $("#textbackgroundcolorexampleselect").val();
    $("#textbackgroundcolorexample").css("background-color", textbackgroundcolor);
    $("#textbackgroundcolorexamplecaption").text(textbackgroundcolor);
});
</script>

</html>


==== Kép beállítása ====

<code css>
background-image: url(hatter.png);
</code>

Egy lehetséges háttérkép:

{{:oktatas:web:css:virag2.png|}}

==== Ismétlés ====

Az ismétlést a backgorund-repeat tulajdonsággal állítjuk. 

<code css>
background-repeat: repeat-x;
</code>


Próbáljuk ki az ismétlési lehetőségeket:

<html>

<select id="imgexampleselect">
  <option>no-repeat</option>
  <option>repeat-x</option>
  <option>repeat-y</option>
  <option>repeat</option>
</select>

<div id="imgexamplecaption">a beállított érték</div>

<style>
#imgexample {
    width: 380px;
    height: 410px;
    background-image: url(/download/peldak/css/virag2.png);
    border: 3px solid navy;
}

#innerimgexample {
    margin: 20%;
    padding: 10px;
}
</style>


<div id="imgexample">
<div id="innerimgexample">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

<script>
$("#imgexampleselect").change(function(){
    var value = $("#imgexampleselect").val();
    $("#imgexample").css("background-repeat", value);
    $("#imgexamplecaption").text(value);
});
</script>

</html>


==== Pozíció ====
Pozíciót a background-position tulajdonsággal állítok.

<code css>
body {    
    background-position: right;
}
</code>

Egyszerre két értéket is beállíthatok, de ennek csak akkor van értelme, ha a background-repeat tulajdonság például no-repeat;
<code css>
body {
    background-repeat: no-repeat;
    background-position: right top;
}
</code>



<html>

<select id="imgexampleselect2">
  <option>left</option>
  <option>center</option>
  <option>right</option>
  <option>top</option>
  <option>bottom</option>
  <option>left top</option>
  <option>left bottom</option>
  <option>right top</option>
  <option>right bottom</option>
</select>

<select id="img2exampleselect2">
  <option>no-repeat</option>
  <option>repeat</option>
  <option>repeat-x</option>
  <option>repeat-y</option>
</select>




<style>
#imgexample2 {
    width: 380px;
    height: 410px;
    background-image: url(/download/peldak/css/virag2.png);
    background-repeat: no-repeat;
    border: 3px solid navy;
}

#innerimgexample2 {
    margin: 20%;
    padding: 10px;
}
</style>


<div id="imgexample2">
<div id="innerimgexample2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

<script>
$("#imgexampleselect2").change(function(){
    var value = $("#imgexampleselect2").val();
    $("#imgexample2").css("background-position", value);
});

$("#img2exampleselect2").change(function(){
    var value = $("#img2exampleselect2").val();
    $("#imgexample2").css("background-repeat", value);
});

</script>

</html>

==== Méret ====
A méret a background-size tulajdonsággal állítok.

<code css>
body {    
    background-size: cover;
}
</code>

|  auto  |  Alapértelmezett érték. Eredeti méret mutatása. |
|  hosszz  | Szélesség beállítása.  Ha van második \\ paraméter is, akkor az magasság.  |
|  százalék  | Szélesség és magasság.  Az első szélesség, \\ a második magasság.  |
|  cover  | Átméretezi a háttérképet, hogy kitöltse az egész \\ tárolót, még akkoris ha le kell vágni a képből.   |
|  contain  | A kép legyen teljesen látható.  |
|  initial  | Alapértelmezett érték beállítása. |
|  inherit  | Örökölt méret.  |






<html>

<select id="imgSizeExampleSelect">
  <option>100px</option>
  <option>10px</option>
  <option>20px</option>
  <option>30px</option>  
  <option>40px</option>
  <option>50px</option>
  <option>200px</option>
  <option>300px</option>
  <option>400px</option>
  <option>500px</option>
  <option>50px 50px</option>
  <option>100px 100px</option>
  <option>200px 200px</option>
  <option>400px 400px</option>    
  <option>auto</option>
  <option>cover</option>
  <option>contain</option>
</select>

<select id="imgSizeRepeatExampleSelect">
  <option>no-repeat</option>
  <option>repeat</option>
  <option>repeat-x</option>
  <option>repeat-y</option>
</select>

<select id="imgSizeImageExampleSelect">
  <option>virag2.png</option>
  <option>kopasz-hegy.jpg</option>
</select>




<style>
#imgSizeExample {
    width: 380px;
    height: 410px;
    background-image: url(/download/peldak/css/virag2.png);
    background-repeat: no-repeat;
    border: 3px solid navy;
    background-size: 100px;
}

#innerImgSizeExample {
    margin: 20%;
    padding: 10px;
}
</style>


<div id="imgSizeExample">
<div id="innerImgSizeExample">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

<script>
$("#imgSizeExampleSelect").change(function(){
    var value = $("#imgSizeExampleSelect").val();
    $("#imgSizeExample").css("background-size", value);
});

$("#imgSizeRepeatExampleSelect").change(function(){
    var value = $("#imgSizeRepeatExampleSelect").val();
    $("#imgSizeExample").css("background-repeat", value);
});

$("#imgSizeImageExampleSelect").change(function(){
    var value = $("#imgSizeImageExampleSelect").val();
    var imgPath = "url(/download/peldak/css/" + value + ")";
    $("#imgSizeExample").css("background-image", imgPath);
});


</script>

</html>

==== Két háttér ====

Két háttérkép is betehető egyszerre. 
<code css>
body {
  background-image: url(kep001.jpg), url(kep003.jpg);
  background-size: 50px 50px;
  background-repeat: repeat-x, repeat-y;
  
}
</code>



A példában az egyiket vízszintesen, másikat függőlegesen ismételtük.



<html>
<style>
#backgroundDoubleImageExample {
    width: 380px;
    height: 410px;
    background-image: 
        url(/download/peldak/css/virag2.png),
        url(/download/peldak/css/vodor.png)
        ;
    background-repeat: repeat-x, repeat-y;
    border: 3px solid navy;
}

#backgroundDoubleImageExample #inner {
    margin: 20%;
    padding: 10px;
}
</style>


<div id="backgroundDoubleImageExample">
<div id="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>


</html>



Pozíció megadásával:

<code css>
body {
  background-image: 
    url(kep001.jpg), 
    url(kep003.jpg);
  background-size: 50px 50px;
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right top;
  
}
</code>

<html>
<style>
#backgroundDoubleImagePozExample {
    width: 380px;
    height: 410px;
    background-image: 
        url(/download/peldak/css/virag2.png),
        url(/download/peldak/css/vodor.png)
        ;
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right top;
    border: 3px solid navy;
}

#backgroundDoubleImagePozExample #inner {
    margin: 20%;
    padding: 10px;
}
</style>


<div id="backgroundDoubleImagePozExample">
<div id="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>


</html>

===== Karakterkódolás beállítása =====

Általános szintaxis:
<code css>
@charset "<IANA által definiált karakterkészlet neve>";
</code>


UTF-8 kódolás beállítása:
<code css>
@charset "UTF-8";
</code>
===== Font =====

==== Stílus ====
<code css>
body { font-style: italic; } /* normal, italic, oblique, inherit */
</code>

Italic:
<html>
<div style="font-style: italic;">
Lorem ipsum dolorest amet.
</div>
</html>

Oblique:
<html>
<div style="font-style: oblique;">
Lorem ipsum dolorest amet.
</div>
</html>

Az Oblique lenne a kurzív, de tipográfiában a kurzív betűt úgy írják, hogy a tollat nem emelik meg, amit pedig mi kapunk nem valódi kurzív.
A kurzív tehát egy külön fontkészlet lenne.

Az oblique itt azt jelenti a számítógép mesterségesen, fonttól függetlenül megdönti a betűket. A italic pedig a dőlt betűs fontkészletet 
tölti be.




==== Vastagság ====
<code css>
body { 
  /* normal, bold, bolder, lighter, 100, 200, 300, ..., 900, inherit */
  font-weight: bold; 
} 
</code>
  
==== Méret ====

<code css>
div { font-size: 0.8rem; } 
</code>

^  font-size  ^^
| medium  | Alapértelmezett érték.  |
| xx-small  | |
| x-small | |
| small | |
| large | |
| x-large | |
| xx-large | |
| smaller  | Kisebb mint a szülőé  |
| larger   | Nagyobb mint a szülőé  |
| hossz    | Hossz számmal, mértékegységgel  |
| százalék  | Százalékos megadás  |

Mértékegységnek ajánlott a px helyett a **rem** vagy az **em** használata. Ha px-t használunk az akadálymentesítést nehézségekbe ütközhet. A példa kedvéért a Google Chromban, a "Beállítások" között, vegyük a "Megjelenítés"-t és a "Betűméret"-t. Ha valaki beállítja "Nagyon nagy"-ra, px esetén nem történik semmi. Ha maradunk a rem mértékegységnél: 1rem a **gyökér elem** (html) aktuális méretét jelenti. Ez alapértelmezetten **16px** szokott lenni a böngészőkben.


==== Fontcsalád ====


<code css>
font-family: serif;
</code>


^  Fontcsalád  ^  Megjelenés  ^  Leírás  ^
| serif | serif | Talpas fontok |
| sans-serif | sans-serif | Talpatlan fontok |
| monospace | monospace | Fix betűszélességű fontok |
| cursive | cursive | Kurzív fontok |
| fantasy | fantasy | Fantázia fontok |



<html>
<div style="font-family: serif;">
Lorem ipsum dolores amet - serif
</div>
</html>


<html>
<div style="font-family: sans-serif;">
Lorem ipsum dolores amet - sans-serif
</div>
</html>

<html>
<div style="font-family: monospace;">
Lorem ipsum dolores amet - monospace
</div>
</html>


<html>
<div style="font-family: cursive;">
Lorem ipsum dolores amet - cursive
</div>
</html>


<html>
<div style="font-family: fantasy;">
Lorem ipsum dolores amet - fantasy
</div>
</html>

==== Csoportban ====

<code css>
body { 
  font: italic bold 14px Arial, Helvetica, sans-serif; 
}  
</code>



==== Fontvariációk ====

  font-variant: small-caps;

| normal | Normál font. Alapértelmezett |
| small-caps | Kis-kapitális |
| inherit | A szülőelemtől örökölt fontvariáció |

A kis-kapitális beállítás hatására minden betű nagybetűs lesz, de 
a normál betűmagasságtól kisebb méretű, kivéve az első betű magassága. 

<code css> 
/* kis-kapitális */
font-variant-caps: small-caps;

/* minden betű kis-kapitális méretű nagybetű */
font-variant-caps: all-small-caps;
</code>

  * https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps (2021)


Minta a **font-variant: small-caps;** beállításra:

<html>
<style>
.kis-kapitalis_pelda02 {
    font-variant: small-caps;

}
</style>

<div class="kis-kapitalis_pelda01">
Lorem ipsum dolor est amet
<span class="kis-kapitalis_pelda02">Lorem ipsum dolor est amet</span>
</div>

</html>





Minta a **font-variant-caps: all-small-caps;** beállításra:

<html>
<style>
.kis-kapitalis_pelda03 {
    font-variant-caps: all-small-caps;
}
</style>

<div>
Lorem ipsum dolor est amet
<span class="kis-kapitalis_pelda03">Lorem ipsum dolor est amet</span>
</div>

</html>



==== Néhány ötlet ====
=== 001 ===

<html>
<div style="
         font-size: 26px;
         color: #333333;
         font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;

">
Lorem ipsum dolores amet
</div>
</html>

  color: #333333;
  font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;

=== 002 ===

<html>
<div style="
         font-size: 26px;
         color: #333333;
         font-family: Century Gothic, sans-serif;

">
Lorem ipsum dolores amet
</div>
</html>

  color: #333333;
  font-family: Century Gothic, sans-serif;


=== 003 ===

<html>
<div style="
         font-size: 26px;
         color: #333333;
         font-family: Tahoma, Geneva, sans-serif;

">
Lorem ipsum dolores amet
</div>
</html>

  color: #333333;
  font-family: Tahoma, Geneva, sans-serif;



=== 004 ===

<html>
<div style=" 
         font-size: 26px;
         color: #333333;
         font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;

">
Lorem ipsum dolores amet
</div>
</html>

  color: #333333;
  font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;





=== 004 ===

<html>
<div style=" 
         font-size: 26px;
         color: #333333;
         font-family: ‘Lucida Console’, Monaco, monospace;

">
Lorem ipsum dolores amet
</div>
</html>

  color: #333333;
  font-family: ‘Lucida Console’, Monaco, monospace;



=== 005 ===

<html>
<div style=" 
         font-size: 26px;
         color: #333333;
         font-family: ‘Courier New’, Courier, monospace;

">
Lorem ipsum dolores amet
</div>
</html>

  color: #333333;
  font-family: ‘Courier New’, Courier, monospace;


=== 006 ===

<html>
<div style=" 
         font-size: 26px;
         color: #333333;
         font-family: Arial, Helvetica, sans-serif;

">
Lorem ipsum dolores amet
</div>
</html>

  color: #333333;
  font-family: Arial, Helvetica, sans-serif;




=== 007 ===

<html>
<div style=" 
         font-size: 26px;
         color: #333333;
         font-family: Georgia, Serif;

">
Lorem ipsum dolores amet
</div>
</html>

  color: #333333;
  font-family: Georgia, Serif;


===== Szövegbeállítások =====

| color | szöveg színe |
| direction | szöveg iránya | ltr, rtl, inherit |
| letter-spacing | betűk közötti távolság | 2px, 3px, -1px  |
| line-height | sor magassága |  normal, 0.5, 1.6, 2, 10px, 30px, 0.5cm, 1cm, 150%  |
| text-align | szöveg vízszintes igazítása | left, center, right, justify |
| text-decoration | szöveg dekoráció hozzáadása | none, overline, line-through, underline |
| text-indent | az első sor behúzása | pl.: 50px |
| text-shadow | árnyék |
| text-transform | kis és nagybetűs | uppercase, lowercase, capitalize \\ //A capitalize az első betűt nagybetűssé teszi, \\ mást nem csinál.// |
| unicode-bidi | A direction tulajdonsággal együtt használjuk. \\ Ha egy weblap jobbról balra és \\ balról jobbra írt szöveget is \\ tartalmaz, szabályozhatjuk a \\ szövegbeágyazást. |  normal, embed, bidi-override, isolate, \\ isolate-override, plaintext, initial, inherit  |
| vertical-align | függőleges igazítás |  baseline, hossz, %, super, top, text-top, \\ middle, bottom, text-bottom, initial, inherit  |
| white-space | a white-space karakterek viselkedése |  normal, nowrap, pre, pre-line, \\ pre-wrap, initial, inherit  |
| word-spacing | szavak közötti távolság |  30px  |


==== Dekoráció ====

<code css>
body {
  text-decoration: underline;
}
</code>

Lehetséges értékei
| none |
| underline |
| overline  |
| line-through  |
| underline overline |

<html>
   <p> <span style="text-decoration: underline">szöveg</span> - text-decoration: underline</p>
   <p> <span style="text-decoration: overline">szöveg</span> - text-decoration: overline</p>
   <p> <span style="text-decoration: line-through">szöveg</span> - text-decoration: line-through</p>
   <p> <span style="text-decoration: underline overline">szöveg</span> - text-decoration: underline overline</p>
   <p><span style="text-decoration: underline overline wavy blue;">szöveg</span> - text-decoration: underline overline wavy blue;</p>
</html>

<code css>
body {
  text-decoration-line: underline;
}
</code>

==== Árnyék ====
<code css>
body {
  text-shadow: 5px 5px 3px #222222;
}
</code>


==== Dekorációs színe ====

<code css>
p {
  text-decoration: underline;
  text-decoration-color: red;
}
</code>


==== A dekoráció stílusa ====

<code css>
div {
    text-decoration-style: solid;
}
</code>


^  text-decoration-style  ^^
| solid  | Alapértelmezett  |
| double | Dupla vonal  |
| dotted  | Pontozott vonal  |
| dashed  | Szaggatott vonal  |
| wavy    | Hullám   |


<html>
<style>
.textDecorationStyle01 {
   text-decoration: underline;
   text-decoration-style: solid;
}
.textDecorationStyle02 {
   text-decoration: underline;
   text-decoration-style: double;
}
.textDecorationStyle03 {
   text-decoration: underline;
   text-decoration-style: dotted;
}
.textDecorationStyle04 {
   text-decoration: underline;
   text-decoration-style: dashed;
}
.textDecorationStyle05 {
   text-decoration: underline;
   text-decoration-style: wavy;
}


</style>

<p class="textDecorationStyle01">Lorem ipsum - text-decoration-style: solid;</p>
<p class="textDecorationStyle02">Lorem ipsum - text-decoration-style: double;</p>
<p class="textDecorationStyle03">Lorem ipsum - text-decoration-style: dotted;</p>
<p class="textDecorationStyle04">Lorem ipsum - text-decoration-style: dashed;</p>
<p class="textDecorationStyle05">Lorem ipsum - text-decoration-style: wavy;</p>


</html>

==== A white-space karakterek viselkedése ====

|  normal    | A whitespacek összvonása. A sordobozt kitölti. |
|  pre       | Csak ott lesz sortörés, ahol a forrásban is sortörés van. Közök nem lesznek összevonva |
|  nowrap    | Közök összevonása. Szövegen belül nincs sortörés  |
|  pre-wrap  | Közök nem lesznek összevonva. Sortörés, ahol forrásban is van, vagy ahol a sordoboz kitöltése megköveteli. |
|  pre-line  | Közök összevonása. Sortörés, ahol a forrásban új sor kezdődik, vagy ahol a sordoboz kitöltése megköveteli. |

===== Keret tulajdonságok =====

A keret vagy szegély a border tulajdonsággal szabályozható. 
==== A border csoportos beállítással ====

<code css>
.doboz {
    border: 2px solid black;
}
</code>

Az első a szegély vastagsága, a második a stílusa, a harmadik a színe.
==== A border-style ====

<code css>
border-style: solid;
</code>

Lehetséges értékei
  * none
  * dotted
  * dashed
  * solid
  * double
  * groove
  * ridge
  * inset
  * outset

<html>
<style>
#borderexample {
  border-width: 5px;
  border-color: navy;
  border-style: solid;
}
#borderexample2 {
  border-width: 20px;
  border-color: navy;
  border-style: solid;
}

</style>

<div id="borderexample">Lorem ipsum</div><br>
<div id="borderexample2">Lorem ipsum</div>
<select id="borderexampleselect">
  <option>solid</option>
  <option>dotted</option>
  <option>dashed</option>
  <option>double</option>
  <option>groove</option>
  <option>ridge</option>
  <option>inset</option>
  <option>outset</option>
</select>

<script>
$("#borderexampleselect").click(function(){
    var borderstyle = $("#borderexampleselect").val();
    $("#borderexample").css("border-style", borderstyle);
    $("#borderexample2").css("border-style", borderstyle);
});
</script>

</html>
==== border-width ====
Lehetséges értékei
  * thin
  * medium
  * thick
  * érték

==== border-collapse ====
Táblázat szegélyek esetén használható.

  * separated
  * collapse


===== Méretek beállítása =====
==== A span elem ====

A span elemek szélessége és magassága nem állítható, mivel inline elemek. 
A szélességüket a tartalom határozza meg. Ha szeretnénk állítani a szélességét
és a magasságát, a **display** tulajdonságot állítsuk inlin-block vagy block értékre.

<code css>
.container {
  width: 200px;
  height: 200px;
  display: inline-block;
  
  background-color: lightblue;
  border: 2px solid blue;
}
</code>

==== Maximális szélesség ====

<code css style.css>
.container {
    max-width: 600px; /* Maximum szélesség 600 pixel */
    margin: 0 auto; /* Középre igazítás */
    padding: 20px; /* Belső margó */
    background-color: lightblue; /* Háttérszín */
    border: 2px solid blue; /* Keret */
}
</code>


<code html>
<div class="container">
    <h2>Példa a max-width használatra</h2>
    <p>
        Ez a konténer maximum 600 pixel széles lesz. 
        A tartalom automatikusan igazodik a maximális 
        szélességhez.
    </p>
    <p>
        Próbáld ki szélesebbre húzva az ablakot, hogy 
        lásd a max-width hatását!
    </p>
</div>
</code>

Próbaverzió:
  * https://szit.hu/m/maxwith/

===== Dobozmodell =====

Minden HTML elemet doboznak tekintünk. 

{{:oktatas:web:css:dobozmodell.png|}}

A dobozok jellemzői:

  * Minden doboznak lehet szöveges tartalma, vagy lehet benne egy másik doboz.
  * Minden doboz szövegének állíthatjuk a színét, nagyságát, fontját.
  * Minden doboz háttérét beállíthatjuk, színnel, képpel.
  * Minden doboznak kezelhetjük a szélességét és magasságát.
  * Minden doboznak van szegélye.
  * Minden doboznak állíthatunk belső margót (a tartalom és a doboz belső széle közötti távolság).
  * Minden doboznak van margója.
  * A dobozok tulajdonságát külön tudjuk állítani, felül, alul, jobbra és balra.

{{:oktatas:web:css:dobozfelepites.png|}}


A CSS2-ben a doboz kapott egy körvonalat a szegély köré.

{{:oktatas:web:css:dobozfelepites_v2.png|}}

==== Margó ====

<code css>
.doboz {
    margin: 10%;
    background-color: blue;
    color: white;
}
</code>

<html>
<style>
.doboz8343893 {
    margin: 10%;
    background-color: blue;
    color: white;
}
</style>

<div class="doboz8343893">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis voluptas vitae in perspiciatis vel, voluptates eligendi doloribus dolores porro, velit praesentium provident, nesciunt beatae? Aliquid velit repudiandae quam maiores ad!
</div>

</html>
==== Belső margó ====

<code css>
.doboz {
    padding: 30px;
    background-color: blue;
    color: white;
}
</code>

<html>
<style>
.doboz8398472 {
    padding: 30px;
    background-color: blue;
    color: white;
}
</style>

<div class="doboz8398472">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis voluptas vitae in perspiciatis vel, voluptates eligendi doloribus dolores porro, velit praesentium provident, nesciunt beatae? Aliquid velit repudiandae quam maiores ad!
</div>

</html>
===== Overflow =====
==== Egyszerű túlfolyás-kezelés ====


A szöveg túlfolyik a dobozon. Ezt kezelhetjük az overflow tulajdonsággal.
Következő értékeket veheti fel: visible, hidden, scroll, auto. Az alapértelmezett a visible.

<code css>
overflow: hidden;
</code>

A hidden érték esetén a túlfolyt szöveg egyszerűen eltűnik.

<html>

<div style="background-color: green; width: 100px; height: 100px; overflow:hidden;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam condimentum blandit sapien non volutpat.
</div>
<br />
</html>

<code css>
overflow: scroll;
</code>

<html>
<div style="background-color: orange; width: 100px; height: 100px; overflow:scroll;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam condimentum blandit sapien non volutpat.
</div>

</html>

<code css>
overflow: none;
</code>



<html>
Az alapértelmezett "none" érték esetén a szöveg túlfolyik ha nem fér el a dobozban:
<div style="background-color: orange; width: 100px; height: 100px; overflow:none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam condimentum blandit sapien non volutpat.
</div>

<br><br>
</html>






==== Az x és y tag ====

<code>
overflow-x: hidden;
overfloa-y: hidden;
</code>

^  Érték  ^  Leírás  ^
| visible | A tartalmat nem bántjuk a görgető sáv a dobozon kívül lesz. |
| hidden  | A tartalom nyírva lesz, a görgető sáv rejtve |
| scroll  | A tartalom nyírva lesz, a görgető sáv megjelenik |
| auto    | A görgetősáv megjelenése a tartalomtól függ |
| no-display | Ha a tartalom nem tölti ki a dobozt, akkor doboz törölve lesz. |
| no-content | Ha a tartalom nem tölti ki a dobozt, akkor tartalom elrejtésre kerül |



Csak függőleges scroll:
<code css>
overflow-y: scroll;
</code>

<html>
<div style="background-color: orange; width: 100px; height: 100px; overflow-y:scroll;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam condimentum blandit sapien non volutpat.
</div>

</html>



===== Lista tulajdonság =====

A számozott és számozatlan listák többféle tulajdonságát tudjuk beállítani
CSS-ből. 

Megadhatjuk, hogy számozott legyen vagy számozatlan. A számozott milyen
alakzattal jelenjen meg, esetleg milyen képpel. A számozott listánál,
megadhatjuk római vagy latin számokat, ábécét, kis vagy nagy betűvel.




==== list-style-type ====

<code css>
ul {
  list-style-type: circle;
}
</code>
  * disc
  * circle
  * square
  * decimal
  * lower-roman
  * upper-roman
  * lower-alpha
  * upper-alpha
  * none


<code css>
ul.a {
    list-style-type: circle;
}
ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}
ol.d {
    list-style-type: lower-alpha;
}
</code>


Próbálja ki a következő beépített HTML részlettel: 
<html>
<style>
#listexample ul {
    color: black;
}
</style>
<div id="listexample">
<ul>
  <li>alma</li>
  <li>körte</li>
  <li>barack</li>
  <li>szilva</li>
  <li>málna</li>
  <li>meggy</li>
  <li>cseresznye</li>
</ul>
</div>
<select id="listexampleselect">
  <option>disc</option>
  <option>circle</option>
  <option>square</option>
  <option>decimal</option>
  <option>lower-roman</option>
  <option>upper-roman</option>
  <option>lower-alpha</option>
  <option>upper-alpha</option>
  <option>none</option>    
</select>

<script>
$("#listexampleselect").click(function(){
    var listtype = $("#listexampleselect").val();
    $("#listexample ul").css("list-style-type", listtype);
});
</script>

</html>


==== list-style-image ====

<code css>
ul {
  list-style-image: url(listajel.png);
}
</code>

==== list-style-position ====

<code css>
ul {
  list-style-position: inside;
}
</code>

  * inside
  * outside
Az inside esetén a lista előtti alakzatot a lista tartalmazza. Az outside esetén azon
kívül van. Ez a gyakorlatban úgy látszik, hogy outside esetén egy kicsit előrébb 
kezdődik, mint egy inside elrendezéssel formázott lista.


===== Megjelenítés =====
A dobozok megjelenését két tulajdonsággal lehet szabályozni:
  * visibility
  * display


<code css>
h1.hidden {
  visibility:hidden;
}
</code>

A visibility:hidden elrejti az elemet, de az elem helye **megmarad**. 


<code css>
h1.hidden {
  display:none;
}
</code>

A display:none viszont teljesen **törli** a szövegfolyamból az elemet. 



==== A block és az inline elemek ====

Egy **blokkelem** kitölti a rendelkezésre álló **teljes szélességet**, 
a következő elem már új sorban fog megjelenni. 


Blokk elemekre példa:

  * <h1>
  * <p>
  * <div>

<html>
<style>
.p_block_element_01 {
    border: 1px solid navy;
}
</style>

<p class="p_block_element_01">
&lt;p&gt;
</p>

</html>




Egy **inline** elem csak a számára szükséges helyet foglalja el, a következő 
elem azonos sorban jelenik meg, ha elfér. Az inline elemek **nem
reagálnak** a **width**, **height** tulajdonságok beállításaira.


Inline elemekre példa:

  * <span>
  * <a>


<html>
<style>
.span_inline_element_01 {
    border: 1px solid navy;
}
</style>
<br>
<span class="span_inline_element_01">
&lt;span&gt;
</span>
<br>
</html>



A **display** tulajdonsággal megcserélhetjük az elem láthatóságának tulajdonságát.

==== inline-block ====

Köztes állapot az inline-block elem:
  display: inline-block;

Az **inline-block** elemek sem töltik ki a rendelkezésre álló helyet, mint az inline
elemek, viszont **használhatók** vele a **width**, **height** tulajdonságok is.


<html>
<style>
.span_inlineblock_element_01 {
    border: 1px solid navy;
    display: inline-block;
    width: 200px;
}
</style>
<br>
&lt;style&gt;<br>
span {<br>
&nbsp;&nbsp;display: inline-block;<br>
&nbsp;&nbsp;width: 200px;<br>
}<br>
&lt;/style&gt;<br><br>
<span class="span_inlineblock_element_01">
&lt;span&gt;
</span>
<br>
</html>


==== Interaktív példa ====

<html>
<style>
#displayexample1 {
    color: navy;
    border-style: solid;
    border-width: 1px;
    border-color: blue;
    padding: 5px;
    margin: 5px;
}
#displayexample2 {
    border-style: solid;
    border-width: 1px;
    border-color: orange;
    padding: 5px;
}

</style>
<div id="displayexample2">
<div id="displayexample1">
elem
</div>
</div>

<div></div>
<br><br>
<select id="displayexample1select">
  <option>block</option>
  <option>inline</option>
  <option>inline-block</option>
  <option>none</option>
</select>

<script>
$("#displayexample1select").click(function(){
    var displayvalue = $("#displayexample1select").val();
    $("#displayexample1").css("display", displayvalue);
});
</script>

</html>






===== Pozicionálás =====



A position lehetséges értékei:

  * static (alapértelmezett)
  * relative
  * absolute
  * fixed
  * sticky (új)

==== Értékek ====

=== A static érték ===
Az alapértelmezett érték. A doboz a tartalom folyamban kerül elhelyezésre. 
Nem használhatók a left, right, top, bottom tulajdonságok. 

=== A relative érték ===
A doboz a statichoz hasonlóan kerül elhelyezésre tartalom-folyamban, de a
folyamhoz képest igazítható a helyzete. A következő elem ehhez képest fog
igazodni. 

=== Az absolute érték ===
A doboz a tartalom-folyamtól függetlenül kerül elhelyezésre. 
A következő elem nem veszi figyelembe ennek helyét.

=== A fixed érték ===
A doboz a tartalom-folyamtól függetlenül kerül elhelyezésre, 
hasonlóan az absolute értékhez. 
A következő elem nem veszi figyelembe ennek helyét.
A különbség az absoluthoz képest, hogy a doboz rögzítésre kerül
a képernyőhöz képest. A tartalom görgetéskor elgördül a dobozhoz
képest.







<code css>
div.osztalynev {
	position: absolute;
	top: 0;
	left: 0;	
}
</code>


=== sticky ===

A doboz a helyén marad, amíg el nem éri a felső részhez 5px-re.

<code css>
.doboz {
    width: 50px;
    height: 50px;
    background-color: blueviolet;
    position: sticky;
    top: 5px;    
}
</code>
==== Statikus példa ====

A következő CSS fájlban beállítottam top és left tulajdonságot is, 
de azok hatástalanok, ha a position: static érték van beállítva.

<code css static.css>
div.doboz {
    position: static;
    background-color: rgba(255, 255, 0, 0.9);
    top: -20px;
    left: 40px;
    display: inline-block;
    width: 200px;
}

</code>

<code html static.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="static.css">
</head>
<body>

<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="doboz">
Relatív poziciónálás
</div>

<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</body>
</html>

</code>


<html>
<iframe src="download/peldak/html5/static.html" width="400" sandbox></iframe>
</html>

Láthatjuk, hogy a szövegdoboz a helyén maradt.

==== Relative példa ====

<code css relative.css>
div.doboz {
    position: relative;
    background-color: rgba(255, 255, 0, 0.9);
    top: -20px;
    left: 40px;
    display: inline-block;
    width: 200px;
}
</code>

<code html relative.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="relative.html">
</head>
<body>

<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="doboz">
Relatív poziciónálás
</div>

<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</body>
</html>
</code>


A következő példa, beépített weblapon mutatja a relatívan 
pozicionált szöveget, amelyet kicsit fel, és jobbra eltoltunk.

<html>
<iframe src="download/peldak/html5/relative.html" width="400" sandbox></iframe>
</html>

Látható, hogy megmaradt az elemek folyamában a doboz helye,
és saját magához képest lett eltolva fel és jobbra irányba.



==== Absolute példa ====

Az absolute megegyezik a relatív beállításokkal, kivéve, hogy
honnan számítjuk a top vagy left értékeket. Az absolute 
beállításnál a top tulajdonságot a body elemhez képest számoljuk. 
A szöveget így kivettük a tartalomfolyamból. 

<code css absolute.css>
div.doboz {
    position: absolute;
    background-color: rgba(255, 255, 0, 0.9);
    top: 20px;
    left: 40px;
    display: inline-block;
    width: 200px;
}
</code>

<code html absolute.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="absolute.css">
</head>
<body>

<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="doboz">
Abszolút pozicionálás
</div>

<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</body>
</html>
</code>

<html>
<iframe src="download/peldak/html5/absolute.html" width="400" sandbox></iframe>
</html>

Görgetéskor jól látszik, hogy a szövegdoboz gördül a tartalommal együtt.

==== Fixed példa ====

A fixed megegyezik az absolute beállítással, kivéve, hogy 
az adott elem által létrehozott doboz a képernyőhöz lesz
rögzítve, azaz görgetéskor nem mozdul. 


<code css fixed.css>
div.doboz {
    position: fixed;
    background-color: rgba(255, 255, 0, 0.9);
    top: 20px;
    left: 40px;
    display: inline-block;
    width: 200px;
}
</code>


<code html fixed.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="fixed.css">
</head>
<body>

<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="doboz">
Relatív poziciónálás
</div>

<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</body>
</html>
</code>

Figyeljük meg, hogy görgetéskor a szövegdoboz kezdeti pozícióban marad.

<html>
<iframe src="download/peldak/html5/fixed.html" width="400" sandbox></iframe>
</html>


==== sticky ====

<html>
<iframe src="download/peldak/html5/sticky.html" width="400" sandbox></iframe>
</html>

==== Pozicionálás példa 2 ====

Középre igazított dobozt láthatunk az alábbi példában.

<code html kozepre.html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="kozepre.css" rel="stylesheet">
</head>
<body>


<div id="doboz1">körtekecskefaisvan</div>


</body>
</html>
</code>


<code css style.css>
div#doboz1 {
	color: blue;
	border: 1px solid green;
	width: 50%;
	left: 25%;
	position: absolute;
	top: 5%;
}
</code>

<html>
<iframe src="download/peldak/html5/kozepre.html" width="400" sandbox></iframe>
</html>




===== Lebegtetés =====

A lebegtetés vagy másként úsztatás a float tulajdonsággal lehetséges.






==== A float ====


Egy elemet jobbra vagy balra tudunk lebegtetni, vagy másként úsztatni. 

A float lehetséges értékei:
  * left
  * right
  * none



<code css>
div.osztalynev {
	float: right;
}
</code>

Lássunk egy példát:

<code html lebegtetes.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="lebegtetes.css">
</head>
<body>

<p>
    <img src="kerekpar.png" alt="kerékpár">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>


</body>
</html>
</code>


A CSS fájl:
<code css lebegtetes.html>
p img {
    float:left;
}
</code>

<html>
<iframe src="download/peldak/html5/lebegtetes.html" width="400" sandbox></iframe>
</html>

Ahogy láthatjuk a képet balra úsztatjuk a szövegben.

==== A clear ====

Az objektum nem úsztatható az előtte lévő objektumon hiába van beállítva float érték.

Lehetséges értékei:
| left | A balra úsztatás törlése |
| right | A jobbra úsztatás törlése |
| both | Egyik oldalra sem lehet úsztatni |
| none | Úsztatás mindkét oldalon megengedett |


Adott két bekezdés. Az első bekezdésben van egy úsztatott kép. 
Az úsztatás miatt a második bekezdés is körbefolyik a kép 
körül. 

<code html>
<p>
    <img src="haz.png" alt="kerékpár">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="ketto">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

</code>


<code css>
p img {
    float:left;
}
</code>


Az eredmény:

<html>
<iframe src="download/peldak/html5/lebeg.html" width="500" sandbox></iframe>
</html>


Most töröljük a második bekezdésről az úsztatást:
<code css leveg2.css>

p img {
    float: left;
}

.ketto {
    clear: left;
}
</code>


<html>
<iframe src="download/peldak/html5/lebeg2.html" width="500" sandbox></iframe>
</html>

===== Blokk elemek igazítása =====

Blokk elemek:
  * <h1>
  * <p>
  * <div>

A blokk elemek igazítását a jobb és bal margók megadásával végezhetjük el. 

Példa a középre igazításra:
<code css>
.kozepre
{
    margin-left:auto;
    margin-right:auto;
    width:70%;
    background-color:#b0e0e6;
}

</code>


A középre igazítást a beépített weblon is láthatjuk:
<html>
<iframe src="download/peldak/html5/block.html" width="400" sandbox></iframe>
</html>


Jobbra igazítás

<code css>
.jobbra
{
    position: absolute;
    right: 0;
    width: 300px;
    background-color: #b0e0e6;
}
</code>

Jobbra floattal:
<code css>
.jobbra
{
    float:right;
    width:300px;
    background-color:#b0e0e6;
}
</code>


===== Vágás =====

A láthatóság határainak beállítása.


Egy képet adott formára vágunk. Jelenleg téglalap alakúra, bár jelenleg nem támogatott más forma:
<code css>
img { 
    position: absolute;
    clip: rect(20px, 460px, 351px, 30px); 
} 
</code>

A vágást csak abszolút pozíciónálású elemen lehet végrehajtani.

Tetejét, jobboldalát, alját és baloldalát adjuk meg.


{{:oktatas:web:css:clip_bemutatasa.png|}}
===== Ál-osztályok =====
Az ál-osztályokkal néhány elemhez speciális effektusokat
rendelhetünk. 



==== Az ál-osztályok szintaxisa ====

<code css>
szelektor:ál-osztály {beállítás:érték;} 
</code>

De használható így is:
<code css>
szelektor.osztály:álosztály {beállítás:érték;}
</code>
==== Példa ====

<code css>
a:link {color:#FF0000;}      /* még nem látogatott linkek */
a:visited {color:#00FF00;}  /* látogatott linkek */
a:hover {color:#FF00FF;}  /* ha az egér felé megy */
a:active {color:#0000FF;}  /* aktuális linkek */
</code>


  * Megjegyzés
    * Az a:hover az a:link és az a:visited után kell következzen a CSS definícióban!
    * Az a:active az a:hover után kell következzen.
    * Az állosztályok nem kisbetű-nagybetű érzékenyek


=== Az összes ál-osztály ===

^ Szelektor ^ Példa ^ A példa leírása ^
| :link | a:link | Meg nem látogatott linkek. |
| :visited | a:visited | Látogatott linkek. |
| :active | a:active | Aktív linkek. |
| :hover | a:hover | link amely felett az egér tartózkodik. |
| :focus | input:focus | Az input elem, ha fókuszba került. |
| :first-letter	| p:first-letter | A p elem első betűje. |
| :first-line | p:first-line | A p elem első sora. |
| :first-child | p:first-child | A p elem közül az, amely a szülő első eleme. |
| :before | p:before | Minden p elem elé tartalmat szúr be. |
| :after | p:after | Minden p elem után tartalmat szúr be. |
| :lang(nyelv) | p:lang(hu) | Minden p elem a lang tulajdonsággal \\ és hu értékkel lesz beállítva. |


===== Átlátszatlanság =====

==== Az opacity tulajdonság ====

<code css>
.doboz {
    opacity: 0.6;
}
</code>

Elavult beállítás IE-ben:
<code css>
.doboz {
    filter: opacity(0.6);
}
</code>

<code css>
.doboz {
    height: 150px; 
    width: 220px;
    background-color: #ffffff;
    opacity: 0.6;
}
</code>




<html>
<style>
.doboz2831 {
    width: 300px;
    height: 225px;
    background-image: url(/download/peldak/css/tajkep01_300x225.jpg);
    border: 3px solid red;
}

.doboz2831 .belso {
    margin: 20px;
    padding: 20px;
    background-color: white;
    border: 3px solid blue;
    opacity: 0.5;
}

</style>

<div class="doboz2831">
    <div class="belso">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

<input type="range" id="num2831" min="0" max="100" value="50">
<input type="text" id="akt2831" min="0" max="1" value="0.5">

<script>
$("#num2831").change(function(){
    var num = $("#num2831").val();
    var op = num / 100;
    $(".belso").css("opacity", op);
    $("#akt2831").val(op);
});

$("#akt2831").change(function(){
    var num = $("#akt2831").val();
    var op = num;
    $(".belso").css("opacity", op);
    $("#akt2831").val(op);
});

</script>
<br><br><br><br>
</html>

==== Az rgba színek ====

Az rgba, az rgb kiterjesztése egy alfa csatornával, amely egy objektum átlátszóságát adja meg. 

Egy rgba szín megadása a következő szintaktika szerint történik. 

  rgba(piros, zöld, kék, alfa)

Az alfa paraméter egy szám 0.0 (teljesen átlátszó) és 1.0 (teljesen átlátszatlan) között. 


Példa:

<code css>
.doboz {
   background-color:rgba(255, 0, 0, 0.3);
} 
</code>

===== Táblázatok =====

Vegyünk egy táblázatot, amelyen szeretnénk beállításokat végezni.

<code html>
<table>
    <tr>
        <th>Név</th>
        <th>Település</th>
    </tr>
    <tr>
        <td>Peres János</td>
        <td>Szeged</td>
    </tr>
    <tr>
        <td>Timp István</td>
        <td>Szeged</td>
    </tr>
    <tr>
        <td>Lazi Ferenc</td>
        <td>Miskolc</td>
    </tr>
</table>
</code>

==== Táblázat beállítások ====


A szegély beállítása a táblázaton is értelmezhető művelet.
Ha viszont csak a table elemet jelölöm meg, akkor a cellák 
között nem lesz szegély. 
<code css>
table {
    border: 1px solid black;
}
</code>

<figure label>
{{:oktatas:web:css:tablazat_01.png|}}
<caption>Táblázat</caption>
</figure>

A következő példában a fejléc és az adatcellák között is
beállítom a szegélyt:
<code css>
table, th, td {
    border: 1px solid black;
}
</code>


<figure label>
{{:oktatas:web:css:tablazat_02.png|}}
<caption>Táblázat szegélyezése cellákkal</caption>
</figure>



Alapértelmezetten a cellák egymástól elszeparáltan
kis távolságra jelennek meg. Ha szeretem az egybeolvasztásukat
a border-collapse (kicsit lentebb többet is megtudhatunk erről) tulajdonságot kell beállítanunk:

<code css>
table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}
</code>


<figure label>
{{:oktatas:web:css:tablazat_03.png|}}
<caption>Cellák összeomlasztása</caption>
</figure>




^  A border-collapse lehetséges értékei  ^^
| collapse | A szegély összeomlik egyetlen vonallá, amikor lehetséges. (border-spacing és a empty-cells beállítások nem működnek) |
| separate | A szegély különálló (border-spacing és empty-cells beállítások működnek). Alapértelmezett |
| inherit | A border-collapse tulajdonság a szülő elemtől öröklött. |




A változatosság kedvéért a td cellák szélességét
állítsuk 100px-re, színüket orange színre.

<code css>
td {
    width: 100px;
    background-color: orange;
}
</code>


<figure label>
{{:oktatas:web:css:tablazat_04.png|}}
<caption>Színezett td elemek</caption>
</figure>
==== Cella közötti, cella és tartalma közötti tér ====

=== Cellák közötti tér ===

Ha a cellák összeomlasztása helyett, szeretnénk növelni
azok közötti teret, akkor használjuk a border-spacing 
tulajdonságot.

<code css>
table {
    border-spacing: 20px;
}
</code>


<figure label>
{{:oktatas:web:css:tablazat_05_cellakkozottitav.png|}}
<caption>A cellák között tér</caption>
</figure>


=== A cella és tartalma közötti tér ===

<code css>
 
td {
    padding: 30px;
}
</code>

A teljes CSS fájl jelenleg így néz ki:
<code css table.css>
table {
    border-spacing: 20px;
}

table, th, td {
    border: 1px solid black;
}

td {
    width: 100px;
    background-color: orange;
    padding: 30px;    
}

</code>




<figure label>
{{:oktatas:web:css:tablazat_06_cellabelulitav.png|}}
<caption>A cella és tartalma közötti távolság állítása</caption>
</figure>


==== Cella tartalmának igazítása ====

<code css>
td {
    text-aling: center;
}
</code>

==== Oszlop stílusok ====

col vagy colgroup esetén használható tulajdonságok:

  * background
  * border
  * visibility
  * width


Kerülő megoldás:

<code>
th:first-child, td:first-child {
    color: white;
    background: blue;
}
th:nth-child(2), td:nth-child(2) {
    color: yellow;
    background: braun;
}
th:last-child, td:last-child {
    font-weight: bold;
    background: orange;
}
</code>

<code>
<table>
    <tr>
        <th>#</th>
        <th>Név</th>
        <th>Fizetés</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Erős István</td>
        <td>342</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Rege Zoltán</td>
        <td>394</td>
    </tr>
</table>
</code>

==== Sorok csíkozása ====

<code css>
tr:nth-child(odd) {
    background: orange;
}

tr:nth-child(even) {
    background: gold;
}
</code>


{{:oktatas:web:css:tablazat_07_csikozas.png?400|}}
===== Z-index =====



<code html>

<div id="egy" >z-index: 1</div>
<div id="ketto">z-index: 2</div>
<div id="harom">z-index: 3</div>

</code>



<code css>
#egy {
    position: relative; left: 0px; top:0px; width:100px; height:100px; 
    background: #f00;
    z-index:3;
}

#ketto {
    position: relative; left: 50px; top:-50px; width:100px; height:100px; 
    background: #0f0;
    z-index:2;
}

#harom {
    position: relative; left: 100px; top:-100px; width:100px; height:100px; 
    background: #00f;
    z-index:1;
}
</code>



<html>

<div id="egy" style="position: relative; left: 0px; top:0px; width:100px; height:100px; background: #f00;z-index:3;">
z-index: 3
</div>

<div id="ketto" style="position: relative; left: 50px; top:-50px; width:100px; height:100px; background: #0f0;z-index:2;">
z-index: 2
</div>

<div id="harom" style="position: relative; left: 100px; top:-100px; width:100px; height:100px; background: #00f;z-index:1;">
z-index: 1
</div>
<div style="position: static;"></div>

</html>


<html>

<div id="egy" style="position: relative; left: 0px; top:0px; width:100px; height:100px; background: #f00;z-index:1;">
z-index: 1
</div>

<div id="ketto" style="position: relative; left: 50px; top:-50px; width:100px; height:100px; background: #0f0;z-index:2;">
z-index: 2
</div>

<div id="harom" style="position: relative; left: 100px; top:-100px; width:100px; height:100px; background: #00f;z-index:3;">
z-index: 3
</div>
<div style="position: static;"></div>

</html>

Az utóbbi példában a dobozok z-indexét megfordítottuk:

<code css>
#egy {
    position: relative; left: 0px; top:0px; width:100px; height:100px; 
    background: #f00;
    z-index:1;
}

#ketto {
    position: relative; left: 50px; top:-50px; width:100px; height:100px; 
    background: #0f0;
    z-index:2;
}

#harom {
    position: relative; left: 100px; top:-100px; width:100px; height:100px; 
    background: #00f;
    z-index:3;
}
</code>


===== Mértékegységek =====


^  Relatív hosszmérték  ^^
|  em  | A releváns karakter mérete. (szülőelemtől örökölt) |
|  ex  | A releváns karakter x-magassága |
|  %  |  |
|  ch  | A "0" (zero) szélességhez relatívan  |
|  rem  | A root elem fontméretéhez relatívan |
^  A Viewporthoz kapcsolódó mértékegységek  ^^
|  vw  | A viewport szélességének 1%-hoz relatívan |
|  vh  | A viewport magasságának 1%-hoz relatívan |
|  vmin  | A viewport kisebb dimenziójához képest 1%-al |
|  vmax  | A viewport nagyobb dimenziójához képest 1%-al |

A vmax értéket az Inernet Exploler a nem általános vm névvel támogatja,
a Safari nem támogatja.


^  Abszolút és mégis relatív hosszmérték  ^^
|  px  | képpont; eszközfüggő |

A pixel is relatív hosszmérték, hiszen nagyobb felbontású 
kijelzőkön, nyomtatókon az eszköz pixelmérete kisebb lesz, mint 1 pixel.
Reszponzív weboldalak esetén a relatív mértékegységek használata
ajánlott, kivéve a pixel. Ezért sokan az abszolút hosszértékhez sorolják,
hiszen ha valamit beállítok 100 pixeles méretre, abból nem lesz rugalmas doboz. 

{{:oktatas:web:css:egy_pixel.png|}} ((A rajzot a W3C oldala ihlette: https://www.w3.org/TR/css-values-3/))




^  Abszolút hosszérték  ^^
| in | inch; hüvelyk; 25,4 mm |
| cm | centiméter |
| mm | milliméter |
| pt | pt; pont; 1/72 hüvelyk; kb.: 0,352 mm |
| pc | pica; 12 pont, 3/18 hüvelyk; kb.: 4,23 mm |


Példák:
<code css>
h1 {
    margin: 0.3in;
    line-height: 2cm;
    word-spacing: 5mm;
    font-size: 10pt;
}
</code>



^  Mikor ajánlott hasznli  ^^^^
^ ^  Ajánlott  ^  Alkalmanként  ^  Nem ajánlott  ^
^ Képernyő | px, em, % | ex |  mm, cm, in, pt, pc |
^ Nyomtatott | mm, cm, in, pt, pc, em, % | px, ex | |


Újabb mértékegységek:

|  1vw  | 1%-a a viewport szélességének  |
|  1vh  | 1%-a a viewport magasságának  |
|  1vmin  | 1%-a a viewport rövidebbik oldalának |
|  1vmax  | 1%-a a viewport hosszabbik oldalának |

==== em ====


A szülőelem betűméretéhez képest.

Ha például a body elemet beállítjuk 16px-re, a benne található "p" elem betűmérete 1em beállítás esetén 16 pixel lesz. 

<code css>
body {
  font-size: 16px; /* Az alapértelmezett betűméret beállítása */
}
p {
  font-size: 2em;
}
</code>


  * 1em   16px
  * 2em   32px
  * 0.5em 8px


==== rem ====

A rem "r" betűje a root szóból van. A root elem betűnagyságára utal.

Ha az alapértelmezett betűnagyság 16px vagy erre állítjuk be HTML gyökér elemét,
akkor 1rem az egyenlő 16px-el.

<code css>
html {
  font-size: 16px; /* Alapértelmezett betűméret beállítása */
}
</code>

2rem ebben az esetben 32px. 0.5rem 8px.


===== At-szabályok =====

<code css>
@import "masik.css";
</code>

Az import sorok meg kell, hogy előzzék az összes szabályt.

Az import segítségével, más CSS fájlokat emelhetünk a jelenlegihez. 


==== Média beállítások ====

Az at-szabályok segítségével médiafüggő beállításokat hozhatunk létre. 

<code css>
/* A szöveg alapértelmezett színe */
body {
  background-color: blue;
}

/* 900px vagy kisebb kijelző esetén */
@media screen and (max-width: 900px) {
  body {
    background-color: green;
  }
}

/* Képernyőn és 700px vagy annál kisebb kijelzőn */
@media screen and (max-width: 700px) {
  body {
    background-color: yellow;
  }
}

</code>
===== Függelék =====

==== Értékek ====

=== Egész és valós számok ===

Az egész számok 0-9 közötti számjegyek. 

A valós számok lehetnek egész számok, 0 vagy több számjegy, amelyet 
egy pont, azt pedig újabb számjegyek követnek. 

Az egész és a valós számokat megelőzhetik (-) vagy (+) karakterek.


=== Relatív hosszértékek ===

  * em: a releváns karakter mérete
  * ex: a releváns karakter x magassága
  * px: pixel vagy képpont

Például:
<code css>
p {
  font-size: 1em
}
</code>


=== Abszolút hosszérték ===

  * cm: centiméter
  * mm: milliméter
  * in: inch - hüvelyk 25,4 mm
  * pc: pica - 12 pont, vagyis 3/18 hüvelyk, kb. 4,23 mm
  * pt: point - 1/72 hüvelyk, kb. 0,352 mm


=== Százalékérték ===

<code css>
p {
  font-size: 120%;
}
</code>

==== Számlálók ====

=== Fejezetek számozása ===

<code html>
<h2>A haladás előnye</h2>
<p>Lorem ipsum dolor est amet</p>

<h2>A haladás veszélyei</h2>
<p>Lorem ipsum dolor est amet</p>

<h2>Érintkezés</h2>
<p>Lorem ipsum dolor est amet</p>

<h2>Társalgás</h2>
<p>Lorem ipsum dolor est amet</p>
</code>

<code css>
h2 {
  counter-increment: section;
}
h2:before {
  content:counter(section, upper-roman)". ";
}
</code>



<html>
<style>
#container8425 h2 {
  counter-increment: section;
}
#container8425 h2:before {
  content:counter(section, upper-roman)". ";
}
</style>

<div id="container8425">
    <h2>A haladás előnye</h2>
    <p>Lorem ipsum dolor est amet</p>

    <h2>A haladás veszélyei</h2>
    <p>Lorem ipsum dolor est amet</p>

    <h2>Érintkezés</h2>
    <p>Lorem ipsum dolor est amet</p>

    <h2>Társalgás</h2>
    <p>Lorem ipsum dolor est amet</p>
</divy
</html>



=== Bekezdések számozása ===


<code css>
p {
  counter-increment: par-num;
}
p:before {
  content:counter(par-num, upper-roman)".";
}
</code>

Fejezetenként újraszámozva:
<code css>
p {
  counter-increment: par-num;
}
h2 {
  counter-reset: par-num;
}
p:before {
  content:counter(par-num, upper-roman)".";
}
</code>


Bekezdések számozása:
<code html>
  <p>Első</p>  
  <p>Második</p>
</code>

<code css>
body {
  counter-reset: section; 
}
p:before {
  counter-increment: section;
  content: counter(section)".) "; 
}
</code>


<html>
<style>
#container9842 p {
  counter-increment: par-num;
}
#container9842 h2 {
  counter-reset: par-num
}
#container9842 p:before {
  content: counter(par-num, upper-roman)". ";
}
</style>

<div id="container9842">
   <h2>A haladás előnye</h2>
   <p>Lorem ipsum dolor est amet</p>
   <p>Lorem ipsum dolor est amet</p>
   <p>Lorem ipsum dolor est amet</p>

   <h2>A haladás veszélyei</h2>
   <p>Lorem ipsum dolor est amet</p>
   <p>Lorem ipsum dolor est amet</p>
   <p>Lorem ipsum dolor est amet</p>
</div>

</html>



==== Átlátszó szegély ====

Szükséges hozzá valamilyen heterogén háttér. Például a GIMP-ben mintával kiöntött kis kép.

<code css>
szelektor {
   border-radius: 5px;    
   box-shadow:
        0 2px 2px rgba(0,0,0,0.2),        
        0 1px 5px rgba(0,0,0,0.2),        
        0 0 0 12px rgba(255,255,255,0.4);
}
</code>


==== Számított érték ====

A calc() egy CSS függvény, amely paraméterként a következőket várja: <length>, <frequency>, <angle>, <time>, <number> vagy <integer>.

A calc() segítségével egy CSS tulajdonság értéke számítható ki. A calc() függvényen belül lehet egy másik calc() függvény, vagyis
egymásba ágyazhatók. 

Szintaktika:
  calc(kifejezés)

Használható operátorok:

| + | Összeadás |
| - | Kivonás |
| * | Szorzás |
| / | Osztás |

Használatára példa:
<code css>
  width: 90%;               /* ha egy böngésző nem támogatja a calc() függvényt */
  width: calc(100% - 80px);
</code>


<code css>
  width: 130px;             /* ha egy böngésző nem támogatja a calc() függvényt */
  width: calc(100% / 6);
</code>


<code css>
  width: 98%;               /* ha egy böngésző nem támogatja a calc() függvényt */
  width: calc(100% - 1em);
</code>


Konkrét példa:
<code html index.html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Oszlopok</title>
<style>
#oszlopdoboz {
	width: 200px;
	height: 200px;
}
.col {
	width: calc(100% / 3);
	width: -moz-calc(100% / 3);
	height: 200px;
	float:left;   
}
#col1 {
	background-color: blue;	
}
#col2 {
	background-color: yellow;
}
#col3 {
	background-color: #bbbbbb;
}

</style>
</head>
<body>

<div id="oszlopdoboz">
<div id="col1" class="col"></div>
<div id="col2" class="col"></div>
<div id="col3" class="col"></div>
</div>

</body>
</html>
</code>











<html>

<style>
#oszlopdoboz {
	width: 200px;
	height: 200px;
}
.col {
	width: calc(100% / 3);
	width: -moz-calc(100% / 3);
	height: 200px;
	float:left;   
}
#col1 {
	background-color: blue;	
}
#col2 {
	background-color: yellow;
}
#col3 {
	background-color: #bbbbbb;
}

</style>

<div id="oszlopdoboz">
<div id="col1" class="col"></div>
<div id="col2" class="col"></div>
<div id="col3" class="col"></div>
</div>


</html>




==== Függőleges igazítás ====

Tekintsük át mit tehetünk egy fix méretű 100x100 pixeles dobozban, a függőleges igazításért.

Amit szoktak ajánlani az a display: table-cell és vertical-align: middle használata. Ez azonban nem minden böngészőben működik az elvártaknak megfelelően, hiszen a vertical-align eredetileg táblázat celláján belüli igazításra és szövegközi igazításokra tervezték.

=== A vertical-align használata ===


<code css>
#doboz {
	background-color: blue;
 	color: white;
        height: 100px;
	width: 100px;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border-radius: 5px;
}
</code>

Ügyeljünk, hogy be legyen állítva a "display: table-cell;" tulajdonság.

<code html>
<div id="doboz">
  alma
</div>
</code>



<html>
<style>
#dobozFuggoIgazitashoz {
	background-color: blue;
 	color: white;
        height: 100px;
	width: 100px;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border-radius: 5px;
}
</style>

<div id="dobozFuggoIgazitashoz">
  alma
</div>

</html>

Működik: Chrome verzió: 31, Firefox 25.0.1

=== Belső 50%-os doboz  ===


A következő példában a szöveget egy belső dobozba teszem és ennek a doboznak állítok 50%-os felső távolságot.
Így persze nem lesz középen, de ha kivonom a felét, azaz 0.5em-et akkor majdnem a felénél lesz. 

Ez persze csak akkor működik, ha szöveg egy soros. Ha már két sor van, akkor a 1em mértéket kell kivonni.
Szükségünk lesz a calc() függvényre is, amelyet esetleg régebbi böngészők még nem támogatnak. 



<code css>

#kulso {
	background-color: blue;
	color: white;
        height: 100px;
	width: 100px;	
	border-radius: 5px;
}
#doboz {
	background-color: blue;
	position:relative;
	top:calc(50% - 0.5em);        
        text-align: center;
}
</code>

<code html>
<div id="kulso">
  <div id="doboz">
    alma
  </div>
</div>
</code>



Működés:
<html>
<br><br>
<style>
#kulsoDobozFuggoIgazitashoz2 {
	background-color: blue;
	color: white;
        height: 100px;
	width: 100px;	
	border-radius: 5px;
}
#dobozFuggoIgazitashoz2 {
	background-color: blue;
	position:relative;
	top:calc(50% - 0.5em);        
        text-align: center;
}
</style>
<div id="kulsoDobozFuggoIgazitashoz2">
  <div id="dobozFuggoIgazitashoz2">
    alma
  </div>
</div>

</html>

=== Span elem 50%-al ===


Talán a legkorrektebb megoldás ha span elemként kezeljük a középre igazítandó szöveget, 
majd mellé teszünk egy másik span elemet, amelynek a magasságát 50%-ra állítjuk be.
Pixelre még így sincs pont középen, ezért a középre igazítandó span elemen beállítom
a vertical-align: middle értéket.

Kódolva:

<code css>
#kulso {
	background-color: blue;
	color: white;
        height: 100px;
	width: 100px;	
	border-radius: 5px;
	text-align: center;
}
#doboz {
	background-color: blue;
}
.hely {
	display: inline-block;
	height: 50%;
	width: 0;
	margin-right: -4px;
}
</code>

<code html>
<div id="kulso">
  <span class="hely"></span>
  <span id="doboz">alma</span>  
</div>
</code>


Működés:
<html>
<style>
#kulsoDobozFuggoIgazitashoz3 {
	background-color: blue;
	color: white;
        height: 100px;
	width: 100px;	
	border-radius: 5px;
	text-align: center;
}
#dobozFuggoIgazitashoz3 {
	background-color: blue;
}
.hely {
	display: inline-block;
	height: 50%;
	width: 0;
	border-width: 0;
	margin-right: -4px;
}
</style>
<div id="kulsoDobozFuggoIgazitashoz3">
  <span class="hely"></span>
  <span id="dobozFuggoIgazitashoz3">alma</span>  

</div>
</html>

Ha vízszintesen is középre igazítunk mint a példában, a span elem extra margója miatt nem
lesz pixelre pontosan középen. Ezen segíthetünk, ha margin-right: -4;-t állítunk be, 
vagy ha lehet a szülődoboz számára font-size:0; értéket állítunk.

=== Transzformáció ===

<code css>
#kulso {
	background-color: blue;
	color: white;
        height: 100px;
	width: 100px;	
	border-radius: 5px;
	text-align: center;
	position: relative;
}
#doboz {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
</code>


<code html>
<div id="kulso">
    <div id="doboz">
        alma
    </div>
</div>
</code>



<html>
<style>
#kulsoDobozFuggoIgazitashoz4 {
	background-color: blue;
	color: white;
        height: 100px;
	width: 100px;	
	border-radius: 5px;
	text-align: center;
	position: relative;
}
#belsoDobozFuggoIgazitashoz4 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
</style>
<div id="kulsoDobozFuggoIgazitashoz4">
<div id="belsoDobozFuggoIgazitashoz4">
alma
</div>
</div>
</html>


=== Flex doboz ===

<code html>
<div class="doboz">
alma
</div>
</code>

<code css>
.doboz {
    border-radius: 5px;
    width: 100px;
    height: 100px;
    background-color: blue;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
</code>




<html>
<style>
.doboz {
    border-radius: 5px;
    width: 100px;
    height: 100px;
    background-color: blue;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
<div class="doboz">
alma
</div>
</html>




=== Rugalmas magasság esetén ===


<note tip>
Ha doboz magassága nem fix méretű, vagyis a tartalomtól függ, akkor használható 
a padding felül-alul beállítva.
</note>


<code css>
.doboz {
   padding: 50px 0;
}
</code>


=== Sor magasság ===

Egy soros szöveg esetén a sor magasságát beállíthatjuk a doboz magasságára.

<code css>
.doboz {
    line-height: 100px;
}
</code>

==== Szövegdobozok egymás mellett ====

Dobozok egymás mellett:

<code css>
.dobozEgyDotted {
 	color: #656565;
    height: 200px;
	width: 150px;
	display: table-cell;
	vertical-align: middle;
	text-align: justify;
	font-size: 11px;
	border: 1px dotted #656565;
	padding: 10px;
}

.dobozKetto {
        height: 200px;
	width: 10px;
	display: table-cell;
}
</code>

<code html>
    <div class="dobozEgyDotted">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam condimentum blandit sapien non volutpat.
    Vivamus posuere massa euismod libero varius et mollis velit aliquam. Donec ultrices placerat consequat.
    Phasellus sit amet est non lorem vestibulum placerat iaculis vitae justo.
    </div>

    <div class="dobozKetto"></div>

    <div class="dobozEgyDotted">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam condimentum blandit sapien non volutpat.
    Vivamus posuere massa euismod libero varius et mollis velit aliquam. Donec ultrices placerat consequat.
    Phasellus sit amet est non lorem vestibulum placerat iaculis vitae justo.
    </div>

</code>


Működés közben:
<html>
<style>
.dobozEgyDotted {
	color: #656565;
	height: 200px;
	width: 150px;
	display: table-cell;
	vertical-align: middle;
	text-align: justify;
	font-size: 11px;
	border: 1px dotted #656565;
	padding: 10px;
}

.dobozKetto {
        height: 200px;
	width: 10px;
	display: table-cell;
}

</style>

<div class="dobozEgyDotted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam condimentum blandit sapien non volutpat.
Vivamus posuere massa euismod libero varius et mollis velit aliquam. Donec ultrices placerat consequat.
Phasellus sit amet est non lorem vestibulum placerat iaculis vitae justo.
</div>

<div class="dobozKetto"></div>

<div class="dobozEgyDotted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam condimentum blandit sapien non volutpat.
Vivamus posuere massa euismod libero varius et mollis velit aliquam. Donec ultrices placerat consequat.
Phasellus sit amet est non lorem vestibulum placerat iaculis vitae justo.
</div>

</html>


==== Extra margó ====

A li és a span elemek alapértelmezésként 2 pixeles extra margót kapnak.
Ez kényelmetlen lehet, ha például ebből szeretnék menüt készíteni, és
nem szeretnénk azokat az extra margókat.

Az extra margók akkor jelentkeznek a fenti elemeknél, ha azokat
inline-block elemmé tesszük, és szeretnénk elkerülni a float:left
beállítást. Mi tehetünk?

=== Negatív jobb margó ===

Az egyik lehetőség az igazítandó elemek számára egy -4 pixeles jobb-margót
állítása.

<code css>
span {
  background-color: navy;
  color: white;
  padding: 4px;
  margin-right: -4px;
}
</code>


<code html>
  <span>Egy</span>
  <span>Kettő</span>
</code>





<html>
<style>
span.extraMargoAz {
  background-color: navy;
  color: white;
  padding: 4px;
  margin-right: -5px;
  display: inline-block;
}
</style>

  <span class="extraMargoAz">Egy</span>
  <span class="extraMargoAz">Kettő</span>
</html>

Azért nem a legjobb megoldás, mert a Firefox újabban 5px extra margót használ (2015).



=== jQuery megoldása ===

Eltávolíthatjuk egy jQuery kóddal:
<code html>
<p class="removeTextNodes">
    <span> Foo </span>
    <span> Bar </span>
</p>
</code>
<code javascript>
$('.removeTextNodes').contents().filter(function() {
    return this.nodeType === 3;
}).remove();
</code>

=== Szülő elem fontmérete ===

Hatékony megoldás, ha a szülőelem fontméretét 0 értékre állítom,
a span vagy a li elem méretét pedig a kívántra. Alapértelmezett
méret a böngészőkben 16px.


<code html>
<div id="ez">
    <span>egy</span>
    <span>kettő</span>
    <span>három</span>
</div>
</code>

<code css>
#ez {
  font-size: 0;
}
#ez span {
  font-size: 16px; 
}
</code>

=== Flex doboz használata ===

Rugalmas méretű dobozokkal is megoldható.

<code html>
<div id="amaz">
    <span>egy</span>
    <span>kettő</span>
    <span>három</span>
</div>
</code>


<code css>
#amaz {
   display: flex;
}
</code>

Régebbi típusú böngészők esetén:
| -webkit-box | -moz-box | -ms-flexbox | -webkit-flex |

<code css>
display: flex;         /*  Opera, Firefox, Chrome */
display: -moz-box;     /* Firefox */
display: -webkit-box;  /* iOS, Safari, Chrome */
display: -webkit-flex; /* Későbbi Chrome */
display: -ms-flexbox;  /* IE 10 */
</code>

==== inline-block elemek közötti white-space ====

Ha van két inline-block elemünk, és azok két külön sorban vannak, közöttük 
lesz egy white-space karakter. Ha a két inline-block dobozt közvetlenül
egymás mell szeretnénk tenni, ez nem várt hatást eredményez:


<html>
<style>
.inlineBlockWhiteSpacePrblem1 div {
    display: inline-block;
    background-color: navy;
    padding: 3px;
    color: white;
}
</style>

<div class="inlineBlockWhiteSpacePrblem1">
    <div>egy</div>
    <div>kettő</div>
    <div>három</div>
</div>
<br><br><br><br><br>
</html>

Többféle megoldás létezik. Lehet float vagy flex dobozt használni. 
Itt most két olyan megoldást nézünk meg, ahol megmaradunk az inline-block
tulajdonság mellett. 


=== A szülő elem fontmérete ===

Az egyik megoldás lehet, ha a szülő elem fontméretét 0-ra állítjuk. 

<code html>
<div class="doboz">
    <div>egy</div>
    <div>kettő</div>
    <div>három</div>
</div>
</code>



<code css>
.doboz {
   font-size: 0;
}
.doboz div {
    display: inline-block;
    background-color: navy;
    padding: 3px;
    color: white;
    font-size: 1rem;
}
</code>


<html>
<style>
.inlineBlockWhiteSpacePrblem2 {
    font-size: 0;
}
.inlineBlockWhiteSpacePrblem2 div {
    display: inline-block;
    background-color: navy;
    padding: 3px;
    color: white;
    font-size: medium;
}
</style>

<div class="inlineBlockWhiteSpacePrblem2">
    <div>egy</div>
    <div>kettő</div>
    <div>három</div>
</div>
<br><br><br><br><br>
</html>


=== Megjegyzések beszúrása ===

Beszúrhatunk a white-space helyére üres megjegyzéseket.

<code html>
<div class="doboz">
    <div>egy</div><!--
    --><div>kettő</div><!--
    --><div>három</div>
</div>
</code>

<html>
<style>
.inlineBlockWhiteSpacePrblem3 div {
    display: inline-block;
    background-color: navy;
    padding: 3px;
    color: white;
}
</style>

<div class="inlineBlockWhiteSpacePrblem3">
    <div>egy</div><!--
    --><div>kettő</div><!--
    --><div>három</div>
</div>
<br><br><br><br><br>
</html>

===== Külső hivatkozások =====

  * http://www.w3.org/International/questions/qa-css-charset
  * http://caniuse.com (Kompatibilitási összehasonlítások)
  * http://www.sitepoint.com/css-position-sticky-introduction-polyfills/ (Pozicionálás sticky példa; csak Firefox)