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!