107/80

kor.css .circle{ position:absolute; width:100px; height:100px; border-radius:50px; background:green; left:100px; } .circle.middle{ background:red; left:200px; } .circle.right{ background:blue; left:200px; }

B IT M A N

Körvonalak  Kereten belül, az elem előtt (felett)  Minden vonal mindig egyforma – p{ outline-width: 2px; outline-style: solid; outline-color: #000000; } – szélesség, stílus, szín – p { outline: 2px solid #000000; }

107/81

B IT M A N

Margók  Egyforma – body { margin: 0px; }

 Különböző – p { margin: 0px 1px 2px 3px; } – Felül, jobbra, alul, bal oldalon

 Csak kétféle – body { margin: 10px 0px; } – Függőleges, vízszintes

 Profi p { margin-left: 3px; margin-top: 0px; margin-right: 1px; margin-bottom: 2px; } 107/82

B IT M A N

Kitöltés  Egyforma – body { padding: 5px; }

 Különböző – p { padding: 0px 1px 2px 3px; } – Felül, jobbra, alul, bal oldalon

 Csak kétféle – body { padding: 10px 0px; } – Függőleges, vízszintes

 Profi p { padding-left: 3px; padding-top: 0px; padding-right: 1px; padding-bottom: 2px; } 107/83

B IT M A N

Listaelemek (felsorolás, számozás)  ul, ol (dd)

ul { list-style-type: disc } ul { list-style-position: inside } ul { list-style-image: url(pont.gif) } ul { list-style: square inside url(pont.gif) } – Stílus választék: none, disc, circle, square, decimal, decimalleading-zero, lower-roman, upper-roman, lower-alpha, upperalpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha – Pozíció: inside, outside 107/84

B IT M A N

Listaelemek (példa) Forráskód

<style type="text/css"> ul { list-style-type: circle; list-style-position: inside; } ol { list-style-type: upper-roman; list-style-position: outside; }

• Retek
• Paprika
• Hagyma
• Karfiol

1. Retek
2. Paprika
3. Hagyma
4. Karfiol

107/85

www.bitman.hu

B IT M A N

Pozícionálás  Elemek helyzetének megadása

– h1 { position: static; } – Választék: static – ahol tartunk, relative – ahol tartunk eltolással, absolute – a dokumentumban rögzítve, fixed – a képernyőhöz rögzítve – #fejlec { position: relative; top: -15px; left: 10px; } – #lablec { position: absolute; bottom: 10px; right: 10px; } – #cimke { position: fixed; bottom: 10px; right: 10px; }

107/86

B IT M A N

Elhelyezkedés – méret height – top, bottom, height bottom – left, right, width – Ha kettőt megadunk, a harmadik kiadódik!

#szoveg { position: absolute; top: 10px; left: 10px; bottom: 10px; right: 10px; background: #eeeeee; } 107/87

width

right

top

left

 A pozíció és a méret összefügg

#szoveg { position: absolute; top: 10px; left: 10px; height: 380px; width: 780px; background: #eeeeee; }

B IT M A N

Méretkorlátok  Helyfoglaláshoz, vagy kilógás megakadályozására

– #content { min-height: 500px; } – Választék: min-height, max-height, min-width, maxwidth  Túlcsordulás – .box { width: 200px; height: 200px; overflow: auto; } – Választék: visible – a túllógás is látszódjon, hidden – a kilógás elrejtése, scroll – görgetősáv használata, auto – görgetősáv, de csak ha kell

107/88

B IT M A N

Pozícionálás példák 1. css

www.bitman.hu

#div-1 { position: static; }

Alapértelmezetten minden elem static pozíciójú, ami azt jelenti, hogy a beírt HTML kód sorrendjének megfelelően jelennek meg az elemek.

107/89

B IT M A N

Pozícionálás példák 2. css

www.bitman.hu

#div-1 { position: relative; top:20px; left:-40px; }

Ahol a beírt HTML kódnak megfelelően megjelenne az elem, ahhoz képest a megadott eltolással jelenik meg.

107/90

B IT M A N

Pozícionálás példák 3. css

www.bitman.hu

#div-1a { position: absolute; top:0; right:0; width:200px; }

A megjelenés nem függ a HTML kód sorrendjétől, az objektum a böngésző ablakának előírt pozíciójába kerül.

107/91

B IT M A N

Pozícionálás példák 4. css

www.bitman.hu

#div-1 { position: relative; } #div-1a { position: absolute; top:0; right:0; width:200px; }

Ha a div-1 relatív pozíciójú, minden elem a div-1-en belül hozzá igazodik. Így az abszolút pozíciójú div-1a a div-1 jobb felső sarkához igazítódik. 107/92

B IT M A N

Pozícionálás példák 5. css #div-1 { position: relative; } #div-1a { position: absolute; top:0; right:0; width:200px; } #div-1b { position: absolute; top:0; left:0; width:200px; }

107/93

www.bitman.hu

Az abszolút pozícionálás előnye, hogy a kódbeli sorrendtől eltérően jeleníthetők meg az egyes elemek. A példában a div-1 elemet elfedik az abszolút pozíciójú elemek.

B IT M A N

Pozícionálás példák 6. css

www.bitman.hu

#div-1a { float: left; width:200px; }

A div-1a elem illeszkedik (lebeg) a div-1 elem bal széléhez, a div1b elem szövege pedig „körbefolyik” körülötte. Főleg képeknél használatos, de működik más elemek (szövegek, táblázatok…) esetén is.

107/94

B IT M A N

Pozícionálás példák 7. css

www.bitman.hu

#div-1a { float: left; width:190px; } #div-1b { float: left; width:190px; } #div-1c { clear: both; }

A lebegő elemek után törölhető a lebegés (clear), az ezt követő elemek ismét a teljes szélességet elfoglalhatják.

107/95

B IT M A N

Rétegek  A mélységet akkor tudjuk értelmezni a

Z

X

monitor sík kijelzőjén, ha több elem Y egymásra kerül, egymást elfedi.  Ekkor az fogja elfedni a másikat, mely előrébb, "közelebb" van a felhasználóhoz, vagy másként mondva, "feljebb" van a z tengelyen.  A z tengelyen való elhelyezkedést a z-index tulajdonság

segítségével, egy egész számot használva adhatjuk meg.  Az alapértelmezett érték 0.  Ha más értéket adunk meg, a nagyobb számmal bíró elem kerül közelebb a felhasználóhoz. 107/96

B IT M A N

Rétegek Forráskód

BitMan

www.bitman.hu

 1. réteg: háttérkép  2. réteg: B betű  3. réteg: BitMan

107/97

B IT M A N

CSS példák (1) Forráskód

<style type="text/css"> h1 {font-family:Arial; font-size:28pt; color:red;} p {font-size:20pt; line-height:28pt; color:green; text-align:justify;}

Csodás napunk van.

Süt a nap, a hőmérséklet 23 fok, Celsiusban. Néhány bárányfelhő béget a csodás égszínkék égbolton, a madarak szerelmesen csicseregnek a zöld levelű fák ágain.

107/98

B IT M A N

107/99

B IT M A N

CSS példák (2) Forráskód

<style type="text/css"> * {font-size:12pt} i {color:blue} i, b {font-size:18pt} h1 i {color:red} h1 > b {color:green} i + b {color:yellow}

Ma csodás napunk van.

Holnap is csodás nap lesz. 107/100

www.bitman.hu

B IT M A N

CSS példák (3) Forráskód

<style type="text/css"> h3.red { font-family: Arial; font-size: 10pt; color:red} h3.green { font-family: Times New Roman; font-size: 14pt; color:green}

Csodás napunk van.

Csodás napunk van.

www.bitman.hu

107/101

B IT M A N

CSS példák (4) Forráskód

<style type="text/css"> p: {font-size: 12pt; line-height: 12pt; } p:first-letter {font-size: 300%; color: red;} p#dd:first-letter {float:left;}

A sor első betűje háromszor akkora lesz, mint a többi betű. A float: left tulajdonság nélkül az első betű "kilóg" az első sorból.

A sor első betűje itt is háromszor akkora lesz, mint a többi betű, de a float: left tulajdonságot megadva a szöveg "körülöleli" az első betűt.

107/102

www.bitman.hu

p: first-letter: minden

elem első betűje.

B IT M A N

CSS példák (5) Forráskód

<style type="text/css"> p: first-child {background: yellow;} p + p {background: lightgreen;}

Első bekezdés.

Második bekezdés.

Harmadik bekezdés.

Ötödik bekezdés.

Hatodik bekezdés.

Hetedik bekezdés.

107/103

www.bitman.hu

p: first-child: minden olyan

elem, mely a szülőnek az első gyermeke. p + p: minden olyan

elem, mely közvetlenül egy másik

elem után van.

B IT M A N

www.bitman.hu

CSS példák (6) Forráskód

<style type="text/css"> p {padding:5px;margin:10px;} .fontos {color:red;} p.szegely {border:1px solid black;} h1.szegely {border:2px dotted blue;}

Címsor

Piros színű bekezdés, mert a fontos osztályba tartozik.

Fekete szegély van a bekezdésen, mert a szegely osztályba van sorolva.

A bekezdés piros színű és fekete szegéllyel ellátott mert a szegely és fontos osztályba is be van sorolva.

Címsor

A fenti címsor piros, mert be van sorolva a fontos osztályba. Szegélye is van, mert be van sorolva a szegely osztályba. Azonban más a szegélye, mint a bekezdésnek, mert a

elemre más tulajdonságokkal hoztuk létre a szegely nevű osztályt.

Egy elem egyszerre több osztályba is tartozhat! 107/104

B IT M A N

107/105

B IT M A N

Felhasznált irodalom  Weblabor.hu: A fejlesztői forrás  W3schools.com: The world’s largest web    

107/106

development site Rimár Miklós: Html, css szakdolgozat KBB TE – Ruff Laura-Ildikó: Web programozás – elektronikus jegyzetek http://www.barelyfitz.com/screencast/htmltraining/css/positioning/ Kromesch Sándor: Egyszerűen Web

B IT M A N

VÉGE 107/107

B IT M A N