Szövegek, szövegközi elemek
Szövegközi elemek jellemzői
A szövegközi elemek nem törik meg a szöveget sortöréssel, egyszerűen úgy viselkednek, mint egy szó, vagy mondat.
<p>Lórum ipse nem kérlő linc, hanem izismély. <strong>Több ménylő
fejtő hajszolta ki,hogy a sörökök kedő.</strong> Sítos egyveklőjét
azért zubálja gyetlennek.</p>

A szövegközi megjelenítésű elemekre nem érvényesülnek a doboz modell tulajdonságok. Nem határozhatjuk meg a szélességüket, és a magasságukat, illetve nem működik a margó.
A padding
(belső margó), és a border
(keret) használható, a blokkos elemektől némileg eltérő módon.
CSS-el megváltoztathatjuk az elemek megjelenítési módját szövegközire:
div {
display: inline;
}
Betűtípusok, betűcsaládok
Betűcsalád (font-family)
Betűcsaláddal határozhatjuk meg az elemeink szövegének a betűtípusát. Vesszővel elválasztva több betűtípust is megadhatunk, ezeket sorrendben megpróbálja betölteni a böngésző, ha az elsőt nem találja, megkísérli a következőt.
p {
font-family: Arial, Helvetica, sans-serif;
}
A fenti példában az első az Arial betűtípus, ami "minden" Windows-os gépen megtalálható, a második a Helvetica, ami nagyon hasonlít az Arial betűtípusra, de OSX operációs rendszeren elterjedt. A sans-serif általános betűcsalád (generic-family), a böngésző az ebbe a kategóriába eső elérhető fontok közül próbál egyet betölteni.
Több font felsorolásával, és általános betűcsalád megadásával biztosíthatjuk, hogy a böngésző kezelni tudja a szöveg betűtípusát, hiányzó fontok esetén is.
Általános betűcsaládok:
serif
sans-serif
cursive
monospace
fantasy
<p style="font-family: serif">Lorem ipsum dolor sit amet.</p>
<p style="font-family: sans-serif">Lorem ipsum dolor sit amet.</p>
<p style="font-family: cursive">Lorem ipsum dolor sit amet.</p>
<p style="font-family: monospace">Lorem ipsum dolor sit amet.</p>
<p style="font-family: fantasy">Lorem ipsum dolor sit amet.</p>

Web biztos fontok
Web biztos fontok azok a betűkészletek, amik széles körben elérhetőek a különböző operációs rendszereken. Az első nagyobb csomagot a Microsoft adta ki 1996-ban Core fonts for the Web néven.
Az alábbi fontokat tartalmazza: Andalé Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings
@font-face
A @font-face
segítségével mi is létrehozhatunk betűcsaládokat, és betölthetünk betűkészleteket a HTML állományainkba. Ehhez szükséges a böngészők számára is emészthető fontok (webfontok) használata.
@font-face {
font-family: 'MyWebFont';
src: url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype');
font-weight: normal;
}
body {
font-family: 'MyWebFont', sans-serif;
}
Betűméret (font-size)
A betűmérettel határozhatjuk meg a szöveg méretét. A böngészők a nagy M betű alapján méretezik a betűket (em méret), ezért az elterjedt mértékegységek a em, és a rem, illetve a pixelben megadott méret.
p {
font-size: 16px;
}
span {
font-size: 1.125em;
}

Betűvastagság (font-weight)
A font-weight
-et (betűvastagságot) megadhatjuk kulcsszóval, vagy számmal (100-as lépésekben). Az hogy az adott érték érvényesül-e a szövegre nagyban függ az adott betűtípustól.
Használható kulcsszavak: normal, bold, bolder, lighter Használható számértékek: 100-900 -ig, ahol a 400 a normal méret, 700 a vastagon szedett (bold).
p {
font-weight: 400;
}
span {
font-weight: bold;
}
Az hogy mely betű vastagság értéket lehet használni függ az adott fonttól. A legtöbb webfont, vagy rendszerfont a 400-as (normal), és a 700-as (bold) értékekeket támogatja csak.

Betűstílus (font-style)
A betűstílussal tehetünk dőltté egy szöveget. Alapértéke a normal, a dőlt értékei italic vagy oblique.
p {
font-style: normal;
}
span {
font-style: italic;
}
Betűvariáns (font-variant)
Betűvariáns segítségével készíthetünk kiskapitális szöveget. A kiskapitális szövegben a kisbetűk is olyan alakúak, mint a nagybetűk, de magasságuk megegyezik a kisbetűk magasságával (bizonyos betűtípusoknál eltérhet). Alapértéke a normal.
p {
font-variant: normal;
}
span {
font-variant: small-caps;
}

Szöveg igazítás (text-align)
A text-align
segítségével lehet igazítani egy blokkos elemen belül a szöveget vízszintesen.
Lehetséges értékei:
left: balra igazítás
right: jobbra igazítás
center: középre igazítás
justify: sorkizárt
p {
text-align: center;
}

Szöveg díszítés (text-decoration)
A text-decoration
-al húzhatjuk át, vagy alá a szöveget.
Lehetséges értékei:
none: nincs dekoráció
underline: aláhúzás
overline: föléhúzás
line-trought: áthúzás
p {
text-decoration: none;
}
span {
text-decoration: underline;
}
Szöveg behúzás (text-indent)
A text-indent
a bekezdés első sorában behúzást hoz létre. Negatív értéke is lehet, aminek hatására ki fog lógni az elemből az első sor. Megadhatjuk százalékban is, de inkább jellemző az em, vagy a pixeles értékadás. Alapértéke 0 (nincs behúzás).
p {
text-indent: 1em;
}
p {
text-indent: -1em;
}

Szöveg transzformáció (text-transform)
A text-transform
-al csupa kis vagy nagybetűssé változtathatunk egy szöveget attól függetlenül, hogy a HTML állományban hogy szerepel.
Értékei:
none: nincs
capitalize: szóeleji nagybetű
uppercase: csupa nagybetű
lowercase: csupa kisbetű
p {
text-transform: none;
}
span {
text-transform: uppercase;
}

Sormagasság (line-height)
A line-height
határozza meg a szöveg két sora közötti távolságot. Alapértéke normal, megadhatjuk százalékban, vagy hosszmértékben.
p {
line-height: normal;
}
span {
line-height: 1.25em;
}

A tartalom terület (vörös vonalakkal határolva a fenti képen) a nagy M-betű magasságával egyező magasságú, gyakorlatban ez a font mérete (tipográfiában a verzál magasság, ezen túlnyúlhatnak a betűk fel- és lenyúló szárai). A szövegközi mező magassága a sormagasság (kék vonalakkal határolt terület a fenti képen).

A tartalom terület és a szövegközi mező külömbsége a sortávolság (adott esetben negatív értéket is felvehet) - vonjuk ki a line-height
(sormagasság) értékéből a font-size
(betűméret) értékét, így megkapjuk a két sor pontos távolságát.

Szóköz (word-spacing)
A word-spacing
határozza meg a szavak közötti távolságot. Alapértéke a normal, ez nullával egyenlő, a módosított értéke a betűtípus szóköz karakterének szélességét módosítja, akár negatív irányban is, ekkor egymásra csúsznak a szavak.
p {
word-spacing: normal;
}
span {
word-spacing: 0.125em;
}

Betűköz (letter-spacing)
A letter-spacing
(betűköz) határozza meg a betűk karaktermezői közötti távolságot. Alapértéke a normal, ezt módosíthatjuk hosszmérték megadásával. Értéke lehet negatív, ebben az esetben a betűk közelebb kerülnek egymáshoz.
p {
letter-spacing: normal;
}
span {
letter-spacing: 0.125em;
}

Last updated