Logó{CSS3 Tutoriál}

UI és Generált Tartalmak

Az egér kurzor megváltoztatása:

A cursor tulajdonság segítségével megváltoztathatjuk az egér kurzort.

Értékek:

  • Az auto érték segítségével a böngészõprogramra bízzuk a megjelenítendõ kurzor kiválasztását.
  • A none érték segítségével elrejtjük a kurzort.
  • Értékül adhatunk tetszõleges url-t, melynek segítségével egy tetszõleges kép beállítható kurzornak.
  • Lehetõség van elõre definiált kurzornevek megadására. Ezek operációsrendszer függõk. Néhány Windowsos kurzornév: wait, help, move, pointer.

Tulajdonságok:

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

A tulajdonság, a CSS2 szabványnak is része. A tulajdonságot, és a felsorolt értékek többségét támogatja a jelentõs böngészõk többsége.

Az Internet Explorer url ként cur vagy ani kiterjesztésû fájlokat fogad csak el, ezek azonban nem mûködnek a többi böngészõnél.

Az Opera egyáltalán nem támogatja az url használatát.

A none érték csupán Firefox alatt mûködik.

Példa:



Tartalom generálása CSS segítségével:

A content tulajdonság segítségével tartalmakat generálhatunk. Ennél a tulajdonságnál nagy hasznát vesszük a szelektorban a :before és az :after látszólagos osztályoknak. Ezek határozzák meg, hogy a tartalom az érintett elem elé vagy után generálódjon.

Értékek:

  • Idézõjelen vagy aposztrófok között megadhatunk tetszõleges szöveget.
  • Megadhatunk egy képre mutató url-t, így az meg fog jelenni.
  • Megadhatunk egy count() számlálót, amelynek paraméterül egy számláló azonosítót adhatunk meg.(lásd. lentebb)
  • Megadhatunk open-quote vagy close-quote értéket, azaz nyitó vagy záró idézõjelet generálhatunk. (lásd. lentebb)
  • Megadhatunk no-open-quote vagy no-close-quote értéket azaz nyitó vagy záró idézõjelet generálhatunk megjelenítés nélkül.
  • Az attr() érték az elem paraméterül adott attribútumának értékét adja vissza. Például: attr(alt) esetén az alt attribútumét.
  • Az inherit esetén a tulajdonság értéke szülõ elemtõl öröklõdik.
  • A normal vagy none értékek esetén nem generálódik automatikus tartalom.

Tulajdonságok:

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

A tulajdonság, a CSS2 szabványnak is része. A tulajdonságot, és a felsorolt értékek többségét támogatja a jelentõs böngészõk többsége.

A none értéket egyelõre csak a Firefox és az Internet Explorer támogatja.

Az idézõjel generálást jelenleg csupán az Opera, a Firefox és az Internet Explorer támogatja.

Példa:



A számláló:

A counter() tulajdonság értékét a counter-reset és a counter-increment tulajdonságokkal állíthatjuk be. Segítségükkel a számozások sokkal sokoldalúbban alkalmazhatók.

Használata:

  • Elõször helyezzük el a számozandó elemek szülõjének tulajdonságai között a counter-reset tulajdonságot. Ennek két, szóközzel elválasztott paramétere van: az elsõ egy tetszõleges azonosító, ami a számlálót azonosítója; a második az a szám ahonnan kezdjük a számozást.
  • Ezután helyezzük el a counter-increment tulajdonságot ahhoz az elemhez, amely elé vagy után a számozást szeretnénk. Ennek a tulajdonságnak is két attribútuma van: az elsõ a számlálót azonosító azonosító; a második az a szám amennyivel növeljük a számozást.
  • A számértéket a counter() értékkel tudjuk megjeleníteni.
  • Szükség szerint visszaállíthatjuk a számozást annak kezdõértékére, a counter-reset segítségével.
  • Mindkét tulajdonságnak értékül adható a none, ami megszünteti; és az inherit, ami pedig a szülõ elemtõl örökli a számozást.

Tulajdonságok:

A counter-increment és a counter-reset tulajdonság értékei nem öröklõdnek.

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

Példa:



Az idézõjelek beállítása:

A quotes tulajdonság segítségével idézõjeleket adhatunk szövegeinkhez. Ezt a tulajdonságot a q elemhez kell rendelni.

Értékek:

  • Idézõjelek vagy aposztrófok között, szóközzel elválasztva adhatunk meg kettõ vagy négy paramétert. Az elsõ kettõ a használni kívánt nyitó és záró idézõjelet tartalmazza. Megadhatunk még két paramétert, amik az egy szinttel mélyebben levõ nyitó és csukó idézõjelek megjelenítését fogják adni.
  • A none érték hatására a q elem nem fog vizuálisan megjelenni a weblapon.
  • A inherit hatására az értéket a szülõ elemtõl örököljük.

Tulajdonságok:

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

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

A saját, dupla mélységû bekezdéseket jelenleg csak a Firefox kezeli rendeltetésszerûen.

A saját idézõjeleket az egyelõre Opera rosszul jeleníti meg.

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