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.
1
<p>Lórum ipse nem kérlő linc, hanem izismély. <strong>Több ménylő
2
fejtő hajszolta ki,hogy a sörökök kedő.</strong> Sítos egyveklőjét
3
azért zubálja gyetlennek.</p>
Copied!
A strong elem szövegközi elem lévén több sorba törik.
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:
1
div {
2
display: inline;
3
}
Copied!

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.
1
p {
2
font-family: Arial, Helvetica, sans-serif;
3
}
Copied!
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
1
<p style="font-family: serif">Lorem ipsum dolor sit amet.</p>
2
<p style="font-family: sans-serif">Lorem ipsum dolor sit amet.</p>
3
<p style="font-family: cursive">Lorem ipsum dolor sit amet.</p>
4
<p style="font-family: monospace">Lorem ipsum dolor sit amet.</p>
5
<p style="font-family: fantasy">Lorem ipsum dolor sit amet.</p>
Copied!

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
Magyarázat
1
@font-face {
2
font-family: 'MyWebFont';
3
src: url('webfont.woff2') format('woff2'),
4
url('webfont.woff') format('woff'),
5
url('webfont.ttf') format('truetype');
6
font-weight: normal;
7
}
8
9
body {
10
font-family: 'MyWebFont', sans-serif;
11
}
Copied!
1
@font-face {
2
/* A font-family határozza meg a létrehozott betűcsalád nevét */
3
font-family: 'MyWebFont';
4
/* Az src-ben (source) adhatjuk meg a font
5
állományokat, vesszővel felsorolva.
6
A formátumot is meg kell adni, ez általában az
7
állománykiterjesztéssel egyezik.
8
*/
9
src: url('webfont.woff2') format('woff2'),
10
url('webfont.woff') format('woff'),
11
url('webfont.ttf') format('truetype');
12
/* Megadhatjuk a betűcsalád tagjának betűvastagságát is
13
(vastagságonként egy @font-face-ben kell felvinni a fontokat) */
14
font-weight: normal;
15
}
16
17
body {
18
/* Itt hivatkozunk a @font-face-ben létrehozott új betűcsaládra. */
19
font-family: 'MyWebFont', sans-serif;
20
}
Copied!
Az interneten elérhetőek @font-face generátorok, ezekkel egy adott fontból elkészíthetjük a böngészőkkel kompatibilis font állományokat, a webfontokat, és a szükséges CSS-t is. A legismertebb szolgáltatás a Font Squirrel (https://www.fontsquirrel.com/tools/webfont-generator). Egy jó alternatíva a Transfonter (https://transfonter.org/). Mindkét szolgáltató a letölthető állományok között ad egy HTLM állományt töltelékszöveggel, amiben megnézhetjük a generált fontokat.
Ha nem akarjuk mi kiszolgálni a font állományokat egy jó ingyenes alternatíva a Google font szolgáltatása (https://fonts.google.com/), ahol 500 fölötti fontot érünk el magyar ékezettel.
Font formátumokról:
EOT (Embedded Open Type) - Az első webfont, de a böngészők közül csak a Microsoft Explorer/Edge böngészők támogatják. Már csak akkor használjuk, ha a webalkalmazásokat régi, elavult Microsoft böngészőkre is optimalizálni kell.
TTF (True Type Font) - Egy időben ez volt a legszélesebb körben támogatott webfont, bizonyos újabb böngészőkben feltételes a támogatottsága.
WOFF (Web Open Font Format) - Új webfont formátum, ami gyorsabb letöltődés tesz lehetővé, a régi típusokhoz hasonló, de optimalizált, tömörített formátum. A modern böngészők már mind támogatják.
WOFF2 (Web Open Font Format v2) - A WOFF2 még optimálisabb, kisebb, támogatottsága egyenlőre részleges, nem minden modern böngésző képes feldolgozni, így az egyes verzióval együtt érdemes használni.
SVG (Scalable Vector Graphyc Font) - Az SVG szabványon alapul, támogatottsága részleges, a modern böngészők csak egy része képes feldolgozni, ráadásul nem használ tömörítést, így az SVG fontok mérete túl nagy.

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.
1
p {
2
font-size: 16px;
3
}
4
5
span {
6
font-size: 1.125em;
7
}
Copied!
Különböző betűméretek pixelben meghatározva.

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).
1
p {
2
font-weight: 400;
3
}
4
5
span {
6
font-weight: bold;
7
}
Copied!
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.
Open Sans betűtípus különböző betű vastagságai.

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.
1
p {
2
font-style: normal;
3
}
4
5
span {
6
font-style: italic;
7
}
Copied!

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.
1
p {
2
font-variant: normal;
3
}
4
5
span {
6
font-variant: small-caps;
7
}
Copied!

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
1
p {
2
text-align: center;
3
}
Copied!
Jobbra, balra, középre igazított, és sorkizárt szöveg.

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
1
p {
2
text-decoration: none;
3
}
4
5
span {
6
text-decoration: underline;
7
}
Copied!

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).
1
p {
2
text-indent: 1em;
3
}
4
5
p {
6
text-indent: -1em;
7
}
Copied!
A bal hasáb pozitív szöveg behúzást kapott, a jobb hasáb negatív szöveg behúzást.

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ű
1
p {
2
text-transform: none;
3
}
4
5
span {
6
text-transform: uppercase;
7
}
Copied!
Szöveg transzformációk sorrendben: none, capitalize, uppercase, lowercase.

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.
1
p {
2
line-height: normal;
3
}
4
5
span {
6
line-height: 1.25em;
7
}
Copied!
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.
Különböző sormagasság értékek em-ben megadva.

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.
1
p {
2
word-spacing: normal;
3
}
4
5
span {
6
word-spacing: 0.125em;
7
}
Copied!
Különböző szóközök pixelben megadva.

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.
1
p {
2
letter-spacing: normal;
3
}
4
5
span {
6
letter-spacing: 0.125em;
7
}
Copied!
Különböző méretű betűközök pixelben meghatározva.
Last modified 2yr ago