Ugrás a főoldalra!

Felhasználónév:

Jelszó:

 :: ".$_ASWC_['NAME']." ".$_ASWC_['VERSION']." ".$_ASWC_['STATUS'];?> - [Látogatók: ]  
Freelance Jobs

Témaköreink

 


On-line

Dev, Admin: 0
Lektorok, írók: 1
  ÷Magus|BOT
Felhasználók: 0
Vendégek: 1
Tegnap: 0
E havi:
 

Statisztika

Oktatóanyagok száma
 Publikus: 128

Legolvasottabb írónk
 outesticide 362428

Legszorgalmasabb írók
1. balymo 24
2. outesticide 20
3. tipli 19
4. adrob 18
5. akciolap 15

Legolvasottabb címek
1. CSS
Egyszerü vízszintes menü és vízszintes menü legördülő almenükkel [55277]
2. CSS
Bevezetés a CSS alapjaiba [30769]
3. CSS
A pozícionálás, és a z-index [30256]
4. CSS
A felhasználói felület - első rész [24599]
5. CSS
Függőleges menü, legördülő almenüvel [24469]
 

 

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

Író: outesticide ( outesticide@netoktato.hu )
  http://vajdasag.rs
Készült: 2005-03-26 14:33:18
Lektorálta: Wicky
Lektorálva:
2005-10-01 13:03:24 [14214]
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.
* Minden további kérdéseddel fordulj az anyag írójához.

 

Hello Vendég

Az oktatóanyagok olvasásához be kell jelentkezned.

Szeretnék regisztrálni.

Elfelejtettem a jelszavam!
Kiküldöm magamnak!