Megjelenítés

A megjelenítés tulajdonság - display property

A böngésző előre meghatározott sémák segítségével építi fel a dokumentumunk megjelenését. A sémák a következők:

Érték Leírás
none Megjelenítés letiltása
Ha display: none stílust adunk egy elemnek, akkor nem jelenik meg. A dokumentumunkban jelen lesz, elérhető, használható, de fókuszt már felhasználó által nem kaphat (pl. javascriptből viszont igen). A használata egyszerű:
.rejtett { display: none; }
A gyerek elemek öröklik a beállítást, így azok szintén láthatatlanok lesznek.
inline Soron belüli megjelenítés
Az adott elem egy soron belül fog megjelenni. A span elem ilyen, a div pedig blokként jelenik meg. Hasznát sok helyzetben vehetjük. Gondoljunk a vízszintes menüsorra vagy ha a form elemünk blokk típusú megjelenítését soron belülire szeretnénk változtatni. Használata:
form { display: inline; } Összefoglalva: az elem előtt és után nincs sortörés.
block Blokkban történő megjelenítés
Ilyen a div, a p és a címsor elemek. Téglalapot foglalnak el, és abban jelenítik meg tartalmukat. Felhasználására példa lehet, mikor egy felsorolás elemeit blokként szeretnénk megjeleníteni (például menünek használva): ul, li { display: block; border: 1px solid #000000; } Összefoglalva: az elem előtt és után sortörés lesz beiktatva, az előző tulajdonság ellentetje.
list-item A lista elemek két egymás mellett álló téglalapként jelennek meg, a bal oldali behúzásként is felfogható, a jobb oldaliban pedig a lista tartalma jelenik meg.
li { display: list-item; }
run-in

Ezen tulajdonságok használatát a böngészők jól-rosszul-hibásan kezelik, használatukat nem javaslom. Mindegyik helyettesíthető egyéb jól használható tulajdonsággal.
Itt olvashatsz róla: http://www.w3schools.com/css/pr_class_display.asp
compact
marker
table
inline-table
table-row
table-row-group
table-column
table-column-group
table-header
table-header-group
table-footer-group
table-cell
table-caption

display: none

display: none vuole dire che l’elemento è reso invisibile (l’elemento con un bordo verde con display:none; non sarà ne anche visibile nel esempio).

Példa a none tulajdonságra 1.

...

...
<body>
...

Példa a none tulajdonságra


az első stílusa -  display: block



a harmadik stílusa - display: block






...
</body>
Az eredmény:
Példa a none tulajdonságra

az első stílusa - display: block

a harmadik stílusa - display: block

Figyeljük meg, hogy a második div nem jelenik meg a none tulajdonság miatt!


Példa az inline tulajdonságra 1.

...

...
<body>
...
  

...
</body>
Az eredmény:

Példa a block tulajdonságra 1.

...

...
<body>
...

Példa a block tulajdonságra


első {display: block}


második {display: block}


harmadik {display: block}






...
</body>
Az eredmény:
Példa a block tulajdonságra

első {display: block}

második {display: block}
harmadik {display: block}

Példa a list-item tulajdonságra 1.

...

...
<body>
...

listaelem 1

listaelem 2

listaelem 3

...
</body>
Az eredmény:
listaelem 1
listaelem 2

listaelem 3

ugrás a lap tetejére