Logó{CSS3 Tutoriál}

Szöveg

Betûköz beállítása:

A letter-spacing tulajdonság segítségével a térközt állíthatjuk be a szavainkban található betûk között.

Segítségével javíthatjuk, vagy akár ronthatjuk is az olvashatóságot.

Értékek:

Értékül pozitív vagy negatív távolságértékeket adhatunk meg. A gyakorlatban em mértékegységgel ellátott értéket szoktak megadni, mivel az viszonyul a betûmérethez. Így ha az változik, vele változik a betûtávolság is. Negatív érték megadásakor, a betûk összecsúsznak. Ha nulla értéket adunk meg, akkor a betû távolság nem változik. Ezen kívül a tulajdonságnak a normal értéket is beállíthatjuk, ami a böngészõ default betûköz távolságát állítja be, ami rendszerint változó.

Tulajdonságok:

A letter-spacing 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:



Szóköz beállítása:

A word-spacing tulajdonság segítségével a szavak közötti távolságot állíthatjuk be.

A betûközhöz hasonlóan a böngészõk ezt a távolságot is az olvasáshoz legoptimálisabb távolságra állítják be, ezért ezt megváltoztatni csak indokolt esetben célszerû.

Értékek:

Értéknek pozitív vagy negatív távolságértékeket adhatunk meg. Negatív érték megadásakor, a szavak összecsúsznak. A gyakorlatban az em-es értékek használata ajánlott. Ezen felül a tulajdonságra alkalmazható a normal érték is, amivel a böngészõ alap értékeire áll vissza a szóköz nagysága.

Tulajdonságok:

A word-spacing 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:



Sorköz beállítása:

A line-height tulajdonság segítségével a sorok közötti távolságot állíthatjuk be.

Ez nagymértékben befolyásolja a szöveg olvashatóságát.

Értékek:

  • Megadhatunk pozitív számértékeket, amelyekkel egy arányszámot fejezhetünk ki a jelenlegi sorközhöz képest.
  • Megadhatunk pozitív hosszúságértékeket.
  • Megadhatunk százalékos értékeket, amelyek arányszámként funkcionálva az eredeti sorköz értékhez képest eredményeznek változást.
  • A normal érték a böngészõbeli alapértékre állítja a sorközt.

Tulajdonságok:

A line-height tulajdonság értékei öröklõdnek.

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

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 nagy és kisbetû tulajdonságok:

A text-transform tulajdonság segítségével lehetõségünkben áll egy csupa kis betûs szöveget nagy betûssé, vagy akár fordítva egy csupa nagybetûs szöveget kisbetûssé tenni.

Ez a tulajdonság fõleg dinamikusan generált tartalmak esetén hasznos, ahol sohasem lehetünk biztosak abban, hogy esetleg nem generálódik csupa nagybetûs tartalom.

Értékek:

  • Az uppercase minden betût nagybetûvé alakít az érintett szövegben.
  • A lowercase minden betût kisbetûvé alakít az érintett szövegben.
  • A capitalize minden egyes szó elsõ betûjét nagybetûvé alakítja az érintett szövegben.
  • A none felülbírálja az elõzõ értékeket és meghagyja a szöveget eredeti formájában.

Tulajdonságok:

A text-transform 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:



Szöveg árnyék:

A text-shadow property segítségével árnyékot rendelhetünk betûink mögé, amelyek így hangsúlyosabbá válhatnak.

A túlzott használata homályossá és nehezem olvashatóvá teheti szövegeinket.

Értékek:

A tulajdonságnak egy paraméterlistát adunk értékül, amelyben az értékeket szóközzel választja el.

Egyszerre több árnyék értéket is megadhatunk egyetlen propertynek. Ehhez elég a paraméterlistákat vesszõvel ellátva felsorolni.

  • Elõször adjunk meg azt a színértéket, amilyen színû árnyékot szeretnénk. Ajánlott a rgba kódot megadni, mivel így kevésbé hangsúlyos színeket is megadhatunk.
  • Ezt követi két hosszúságérték, ami az árnyék vízszintes és függõleges eltolásának nagyságát határozza meg. Az elsõ érték a függõleges eltolásért felel, pozitív érték esetén lefele, negatív esetén felfele tolunk el. A második érték pedig a vízszintes eltolás nagyságát határozza meg. Pozitív érték esetén jobbra, negatív esetén balra tolunk el.
  • Végül adjunk meg az árnyék nagyságát. Ezt egy pozitív hosszúságérték segítségével tehetjük meg.
  • A none értéket is megadhatunk, így kikapcsolhatjuk az esetlegesen megörökölt árnyékot.

Tulajdonságok:

A text-shadow tulajdonság értékei öröklõdnek.

A tulajdonság a CSS3 szabvány része. Jelenleg az Internet Explorer kivételével minden jelentõs böngészõ támogatja.

Példa:



Vízszintes szövegigazítás:

A text-align tulajdonság segítségével a szövegeinket vízszintesen igazíthatjuk.

Értékek:

  • A left érték hatására az érintett szöveg balra igazítódik.
  • A center érték hatására az érintett szöveg középre igazítódik.
  • A right érték hatására az érintett szöveg jobbra igazítódik.
  • A justify érték hatására az érintett szövegrész sorkizárttá válik.
  • Az inherit érték hatására az érintett szöveg megörökli a szülõ elemének text-align tulajdonságát.
  • Az auto érték hatására az alapértelmezett szövegigazítás lép érvénybe.

Tulajdonságok:

A text-align tulajdonság értékei öröklõdnek.

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

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:



Függõleges szövegigazítás:

A vertical-align tulajdonság segítségével függõlegesen igazíthatjuk szövegeinket az õket tartalmazó tag függõleges méretéhez képpest.

Értékek:

  • A super érték a felsõ indexbe helyezi az érintett szöveget.
  • A sub érték az alsó indexbe helyezi az érintett szöveget.
  • A baseline érték a normális helyére teszi a szöveget, ez az átlagos megjelenése a szövegeknek.
  • Megadhatunk relatív értékeket, ami a szülõ elemhez képpest adja meg a pozíciót:
    • A top érték a szülõelem tetejéhez igazít, a sor legmagasabb elemével egy vonalba.
    • A middle érték a szülõelem függõleges középpontjára igazít.
    • A bottom érték a szülõelem aljához igazít, a sor legmélyebben levõ elemével egy vonalba.
    • A text-top érték a szülõelem tetejéhez igazít, a betûinek tetejéhez.
    • A text-bottom érték a szülõelem aljához igazít, a betûinek aljához.
  • Megadhatunk százalékos értékeket, ami a szülõ elem betûméretéhez képest igazítja a szöveget. Pozitív értékek felfele, negatívak lefele mozdítják el szövegünket. A 100% egy teljes sornyi távolságot jelent.
  • Megadhatunk távolságértékeket is. A pozitív és negatív értékek a százalékos értékekkel analóg módon mûködnek.

Tulajdonságok:

A vertical-align tulajdonság értékei nem öröklõdnek.

A tulajdonságot csak inline elemekre használhatjuk.

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:



Bekezdés behúzása:

A text-indent tulajdonság segítségével lehetõségünk van a bekezdések elsõ sorát behúzni.

Értékek:

  • Megadhatunk neki hosszúságértékeket. Ezek lehetnek negatív értékek is, így az elsõ sor jobbra lesz húzva.
  • Megadhatunk százalékos és relatív értékeket is. A százalékos értékek a szülõ elem szélességéhez lesznek viszonyítva.
  • Az inherit értéket értékül adva a behúzás nagysága a szülõ elemtõl lesz megörökölve.

Tulajdonságok:

A text-indent tulajdonság értékei öröklõdnek.

A tulajdonságot csak blokk elemekre használhatjuk.

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:



Szóköz beállítása:

A böngészõk rendszerint egyre redukálják a többszörös szóközöket. Azonban ezt a viselkedést módosíthatjuk a white-space tulajdonsággal.

Értékek:

  • A nowrap érték hatására az érintett szövegben leredukálódnak a többszörös szóközök, és a br elem nélkül sortörés sem keletkezik.
  • A pre érték hatására megõrzõdnek a szóközök a szövegben.
  • A pre-line érték hatására az érintett szövegben leredukálódnak a többszörös szóközök, és ha szükséges sortörés is keletkezik a szövegben.
  • A pre-wrap érték hatására az érintett szöveg megõrzi a többszörös szóközöket, és ha szükséges sortörés is keletkezik a szövegben.
  • A normal érték hatására ismét engedélyezzük a böngészõnek a többszörös szóközök leredukálását.

Tulajdonságok:

A white-space 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:



Szöveg dekoráció

A text-decoration tulajdonság segítségével dekorálhatjuk szövegeinket.

Értékek:

  • Az underline érték aláhúzott szöveget eredményez.
  • Az overline érték egy felülvonást eredményez a szöveg fölött.
  • A line-through érték egy áthúzott szöveget hoz létre.
  • A none érték normál, dekorációmentes szöveget eredményez.

Tulajdonságok:

A text-decoration 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:



Feladat:

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

Szöveg feladat.


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