A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Kitekintés a stíluslapok használatába, tipikus szövegformázások /Szövegszintű elemeknél gyakran használt stílusbeállítások (3. rész)

Tartalomjegyzék

Szövegszintű elemeknél gyakran használt stílusbeállítások (3. rész)

Szövegszintű elemeknél gyakran használt stílusbeállítások (3. rész)

Szövegigazítás vízszintesen (text-align)

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.
start: balról jobbra történő olvasási sorrendű nyelv esetén a bal oldalt jelenti, jobbról balra történő olvasási sorrendű nyelv esetén pedig a jobb oldalt jelenti. Az olvasási sorrend a direction tulajdonsággal állítható be, amely ltr, illetve rtl értéket vehet fel attól függően, hogy az adott nyelven írott szövegeket balról jobbra, vagy jobbról balra kell olvasni.
end: balról jobbra történő olvasási sorrendű nyelv esetén a jobb oldalt, jobbról balra történő olvasási sorrendű nyelv esetén pedig a bal oldalt jelenti. Az olvasási sorrend a direction tulajdonsággal állítható be, amely ltr, illetve rtl értéket vehet fel attól függően, hogy az adott nyelven írott szövegeket balról jobbra, vagy jobbról balra kell olvasni.
Az auto érték hatására az alapértelmezett szövegigazítás lép érvénybe.

Vissza a tartalomjegyzékhez

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. A CSS3-as szabvány új értékekkel ruházta fel (pl. start, end).

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Vízszintes szövegigazítás</title>
<meta charset="utf-8">
<style type="text/css">
  p {border-bottom:1px dotted gray;} /* alsó szegély beállítása a bekezdésekre */
  .pelda1 {text-align: center;}
  .pelda2 {text-align: right;}
  .pelda3 {text-align: justify;}
  .pelda4 {text-align: left;}
  .start  {text-align: start;}
</style>
</head>
<body>
    <p class="pelda1">Az első bekezdés középre van igazítva.</p>
    <p class="pelda2">A második bekezdés jobbra van igazítva. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam augue sem, tempor id enim ut, rhoncus dictum ante. Aliquam erat volutpat. Pellentesque non felis vitae lorem tincidunt vestibulum. Donec rhoncus, est eu posuere tincidunt, nunc mauris molestie tortor, id ullamcorper nunc justo eget sem. Nam egestas felis sed ante auctor, tincidunt facilisis metus convallis. Vivamus sollicitudin vestibulum felis, a varius lacus posuere dignissim. </p>
    <p class="pelda3">A harmadik bekezdés sorkizárttá van téve, ami csak akkor látványos, ha a sor elér a szülő elem határáig. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam augue sem, tempor id enim ut, rhoncus dictum ante. Aliquam erat volutpat. Pellentesque non felis vitae lorem tincidunt vestibulum. Donec rhoncus, est eu posuere tincidunt, nunc mauris molestie tortor, id ullamcorper nunc justo eget sem. Nam egestas felis sed ante auctor, tincidunt facilisis metus convallis. Vivamus sollicitudin vestibulum felis, a varius lacus posuere dignissim. </p>
    <p class="pelda4">A negyedik bekezdés balra van igazítva. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam augue sem, tempor id enim ut, rhoncus dictum ante. Aliquam erat volutpat. Pellentesque non felis vitae lorem tincidunt vestibulum. Donec rhoncus, est eu posuere tincidunt, nunc mauris molestie tortor, id ullamcorper nunc justo eget sem. Nam egestas felis sed ante auctor, tincidunt facilisis metus convallis. Vivamus sollicitudin vestibulum felis, a varius lacus posuere dignissim. </p>
    <div style="direction:ltr">
        <p class="start">A blokkra balról jobbra olvasási sorrend van beállítva, az igazításnál a start érték van beállítva, ezért a bekezdés balra igazodik.</p>
    </div>
    <div style="direction:rtl">
        <p class="start">A blokkra jobbról balra olvasási sorrend van beállítva, az igazításnál a start érték van beállítva, ezért a bekezdés jobbra igazodik.</p>
    </div>
</body>
</html>

Magyarázat

A fenti példában a text-align tulajdonság használata mellett a <div> elem használata is újdonság. A <div> elemmel egyszerűen csoportosíthatunk elemeket, és például formázhatjuk ezeket. Ahhoz, hogy az egyes bekezdéseket egymástól elkülönítsük, használtuk a border-bottom CSS-tulajdonságot is. Ezekre a későbbiekben részletesebben ki fogunk térni.

Kapcsolódó hivatkozások

Text-align tulajdonság leírása angol nyelven a Mozilla oldalán, böngésző támogatottsági adatokkal

Függőleges szövegigazítás (vertical-align)

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.

Vissza a tartalomjegyzékhez

É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éppest 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.

Vissza a tartalomjegyzékhez

Tulajdonságok

A vertical-align tulajdonság értékei nem öröklődnek. A tulajdonságot inline elemekre használhatjuk. A tulajdonság már a CSS1 szabványnak is része volt.

Interaktív példa

Magyarázat

Ahhoz, hogy az igazítási példákat be tudjuk mutatni, a fenti példában táblázatot hoztunk létre. Ennek módját később részletesebben bemutatjuk.

Kapcsolódó hivatkozások

Vertical-align tulajdonság leírása angol nyelven a Mozilla oldalán, böngésző támogatottsági adatokkal

Bekezdés behúzása (text-indent)

A text-indent tulajdonság segítségével a bekezdések első sorának behúzását tudjuk meghatározni.

Vissza a tartalomjegyzékhez

Értékek

Megadhatunk hosszúságértékeket. Ezek lehetnek negatív értékek is, így az első sor a bekezdés többi sorához képest kintebb fog kezdődni.
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.
A CSS3 szabványban új értékekkel is kiegészül (hanging, each-line), amelyeknek jelenleg még nincs böngészőtámogatottsága.

Vissza a tartalomjegyzékhez

Tulajdonságok

A text-indent tulajdonság értékei öröklődnek. A tulajdonságot csak blokk szintű elemekre használhatjuk. A tulajdonság már a CSS1 szabványnak is része volt.

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Bekezdés első sorának behúzása</title>
<meta charset="utf-8">
<style type="text/css">
  .pelda1 {text-indent: 25px}
  .pelda2 {text-indent: 10%}
</style>
</head>
<body>
    <p class="pelda1">Az első bekezdés első sora 25 pixellel be van húzva. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris augue dui, consequat fringilla tempor adipiscing, eleifend ultricies est. Maecenas accumsan quis magna quis condimentum. Ut quis tortor a diam scelerisque suscipit sit amet vitae erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae metus sagittis, imperdiet arcu in, sagittis est. Pellentesque hendrerit, purus quis condimentum sodales, nunc nibh mattis odio, at facilisis eros nulla volutpat metus. Pellentesque ligula sapien, fringilla nec varius id, tempor sit amet orci. Proin eu tellus luctus, scelerisque lectus sed, porttitor enim. In hac habitasse platea dictumst. Aliquam erat volutpat. Nam ac eros est. Duis a tortor laoreet, lacinia mi quis, condimentum nulla. Integer vehicula vehicula massa, lobortis condimentum velit tincidunt a. Donec aliquam urna sem, sit amet sodales erat lacinia a. </p>
    <p class="pelda2">A második bekezdés első sora a szülő elem szélességének 10%-ával van beljebb húzva. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris augue dui, consequat fringilla tempor adipiscing, eleifend ultricies est. Maecenas accumsan quis magna quis condimentum. Ut quis tortor a diam scelerisque suscipit sit amet vitae erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae metus sagittis, imperdiet arcu in, sagittis est. Pellentesque hendrerit, purus quis condimentum sodales, nunc nibh mattis odio, at facilisis eros nulla volutpat metus. Pellentesque ligula sapien, fringilla nec varius id, tempor sit amet orci. Proin eu tellus luctus, scelerisque lectus sed, porttitor enim. In hac habitasse platea dictumst. Aliquam erat volutpat. Nam ac eros est. Duis a tortor laoreet, lacinia mi quis, condimentum nulla. Integer vehicula vehicula massa, lobortis condimentum velit tincidunt a. Donec aliquam urna sem, sit amet sodales erat lacinia a. </p>
</body>
</html>

Kapcsolódó hivatkozások

Text-indent tulajdonság leírása angol nyelven a Mozilla oldalán, böngésző támogatottsági adatokkal

Szóköz tulajdonságainak beállítása (white-space)

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.

Vissza a tartalomjegyzékhez

Értékek

A normal érték hatására engedélyezzük a böngészőnek a többszörös szóközök leredukálását.
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-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 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.

Az alábbi táblázat összefoglalja, hogy melyik érték esetén mi történik a sorokkal, szóközökkel és a szöveggel.

	Új sorok	Szóközök és tabulátorok	Szöveg tördelése
normal	Összevon	Összevon	Van tördelés
nowrap	Összevon	Összevon	Nincs tördelés
pre	Megtart	Megtart	Nincs tördelés
pre-wrap	Megtart	Megtart	Van tördelés
pre-line	Megtart	Összevon	Van tördelés

Vissza a tartalomjegyzékhez

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.

Interaktív példa

Kapcsolódó hivatkozások

White-space tulajdonság leírása angol nyelven a Mozilla oldalán, böngésző támogatottsági adatokkal

Szövegdekoráció (text-decoration)

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

Vissza a tartalomjegyzékhez

É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.
A blink villogó szöveget eredményez, amelynek használata viszont több szempontból sem javasolt.

Vissza a tartalomjegyzékhez

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.

Kapcsolódó hivatkozások

Text-decoration tulajdonság leírása angol nyelven a Mozilla oldalán, böngésző támogatottsági adatokkal

Vissza a tartalomjegyzékhez

Fel a lap tetejére

A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.