Sz�veg form�z�sa CSS-sel

Az els� k�rd�s, ami felmer�lhet: Mi�rt form�zzam a sz�veget CSS k�dokkal, ha egy�bk�nt k�t gombnyom�sba telik kiv�lasztani pl. a sz�veg sz�n�t? A v�lasz: mert a CSS-sel form�zottt sz�veg sz�n�t gyorsabban meg tudod v�ltoztatni, ha az �j design-odhoz m�sik sz�n illik.

Sz�n

A sz�veg form�z�s�n�l a sz�n az egyik legfontosabb, amit megadhatsz, itt egy minta k�d:

body {color: black;}

A sz�veg sz�n�t a h�tt�rsz�nhez hasonl�an h�romf�lek�ppen adhatod meg:

• hexadecim�lis k�ddal (ezt haszn�lj�k leggyakrabban, mindig van kett�skereszt, ut�na pedig a hat sz�m vagy bet�, pl . ez a fekete k�dja: #000000)
• a sz�n neve angolul - nyilv�n nem m�k�dik mindegyik, de el�g sok igen (van pl. gold �s silver is, a p�ld�ban is �gy adtam meg a bet�sz�nt), itt nem kell a kett�skereszt
• RGB sz�nk�d, ezt ritk�n haszn�lj�k, de ha m�gis ilyet szeretn�l, �gy tudod megadni: rgb(81,249,115)

Fontos: mindenkinek van a b�ng�sz�j�ben egy alap�rtelmezett be�ll�t�sa bet�- �s h�tt�rsz�nre, ami k�l�nb�zhet a Tiedt�l, ez�rt fontos, hogy ha megadsz egy bet�sz�nt, akkor adj meg h�tt�rsz�nt is (teh�t vagy mindkett�t vagy egyiket se)!

Igaz�t�s

A sz�veget - ahogyan Wordben is - balra, k�z�pre vagy jobbra lehet igaz�tani, illetve lehet sorkiz�rt. A hosszabb sz�vegeket �rdemes sorkiz�rtra �ll�tani, mert �gy szebben mutatnak, a c�meket pedig c�lszer� k�z�pre gaz�tani, ahogy a p�ld�ban:

h1 {text-align:center;}

Al�h�z�s, �th�z�s, "f�l�h�z�s", villog�s

�me a k�dok, a sorrend ugyanaz, mint a c�mben, az utols� pedig a "semmi":

.stilus1 {text-decoration:underline;}
.stilus2 {text-decoration:line-through;}
.stilus3 {text-decoration:overline;}
.stilus4 {text-decoration:blink;}
.stilus5 {text-decoration:none;}

Mire j� ez? Az el�bbiek k�z�l leggyakrabban a none-t haszn�lj�k, mert a linkek automatikusan al�h�zva jelennek meg, �s egyes design-okn�l szebb, ha nincsenek al�h�zva.

Amire vigy�zni kell: hogy al�h�z�sn�l legyen egy�rtelm�, hogy van-e ott link, mert ha �ssze-vissza al�h�zogatsz szavakat, hogy kiemeld �ket, lehet, hogy megt�veszti a l�togat�idat, vagy szimpl�n zavar�nak tal�lj�k majd.

A blink (villog�s) csak Mozill�ban m�k�dik.

Als�- �s fels�index, nagy kezd�bet� automatikusan

Ezek hasznosak, b�r a gportalos oldalakn�l az als�- �s fels�index egy gombnyom�ssal el�rhet�, teh�t itt a nagy kezd�bet� a legnagyobb "�jdons�g". Itt vannak a megfelel� k�dok:

.felsoindex {text-transform:uppercase;}
.alsoindex {text-transform:lowercase;}
.nagykezdobetu {text-transform:capitalize;}

A nagy kezd�bet� �gy n�z ki, szerintem ez lehet j� kiemel�sre, de nem tudn�m v�gigolvasni, ha valaki folyton ezzel �rna:)

Beh�z�s

Ez arra j�, hogy egy bekezd�s t�nyleg beljebb kezd�dj�n, persze ez mindig csak az els� sorra vonatkozik, a k�d alatti sz�veg lesz a p�lda:

p {text-indent:50px;}

�sszefoglal�s:

Szerintem a c�mek k�z�pre igazt�s�t van �rtelme CSS-ben megadni, de az egyszer� sz�veget nem �rdemes CSS-sel ide-oda igaz�tani, mert a sorkiz�r�s lehet, hogy j�l j�n, mert nem kell mindig r�kattintani, �s nem lehet "elfelejteni", mert mag�t�l megcsin�lja, de ha olyan oldalad van, ahol sok mindent �rsz k�z�pre hol kisebb, hol nagyobb bet�m�rettel, hol ilyen, hol olyan sz�nnel �s ennek nincs semmilyen rendszere, nem �ri meg a CSS-sel sz�rakozni.

A m�sik meggondoland� dolog, hogy mi v�ltozhat meg egy �j design-n�l. �n pl. tudom, hogy a bet�m�retet, az igaz�t�sokat �s a bet�t�pust nem fogom b�ntani, teh�t ezt nem is szoktam CSS-sel megadni.

M�g t�bb sz�veg st�lus t�bl�zatos form�ban:

<< vissza a CSS k�dokhoz!