Cauta rapid aici ↑

CSS - TEXT

In CSS este foarte usor sa stilizam orice continut text. Stiluri precum schimbarea colorii, afisarea unui text subliniat, marirea spatiului dintre literele sau cuvintele textului sunt numai cateva din ceea ce putem face la un continut text.

CULOAREA TEXTULUI

Pentru a schimba culoarea unui text se foloseste proprietatea → color ← care va avea ca valoare oricare din urmatoarele optiunii.

  • o valoare hexazecimala
  • un nume de culoare
  • o valoare rgb()
  • o valoare rgba()
  • o valoare hsl()
  • o valoare hsla()

ALINIEREA TEXTULUI

Pentru a face ca un text, indiferent ca reprezinta un titlu sau un paragraf sau orice altceva, sa fie aliniat la stanga, dreapta sau pe centru se va folosi proprietatea → text-align ← si caruia ii vom da cele patru valorii pe care le poate primi.

  • left → aceasta valoare este cea default si alinieaza textul la marginea din stanga in spatiului unde se afla
  • right → aceasta valoare alinieaza textul la marginea din dreapta in spatiului unde se afla
  • center → aceasta valoare alinieaza textul pe centrul spatiului unde se afla
  • justify → aceasta valoare face ca textul sa fie aliniat si la stanga si la dreapta sau altfel spus, textul nu va lasa spatiu catre marginea din stanga sau dreapta

DECORARE DE TEXT

Aceasta decorare presupune afisarea unei linii sub text, deasupra textului sau pe mijlocul acestuia, ca si cum l-ar taia. Proprietatea text-decoration va avea patru valorii.

  • underline → va afisa o linie sub text
  • overline → va afisa o linie deasupra textului
  • line-through → va afisa o linie pe mijlocul textului lasand impresia ca il taie
  • none → nu va afisa nici-o linie

FORMATAREA TEXTULUI

Sunt situatii in care nu vrem sa pierdem timp cu formatarea unui text, mai ales daca acesta nu este scris de noi si este foarte lung. Pentru a rezolva aceasta problema limbajul CSS vine cu proprietatea → text-transform ← care va avea urmatoarele trei valori.

  • uppercase → va afisa intreg textul cu litere mari
  • lowercase → va afisa intreg textul cu litere mici
  • capitalize → prima litera de la orice cuvant din text o va afisa mare

INDENTAREA TEXTULUI

Pentru a indenta primul rand al unui text se va folosi proprietatea → text-indent ← care va avea ca valoare numarul de pixeli cu care dorim sa indentam acel rand.

IN URMATORUL EXEMPLU SUNT APLICATE MAI MULTE STILURI PE TEXT DE TIP TITLU SAU PARAGRAF

Pentru stilizarea textului mai sunt si alte proprietatii care fac ca textul sa arate si mai personalizat.

PROPRIETATEDESCRIERE
colorseteaza culoarea la un text
directionspecifica directia in care este scris textul
letter-spacingseteaza distanta dintre caracterele unui text
line-heightseteaza inaltimea liniei
text-alignspecifica alinierea textului pe orizontala
text-decorationspecifica un text decorat cu o linie (sub text, deasupra textului sau text taiat)
text-indentspecifica o indentare a textului
text-shadowspecifica un efect de umbra aplicat pe text
text-transformcontroleaza un text capitalizat
vertical-alignseteaza alinierea pe verticala in interiorul elementului
white-spacespecifica modul in care este manipulat spatiul in interiorul unui element
word-spacingspecifica distanta dintre cuvintele unui text