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 a 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á.

CSS alapok (A CSS alapjainak összefoglalója) című cikk nyitóképe

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

CSS kód

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

Eredmény

Szövegszín

>> 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

CSS kód

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

Eredmény

Háttérszín

>> 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

CSS kód

.p1 {
  text-align: left;
}

.p2 {
  text-align: right;
}

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

Eredmény

Balra igazít

Jobbra igazít

Középre igazít

>> 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

CSS kód

.p1 {
  text-decoration: underline;
}

.p2 {
  text-decoration: overline;
}

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

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

Eredmény

Aláhúzás

Fölülvonás

Áthúzás

egyik sem

>> 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

CSS kód

.p1 {
  text-transform:uppercase;
}

.p2 {
  text-transform:lowercase;
}

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

Eredmény

előtte: kisbetűt változtat naggyá

utána: kisbetűt változtat naggyá


ELŐTTE: NAGYBETŰT VÁLTOZTAT KICSIVÉ

UTÁNA: NAGYBETŰT VÁLTOZTAT KICSIVÉ

előtte: minden szó első betűjét változtatja naggyá

utána: minden szó első betűjét változtatja naggyá

>> 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

CSS kód

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

Eredmény

Árnyékolt szöveg.

>> 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!