Logó{CSS3 Tutoriál}

Szín és Háttér Stílus

A szöveg színének beállítása:

A color tulajdonság segítségével a szöveg színét állíthatjuk be.

Értékek:

  • Tetszõleges színértéket értékül adhatunk.
  • Az inherit értéket értékül adva, a szülõ elemtõl örököltethetjük meg a tulajdonság értékét. (Ez amúgy automatikusan is megtörténik, így ha a body tagben megadunk egy betûszínt, akkor ezt az összes gyermeke megörökli.)

Tulajdonságok:

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

A tulajdonság már a CSS1 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:



Háttérszín beállítása:

A background-color tulajdonsággal az elemeink háttérszínét állíthatjuk be.

Értékek:

  • Tetszõleges színértéket értékül adhatunk.
  • Az inherit értéket értékül adva, a szülõ elemtõl örökölhetjük meg háttérszínt.

Tulajdonságok:

A background-color tulajdonság értékei nem öröklõdnek.

A tulajdonság már a CSS1 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:



Háttérkép beállítása:

A background-image tulajdonság segítségével háttérképet állíthatunk be elemeinknek.

Értékek:

  • A hátteret egy a képre mutató url segítségével állíthatjuk be.
  • A none értéket értékül adva, utasítjuk a böngészõt, hogy ne állítson be háttérképet.

Tulajdonságok:

A background-image tulajdonság értékei nem öröklõdnek.

A tulajdonság már a CSS1 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:



Háttérkép ismétlõdése:

A background-repeat tulajdonság segítségével a beállított háttérkép ismétlõdési szabályát állíthatjuk be.

Értékek:

  • A repeat érték hatására a háttérkép mind vízszintesen, mind függõlegesen ismétlõdni fog.
  • A repeat-x érték hatására a böngészõ vízszintesen ismételni fogja a háttérképet.
  • A repeat-y érték hatására a böngészõ függõlegesen ismételni fogja a háttérképet.
  • A no-repeat érték hatásra a háttérkép csak egyszer jelenik meg, ismétlõdés nélkül.
  • A space érték hatására a háttérkép mindaddig ismétlõdik vízszintesen és függõlegesen, amíg kifér teljes egészében. Aztán térközök illesztõdnek a képek közzé, hogy a szélsõ képek szélei illeszkedjenek a tartalmazó elem széleihez.
  • A round érték hatására a kép mindaddig ismétlõdik vízszintesen és függõlegesen, amíg csak belefér az elemébe, majd átméretezõdnek, hogy teljesen betöltsék a rendelkezésre álló területet.

Tulajdonságok:

A background-repeat tulajdonság értékei nem öröklõdnek.

A tulajdonság már a CSS1 szabványnak is része volt, a repeat, repeat-x, repeat-y és no-repeat értékekkel. Ezért ezeket minden jelentõs böngészõ támogatja.

A round és a space érékek a CSS3 szabvány része, ezért ezeket az értékeket egyelõre a Firefox és az Internet Explorer nem támogatja. A Chrome és a Safari no-repeat értéknek veszi õket. Az Opera pedig a round-ot támogatja, a space-t pedig jelenleg még nem.

Példa:



A háttérkép rögzítése:

A background-attachment tulajdonsággal rögzíthetjük hátterünket, vagy éppen a tartalommal együtt gördíthetõvé tehetjük.

Értékek:

  • A scroll érték hatására a háttér az elemmel együtt görgethetõvé válik.
  • A fixed érték hatására a háttér a tartalom görgetése esetén is mozdulatlan marad.
  • A local érték hasonló a fixed-hez de ekkor az elem helyett annak tatalmához rögzítjük a hátteret.

Tulajdonságok:

A background-attachment tulajdonság értékei nem öröklõdnek.

A tulajdonságot csak blokkszintû elemekre használhatjuk.

A tulajdonság és a scroll és fixed értékek már a CSS1 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.

A local érték a CSS3 szabvány része. Egyelõre csak a Safari, Opera és a Chrome böngészõk támogatják.

Példa:



A háttér pozícionálása:

A background-position tulajdonsággal a háttérképünk pozícióját állíthatjuk be.

Értékek:

  • A top az elem tetejére igazítja a hátteret.
  • A bottom az elem aljára igazítja a hátteret.
  • A left az elem bal oldalára igazítja a hátteret.
  • A right az elem jobb oldalára igazítja a hátteret.
  • A center az elem közepére igazítja a hátteret.
  • Ha szóközzel elválasztva kettõt adunk meg fenti értékek közül, akkor az elsõ a vízszintes, a második a függõleges pozícionálásért fog felelni. Azaz:
    • A left top balra fel igazít.
    • A left center balra, középre igazít.
    • A left bottom balra le igazít.
    • A right top jobbra fel igazít.
    • A right center jobbra, középre igazít.
    • A right bottom jobbra le igazít.
    • A center top középen fel igazít.
    • A center center teljesen középre igazít.
    • A center bottom középre le igazít.
  • Megadhatunk hosszúságértékeket. Ezek a bal felsõ sarokhoz képpest történõ eltolást adják meg. Megadhatunk negatív értéket is.
    • Ha két értéket adunk meg, akkor azokat szóköz választja el. Az elsõ érték a vízszintes, pozitív érték esetén jobbra történõ eltolásért felelõs. Míg a második érték a függõleges, pozitív érték esetén lefele történõ eltolásért felel.
    • Ha egy értéket adunk meg, azt az elsõ paraméternek helyettesíti be, míg függõlegesen középre igazít.
  • Megadhatunk százalékos értéket is.
    • Ha két értéket adunk meg akkor az elsõ paraméter a vízszintes eltolást a szülõ elem szélességéhez, a második pedig a szülõ elem magasságához képpest határozza meg.
    • Ha egy százalékos értéket adunk meg, az az elõzõ pontban tárgyaltakkal analóg viselkedést eredményez.

Tulajdonságok:

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

A tulajdonság már a CSS1 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:



A háttér átméretezése:

A background-size tulajdonság segítségével a héttérképünk méretét állíthatjuk be.

Értékek:

  • Megadhatunk tetszõleges hosszúságértékeket. Egy érték esetén mindkét oldal azonos méretûre lesz méretezve. Két szóközzel elválasztott érték esetén az elsõ a vízszintes a második a függõleges méretet határozza meg.
  • Megadhatunk százalékos értékeket. Ekkor a szélesség és a magasság a szülõ elem szélességéhez lesz viszonyítva. Az elsõ érték a vízszintes a második a függõleges méretet határozza meg. Egy érték esetén a függõleges és a vízszintes méret is a tartalmazó elem szélességéhez és magasságához lesz viszonyítva.
  • Használhatjuk a következõ kulcsszavakat:
    • A cover érték hatására a böngészõ a tartalmazó elem szélességére, vagy magasságára méretezi a háttérképet, az eredeti képarány megtartásával.
    • A contain érték hatására a böngészõ a legkisebb olyan méretre méretezi a képet, hogy az teljesen elférjen az elemben a képarány megtartása mellett.
    • A auto esetén a háttérkép megtartja eredeti képarányát.

Tulajdonságok:

A background-size tulajdonság értékei nem öröklõdnek.

A tulajdonság a CSS3 szabvány része. A tulajdonságot, és a felsorolt értékeket jelenleg a Safari, a Chorme és az Opera böngészõk támogatják.

Példa:



A háttérkép széleinek levágása:

A background-clip segítségével levághatjuk a rendelkezésre álló helybõl esetlegesen kilógó képrészeket.

Értékek:

  • A border-box érték hatására a böngészõ levágja a háttérképnek az elem borderén kilógó részeit.
  • A padding-box érték hatására a böngészõ levágja a háttérképnek a belsõ térköz külsõ határán kívül esõ részeit.
  • A content-box érték hatására a böngészõ levágja a háttérképnek az elem tartalmán túllógó részeit.

Tulajdonságok:

A background-clip tulajdonság értékei nem öröklõdnek.

A tulajdonság a CSS3 szabvány része. A tulajdonságot jelenleg csak az Opera böngészõ támogatja, de hibásan.

Példa:



Háttér eredet:

A background-origin tulajdonság segítségével beállíthatjuk, hogy a background-position értékét mihez képpest számoljuk.

Értékek:

  • A border-box érték hatására a böngészõ a képet az elem borderének külsõ széléhez igazítja relatívan. A border mögé helyezve.
  • A padding-box érték hatására a képet az elem belsõ térközének belsõ széléhez igazítja relatívan.
  • A content-box érték hatására a böngészõ a képet az elem tartalmának külsõ széléhez igazítja relatívan.

Tulajdonságok:

A background-origin tulajdonság értékei nem öröklõdnek.

A tulajdonság a CSS3 szabvány része. A tulajdonságot, a border-box és content-box értékeket jelenleg csupán az Opera, a Chrome és a Safari böngészõk támogatják.

A padding-box érték egyelõre nincs támogatva.

Példa:



Több háttérkép

A background-image tulajdonságnak vesszõvel elválasztva egyszerre több képet is értékül adhatunk, így egyszerre több háttérképet állíthatunk be.

Ezen hátterek tulajdonságait a többi háttér-tulajdonságnak ugyanígy, vesszõvel elválasztva adhatjuk meg.

Ha a tulajdonságoknak nem adunk elég értéket, akkor a böngészõ a meglevõ paraméterlistát addig ismételgeti, amíg szükséges.

Tulajdonságok:

A módszer a CSS3 szabvány része, és jelenleg az Internet Explorer kivételével minden jelentõs böngészõ támogatja.

Példa:



A background gyorstulajdonság:

A background gyorstulajdonsággal az eddig vett háttértulajdonságokat egyetlen nagy értékadássá vonhatjuk össze.

Értékek:

Az különbözõ értékeket szóközzel választjuk el egymástól.

  • Elõször adjunk meg egy háttérszínt, egy tetszõleges színérték segítségével.
  • Ezután adjuk meg a háttérképet egy url segítségével.
  • Ezután adjuk meg a háttér méretét.
  • Majd adjuk meg a kép ismétlõdési szabályát.
  • Ezután adjuk meg a kép gördíthetõségét.
  • Adjuk meg a background clip értéket.
  • Majd végül adjuk meg a háttérkép pozícióját.
  • Lehetõségünk van egyetlen background gyorstulajdonságnak több ilyen értéklistát megadni, ha több hátteret is szeretnénk egyszerre. Ezeket vesszõvel választjuk el egymástól.
  • Ha csupán az inherit értéket adjuk értékül, akkor a tulajdonság éréke a szülõelemtõl öröklõdik meg.

Tulajdonságok:

A background gyorstulajdonság értékei nem öröklõdnek.

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

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!

Doboz tulajdonságos feladat.


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