<? print $_ASWC_['NAME'];?> - Tanulj, vagy taníts te is on-line!

<- Előző :: Nyomtatási nézet :: Üzenet az írónak :: Köv. ->

Az előző leckében átnéztük a betűk tulajdonságait; de ez még nem elég a szöveg egészének megformázásához.
Ha már meghatároztuk a betűk megjelenési formáit a következő lépés, a szöveg formázása legyen.

1. A szöveg igazítása

Elsőnek nézzük meg az igazítását. Ezt a text-align: tulajdonsággal érhetjük el.
Négyféle értéke lehet:

center: középre igazított
left: balra igazított
right: jobbra igazított
justify: sorkizárt szöveg, margótól-margóig ér

2. A szöveg díszítése

1. A szöveget, illetve egyes szavakat is módunkban áll "díszíteni", a text-decoration: tulajdonsággal.
Ez azt jelenti, hogy a szöveg, illetve szavak egyes megjelenési formáin változtathatunk.

aláhúzhatjuk: underline
áthúzhatjuk: line-through
föléhúzhatunk: overline
illetve a díszítéseket (a linkek - A elem - esetében) eltávolíthatjuk: none

Egyes böngészőkben, mint például a Netscape, villogóvá is tehetjük a szöveget, illetve elemeket, a: blink értékkel.

A{
      color: #000000;
      font-size: 16px;
      text-decoration: overline;
}
A:hover{
      color: #FFFFFF;
      font-size: 10px;
      text-decoration: underline;
}

A fenti példában a link (A elem) alapbeállítása fehér betűszín, 16 pixeles betűméret, és föléhúzott dekoráció.
Amikor a felhasználó a link fölé megy (hover pszeudo osztály) a betűk fehérek lesznek, 10 pixelesek, és a szöveg aláhúzott dekorációt kap.
Ha valamelyik fenti esetben a text-decoration értéke none, akkor a link nem lesz dekorálva.

2. A szöveg egyes betűire a text-transform: tulajdonság alkalmazható.
Értékei:

capitalize: minden szó első betűjét nagybetűvé teszi
uppercase: a szöveg minden betűje nagy lesz
lowercase: minden betű kicsi lesz

3. A bekezdések

A bekezdések, szövegblokkok első sorának behúzását, illetve kitolását a text-indent: tulajdonsággal határozhatjuk meg.
Az értékét vagy százalékosan

#szoveg{
text-indent: 120%;
}

vagy egyszerűen számmal (mértékegység megadásával)

#szoveg{
text-indent: 10px;
}

A tulajdonság felvehet negatív értéket is. Ebben az esetben kitolás történik.
Figyeljünk ilyenkor a kitolás mértékére, mert a sor a margón túlra is tolódhat.
A negatív értéket, százalékosan és számbelileg is megadhatjuk.

#szoveg{
text-indent: -20px;
}

4. Az üres helyek

1. A karakterek közti távolságot a letter-spacing:-el határozhatjuk meg.
Értékét számmal, vagy százalékos formában adhatjuk meg. Itt is adhatunk negatív értéket; ez a betűk közötti távolságot csökkenti. Egyes böngészők támogatják a tizedes számot is, de nem szerencsés a használata.

#szoveg2{
letter-spacing:1em;
}

2. Nemcsak a betűk, de a szavak közötti távolságot is változtathatjuk, a word-spacing: tulajdonsággal.
Értéke a letter-spacing -el megegyező.

5. A sortávolság

A line-height: a sorköz magasságát határozza meg.
Értékeit megadhatjuk százalékosan, konkrét számmal (mértékegységgel), vagy mértékegység nélküli számmal, ami a sortáv aránya, a betűmérethez viszonyítva.

#szoveg3{
      line-height: 1.5;
}
#szoveg4{
      line-height: 150%;
}
#szoveg5{
      line-height: 1.5em;
}

A fenti három megadási mód betűmérethez viszonyított, százalékos, és mértékegységgel meghatározott szám. Ebben az esetben mindhárom ugyanolyan sorközt eredményez.
Ebben az esetben is lehetséges negatív szám megadása; ilyenkor a sortáv csökken.

Témaköreink

DumAblak

On-line

Statisztika

CSS -> A szöveg formázása

1. A szöveg igazítása

2. A szöveg díszítése

3. A bekezdések

4. Az üres helyek

5. A sortávolság

Hello Vendég