CSS szövegformázás (Szövegszín, szövegigazítás, szövegátalakítás, szövegdekoráció, szövegárnyék, szöveg háttér)

Ebben az összefoglaló cikkben különböző CSS szövegformázási lehetőségekről lesz szó. Bemutatjuk az összes fontosabb és nélkülözhetetlen szövegformázási lehetőséget CSS-ben. Minden CSS szövegformázási módszernek megmutatjuk a szintaktikáját, továbbá példát is hozunk rá.

Lássuk melyek tekinthetőek a legfontosabb CSS szövegformázási módszereknek:

• szövegszín
• szöveg háttérszín
• szövegigazítás
• szövegdekoráció
• szövegátalakítás
• szövegárnyék

Ezeket a CSS szövegformázásokat az összes HTML szövegtípusú elemen használhatod.

Szövegszín

Lehetőségünk van egy szöveg színének beállítására. Ez akkor jöhet nagyon jól, ha szeretnénk kiemelni valamilyen szöveges tartalmat a weboldalon, vagy ha megváltoztattuk a szöveg hátterét és nem látszódik a szöveg.

Szövegszín szintaktika

color: SZÍN(KÓD);
Code language: HTTP (http)

A color tulajdonság után kell megadnunk, hogy milyen színűre szeretnénk állítani a szöveg színét. A szöveg színét megadhatjuk angol névvel, vagy valamilyen színkóddal is. A módszert te választod, az eredmény ugyanaz lesz.

Példa szövegszín megadására

p {
  color: red;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Szöveg háttérszín

Nem csak a szöveg színét, de még a szöveg hátterét is módosíthatjuk. Ezzel elkerülhetjük, hogy a szöveg és a háttér színe azonos legyen. A szöveg jól olvashatósága miatt érdemes egymással kontrasztos színeket választani. Ilyen például a fehér hátteren a fekete szín.

Szöveg háttérszín szintaktika

background-color: SZÍN(KÓD);
Code language: HTTP (http)

A color tulajdonsághoz képest csak annyi változik, hogy a color szó elé bekerül egy „background-„. Utána ugyanúgy a színt következik névvel, vagy színkóddal.

Példa szöveg háttérszín megadására

p {
  background-color: red;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Szövegigazítás

Aki használt már Word-öt vagy bármilyen szövegszerkesztőt, az nagyon jól tudja, hogy ott van lehetőség szövegigazításra. Amellyel azt szabhatjuk meg, hogy a szöveg balra, középre vagy éppen középre legyen igazítva. Természetesen ne feledkezzünk meg a jó öreg sorkizártról sem. Ugyanezeknek a használatára van lehetőségünk a CSS nyelvben is.

Szövegigazítás szintaktika

text-align: IGAZÍTÁS;
Code language: HTTP (http)

Az igazítás ezeket az értékeket veheti fel:

• left (balra igazítja a szöveget)
• right (jobbra igazítja a szöveget)
• center (középre igazítja a szöveget)
• justify (sorkizárt szövegigazítás)
• initial (alapértelmezett szövegigazítás)
• inherit (örökölt szövegigazítás)

Példa szövegigazításra

.p1 {
  text-align: left;
}

.p2 {
  text-align: right;
}

.p3 {
  text-align: center;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Szövegdekoráció

A szövegdekoráció segítségével „dekorációt” adhatunk hozzá a szöveghez. Ezt a text-decoration tulajdonsággal érhetjük el, mely az alábbi értékeket veheti fel:

• underline (aláhúzás)
• overline (fölülvonás)
• line-through (áthúzás)
• none (egyik sem)

Szövegdekoráció szintaxis

text-decoration: DEKORÁCIÓTÍPUS;
Code language: HTTP (http)

A dekoráció típusához a fent felsorolt értékeket lehet megadni: underline, overline, line-through, none.

Példa szövegdekorációra

.p1 {
  text-decoration: underline;
}

.p2 {
  text-decoration: overline;
}

.p3 {
  text-decoration: line-through;
}

.p4 {
  text-decoration: none;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Szövegátalakítás

CSS-el lehetőségünk van a szöveg megváltoztatására, ezalatt a kisbetűs és nagybetűs megjelenésre kell gondolni. Plusz lehetőségünk van arra is, hogy kicserélje a szó első betűjét nagybetűre.

Szövegátalakítás szintaxis

text-transform: TÍPUS;
Code language: HTTP (http)

A típus helyére ezek az értékek kerülhetnek:

• uppercase (nagybetű)
• lowercase (kisbetű)
• captitalise (szó első betűjét teszi naggyá)
• initial (alapértelmezetten hagyja)
• inherit (örökli az átalakítás módját)

Példa szövegátalakításra

.p1 {
  text-transform:uppercase;
}

.p2 {
  text-transform:lowercase;
}

.p3 {
  text-transform:capitalize;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Szövegárnyék

Lehetőségünk van a képernyőn megjelenő szövegre árnyékolás effektet tenni, melynek meghatározhatjuk a horizontális, a vertikális méretét és a színét is.

Szövegárnyék szintaxis

text-shadow: HORIZONTÁLIS.MÉRET VERTIKÁLIS.MÉRET SZÍN
Code language: CSS (css)

A horizontális és vertikális méretet célszerű pixelben megadni, a színt pedig természetesen megadhatjuk angol névvel vagy színkóddal is.

Példa szövegárnyékolásra

p {
  text-shadow: 2px 2px red;   
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!