Bekezdések megjelenése

Betűkészletek

Adott elemeken állítani tudjuk a betűkészletet, a stílust, módosítást, súlyozást méretet.

Betűtípus

1. body { font-family: Arial, Helvetica, sans-serif; }  

A példában az egész dokumentumra beállítjuk, hogy milyen betűkészlet legyen az alapértelmezett. Érdemes több, hasonló betűkészletet is felsorolni, illetve a lista végére egy általános betűkészletet is elhelyezni az adott családból. Az általános betűkészletek a következők lehetnek: serif, sans-serif, cursive, fantasy,monospace.

Stílus

Egy font dőltségét befolyásolhatjuk, példánkban az egész dokumentumra adtuk meg, hogy dőltek legyenek a betűk. További lehetőségeink: normal, italic, oblique.

1. body { font-style: italic; }  

Súlyosság

A példában félkövér betűkészletet állítunk be a HTML dokumentumra. Lehetőségeink: lighter, normal, bold,bolder, illetve 100-tól 900-ig a számok 100-asával (egyre vastagabb betűkészletet választva).

1. body { font-weight: bold; }  

Méret

A HTML dokumentum alapértelmezett betűtípusának a méretét határoztuk meg a példában. A konkrét méretmegadásnál több lehetőségünk is van, lehetséges pixelben (mint a példában), pontban (pt-t kell írni), százalékban, szövegesen (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger) megadni a méretet. A lehetséges mértékegységekre egy következő cikkben még részletesebben is ki fogunk térni.

1. body { font-size: 14px; }  

Csoportos megadás

Lehetőségünk van a fentieket egy paraméterként is átadni:

1. body { font: italic bold 14px Arial, Helvetica, sans-serif; }  

Szöveg paraméterek

A szöveg színét, sűrűségét, igazítását, aláhúzását, behúzását állíthatjuk, továbbá konvertálhatjuk a szöveget különböző formára (kisbetűs, nagybetűs, stb.). Pár példa:

1. h1 { color: black; }  

A 1. szintű címsor színét feketére állítjuk. Lehetőségünk van #ffffff hexadecimális formában is megadni a színt (a mértékegységek mellett a lehetséges színmegadási módokat is be fogjuk mutatni még).

1. h1 { letter-spacing: 10px; }  

A címsor betűi közötti távolságot növeltük meg 10 képponttal. Lehetőségünk van növelni és csökkenteni a távolságot.

1. h1 { text-align: center; }  

A címsor igazítását adjuk meg, lehetőségünk van balra, középre és jobbra igazítani, valamint sorkizártra beállítani a stílust (left, center, right és justify rendre a megfelelő értékek).

1. a { text-decoration: none; }  

A példában a link dekorációjaként nem adtunk meg semmit, azaz felülbíráltuk az alapértelmezett aláhúzást. A lehetséges értékek: none, underline, overline, line-through, blink lehetnek, melyek rendre díszítetlen, aláhúzott, felülhúzott, áthúzott és villogó értékeket állítanak be.

1. p { text-indent: 40px; }  

A bekezdések első sorának behúzását állíthatjuk ennek a paraméternek a segítségével.

1. h1 { text-transform: uppercase; }  

A stíluslap hatására az 1. szintű címsorunk végig nagybetűvel fog megjelenni. Lehetséges értékek: none,capitalize, uppercase és lowercase, melyek rendre: módosítatlan, első betű nagy, összes betű nagy és összes betű kicsi jelentésűek.

1. h1 { text-shadow: 5px 5px 3px #000000; }  

A tulajdonság hatására egy árnyékot rajzol a böngészőnk a szöveg köré. A pozíciók megadása nem kötelező, a sziné igen. Az egyes értékek jelentése rendre: lefele való távolság, jobbra való távolság, elmosottság sugara, szín. A távolságok negatív értéket is felvehetnek.

1. p { white-space: nowrap; }  

A szóközök, tabulátorok kezelését állíthatjuk a white-space attribútummal. A normal a sorvégeken tördeli a szöveget, a nowrap nem enged sortörést, míg a harmadik lehetséges érték, a pre megtartja egy az egyben a sortöréseket, szóközöket, tabulátorokat (mint a pre HTML elemnél).

1. p { word-spacing: 10px; }  

A szavak közötti távolságot vezérelhetjük ennek a paraméternek a segítségével. Lehetőségünk van negatív értékek megadására is.

1. p { line-height: 20px; }  

A sormagasságot állíthatjuk vele egy paragrafuson belül. Célszerű a betűink méreténél nagyobb sormagasságot beállítani, különben összecsúsznak a sorok.

1. .super { vertical-align: super; }  

A tulajdonsággal az elem függőleges pozícióját tudjuk szabályozni. Egy cellán belül a HTML nyelv td eleménekvalign tulajdonságához hasonlít, azonban szöveg környezetben (például egy div-en belül) a betűkhöz, és nem a befoglaló blokk méreteihez viszonyított igazítást állítja. Az értékei lehetnek: sub, super, baseline, text-top,text-bottom, middle, top, bottom. A példában egy felső index pozíció beállítását láthatjuk.