Logó{CSS3 Tutoriál}

Vizuális Formázás

A pozícionálás típusának beállítása:

A position tulajdonság segítségével beállíthatjuk egy elem pozícionálásának típusát.

Értékek:

  • A static érték esetén, az elemek nincsenek pozícionálva, eredeti helyükre kerülnek. Ilyen elemet nem lehet máshova pozícionálni, nem lehet elvágni, és a láthatósága sem változtatható. Oda kerülnek, ahova amúgy is kerülnének.
  • A relative érték esetén, az elemek ugyanúgy követik egymást, mint a statikus értéknél, itt azonban az elem eredeti helyéhez képpest újrapozícionálható (lásd.: left, right, bottom, top). Ilyenkor az elem eredeti helye üresen marad.
  • Az absolute érték esetén, az elem teljesen kikerül a megjelenítés folyamából (nem hagyódik ki az eredeti helye), és a szülõ elemhez képpest szélesség és magasságértékek megadásával pozícionálható.
  • A fixed érték esetén, az absolute-hoz hasonlóan az elem teljesen kikerül a megjelenítés folyamából, azonban itt a képernyõ adott pontjára pozícionálhatjuk. Azaz az elem a dokumentum gördítése esetén is a képernyõhöz képpest egy helyben marad.
  • Az inherit érték esetén a tulajdonság értéke a szülõ elemtõl öröklõdik.

Tulajdonságok:

A position tulajdonság értékei nem öröklõdnek.

A tulajdonság, már a CSS2 szabványnak is része volt, ezért mind a tulajdonságot, mind a felsorolt értékeket támogatják a jelentõs böngészõk.

Példa:



Az elemek pozícionálása:

A top, bottom, left és right tulajdonságokkal - ha a pozícionálás típusa megengedi-, pozícionálhatjuk elemeinket.

Értékek:

  • Megadhatunk tetszõleges hosszúságértékeket. Ekkor az elem a megadott irányból ennyivel lesz eltolva. Negatív érték az ellentétes irányba mozgatja az elemet.
  • Megadhatunk százalékos értéket, ekkor az eltolás nagysága a szülõ elemhez lesz viszonyítva. Negatív érték az ellentétes irányba mozgatja az elemet.
  • Az auto érték hatására, ha a pozícionálás típusa absolute, akkor a böngészõ automatikusan pozícionálja az elemet; különben a hatása a 0 értékével egyenértékû.
  • Az inherit esetén a tulajdonság értéke a szülõ elemtõl öröklõdik.

Tulajdonságok:

A top, bottom, left és right tulajdonságok értékei nem öröklõdnek.

A tulajdonságok, már a CSS2 szabványnak is része volt. Mind a tulajdonságot, mind a felsorolt értékeket támogatják a jelentõs böngészõk.

Példa:



Elemek egymásra pakolása:

A z-index tulajdonság segítségével meghatározhatjuk az egymást fedõ testvér elemek megjelenítési sorrendjét.

Értékek:

  • Megadhatunk tetszõleges egész számokat. Ha egy átfedõ elem z-indexe nagyobb egy testvér eleméjénél, akkor rá pakolódik. Negatív érték esetén a szülõ is rápakolódik elemünkre.
  • Az auto érték esetén rábízzuk a böngészõre a z-index érték kiszámítását.
  • Az inherit esetén a tulajdonság értéke a szülõ elemtõl öröklõdik.

Tulajdonságok:

A z-index tulajdonság értékei nem öröklõdnek.

A tulajdonság, már a CSS2 szabványnak is része volt. Mind a tulajdonságot, mind a felsorolt értékeket támogatják a jelentõs böngészõk.

Példa:



Az elemek láthatósága:

A visibility tulajdonság segítségével az elemek láthatóságát állíthatjuk be.

Értékek:

  • A hidden érték láthatatlanná teszi az elemet.
  • A visible érték láthatóvá teszi az elemet.
  • A inherit esetén a tulajdonság értéke a szülõ elemtõl öröklõdik.
  • Tábla elemekre alkalmazva a collapse érték eltüntet egy sort vagy oszlopot anélkül, hogy a tábla megjelenése megváltozna. Ekkor a sor vagy oszlop által elfoglalt hely más tartalom számára rendelkezésre áll. Ez az érték a nem tábla elemeken hidden értékként funkcionál.

Tulajdonságok:

A visibility tulajdonságok értékei öröklõdnek.

A tulajdonság, már a CSS2 szabványnak is része volt. Mind a tulajdonságot, mind a felsorolt értékeket támogatják a jelentõs böngészõk.

Az Internet Explorer jelenleg nem támogatja az inherit, és a collapse értékeket.

Példa:



Az elemek látható részének megadása:

A clip tulajdonság segítségével beállíthatjuk, hogy egy elemnek csak egy meghatározott részét jelenítsük meg.

A tulajdonságot, csak abszolút pozícionálás esetén tudjuk használni

Értékek:

  • A rect() érték segítségével megadhatjuk azt a téglalapot, amit látni szeretnénk az elembõl. A zárójelek között négy, vesszõvel elválasztott hosszúságértéket adunk meg, melyek sorrendben a fenti, a jobb, az alsó és a bal értékeket határozzák meg. Ezek az értékek az elem bal felsõ sarkától számolódnak. A megjelenített rész pedig az így megadott értékek által közrefogott belsõ téglalap lesz.
  • Az auto érték a böngészõre bízza az elem megjelenített részét.
  • Az inherit esetén a tulajdonság értéke a szülõ elemtõl öröklõdik.

Tulajdonságok:

A clip tulajdonságok értékei nem öröklõdnek.

A tulajdonság, már a CSS2 szabványnak is része volt. Mind a tulajdonságot, mind a felsorolt értékeket támogatják a jelentõs böngészõk.

Az Internet Explorer jelenleg nem támogatja az inherit értéket.

Ha az elem overflow:visible;, akkor a clip tulajdonság nem mûködik.

Példa:



Az elemek átlátszósága:

Az opacity tulajdonsággal az elemek átlátszóságát adhatjuk meg.

Értékek:

  • Megadhatunk egy tetszõleges 0.0 (teljesen átlátszó) és 1.0 (teljesen átlátszatlan) közötti tört számot.
  • Az inherit esetén a tulajdonság értéke a szülõ elemtõl öröklõdik.

Tulajdonságok:

Az opacity tulajdonságok értékei nem öröklõdnek.

A tulajdonság a CSS3 szabvány része.

A tulajdonságot, és annak értékeit jelenleg az Internet Explorer kivételével minden jelentõs böngészõ támogatja.

Példa:



Elemek árnyékának beállítása:

A box-shadow tulajdonság segítségével árnyékokat hozhatunk létre elemeink körül.

Paraméterek, és értékeik:

A tulajdonságnak egy szóközzel elválasztott paraméterlistát adunk értékül.

Vesszõvel elválasztva, több paraméterlistát megadva több árnyékot is definiálhatunk.

  • Elõször két tetszõleges hosszúságértékkel adjuk meg a vízszintes és függõleges eltolás mértékét.
  • Ezután egy pozitív hosszúság érték következik, ami meghatározza, hogy mennyire legyen elmosódott az árnyék. 0 érték esetén nincs árnyák.
  • Majd opcionális módon egy pozitív hosszúságértéket megadva meghatározhatjuk az árnyék sötét részének méretét. Ha nem adjuk meg, akkor 0-nak tekinti a böngészõ az értékét.
  • Ezután egy tetszõleges színértéket megadva beállítjuk az árnyék színét.
  • Opcionálisan megadva az inset hatásár az árnyék az elemen belülre kerül.

Tulajdonságok:

A box-shadow tulajdonságok értékei nem öröklõdnek.

A tulajdonság a CSS3 szabvány része.

A tulajdonságot, és az értékeit jelenleg csupán az Opera támogatja.

Példa:



Feladat:

Egészítsd ki a példakódot stílus szabályokkal úgy, hogy a képpel megegyezõ végeredményt kapj!

Vizuális formázás feladat.


Tárnok Tamás Attila - CSS3 Tutoriál - 2010