CSS stilizarea textului- Curs CSS

Stilizarea textului cu ajutorul CSS

Cu elementele de bază învățate deja, urmează să ne concentrăm asupra stilizării textului, unul dintre cele mai frecvente lucruri pe care le vom face în CSS.

Elemente de bază în stilizarea textului și a fonturilor

Știm deja că textul din interiorul unui element este prezentat în cutia de conținut a elementului. Textul începe în partea stângă sus a zonei de conținut (sau în dreapta în cazul RTL) și curge până termină spațiul alocat, după care coboară pe linia următoare și tot așa până ce tot textul și-a găsit loc în cutie.

Așadar, textul se comportă la fel ca o serie de elemente inline, fiind așezat pe linii adiacente care pot fi întrerupte doar prin utilizarea elementului care creează o rupere de linie - <br>.

Proprietățile cu ajutorul cărora stilizăm textul se împart în două categorii principale:

• stiluri de fonturi - cuprinde proprietăți care specifică fontul aplicat textului și caracteristicile acestuia,
• stiluri de dispunere (machetare) a textului - cuprinde proprietăți care afectează distanța dintre caractere, distanța dintre liniile de text, alinierea textului, precum și altele.

Fonturi

Cu ajutorul unui exemplu, vom vedea la lucru câteva dintre proprietățile aplicabile fonturilor.

Color - Culoare

Proprietatea color definește culoarea conținutului elementului selectat (de obicei text).

  p {
    color: red;
  }

Această regulă va face ca textul paragrafului să aibă culoarea roșie.

Familii de fonturi - Font families

Pentru a seta un font anume vom folosi proprietatea font-family. Aceasta permite specificarea unui font sau a unei liste de fonturi, aplicabile doar dacă sunt disponibile în calculatorul de la care este accesat site-ul. În caz contrar, browserul va aplica un font implicit.

  p {
    font-family: Arial;
  }

Fonturi sigure pentru web - Web safe fonts

Există un număr limitat de fonturi disponibile în general, în mai toate sistemele și prin urmare acestea pot fi utilizate fără grijă.

Lista fonturilor sigure este actualizată pe măsură ce sistemele de operare evoluează și puteți găsi această listă online.

• Arial (Helvetica) - sans-serif
• Courier New (Courier) - monospace
• Georgia - serif
• Times New Roman (Times) - serif
• Trebuchet MS - sans-serif
• Verdana - sans-serif

CSS Font Stack menține o listă a fonturilor sigure pentru web.

Fonturi implicite - Default fonts

CSS definește cinci nume generice pentru fonturi:

• serif - fonturile cu serife au mici fiorituri la capetele caracterelor,
• sans-serif - fonturi fără serife,
• monospace - fiecare caracter are aceeași lățime, de obicei utilizate în afișarea codului,
• cursive - fonturi care imită scrierea de mână,
• fantasy - fonturi decorative.

Aceste tipuri de fonturi sunt foarte generice, iar fontul generat atunci când sunt folosite depinde foarte mult și poate varia în funcție de browser și de sistemul de operare.

Liste de fonturi - Font stacks

Pentru că disponibilitatea unui anumit font este destul de incertă, este indicată utilizarea unei liste de fonturi separate prin virgulă, din care browserul va alege fontul disponibil:

  p {
    font-family: "Trebuchet MS", Verdana, sans-serif;
  }

Lista de mai sus începe cu primul font vizat, iar dacă acesta nu este disponibil, browserul trece la al doilea font și apoi la al treilea și tot așa. Lista este încheiată de un font generic, prin urmare browserul va alege orice font sans-serif disponibil pe sistemul respectiv.

Mărimea fontului - Font size

Cele mai comune unități de măsură utilizate pentru dimensionarea textului sunt:

• px
• em
• rem

O metodă bună în ceea ce privește dimensionarea textului este setarea dimensiunii fontului documentului (html) la 10px, astfel încât matematica ulterioară să fie mai simplă și gruparea dimensiunilor să fie ușor de gestionat.

Font style - Stilul fontului

Este utilizat pentru activarea/dezactivarea textului italic și are valorile:

• normal - setează textul la stilul normal,
• italic - setează textul la versiunea italic a fontului, iar dacă fontul respectiv nu suportă versiunea „italic”, aplică versiunea „oblique”,
• oblique - simulează versiunea „italic” prin înclinarea versiunii normale.

Font weight - Grosimea fontului

Setează cât de gros va fi textul.

• normal, bold - font normal și font îngroșat,
• lighter, bolder - setează grosimea elementului curent cu un pas mai jos sau cu un pas mai sus,
• 100-900 - valori de grosime care oferă un control mai fin.

Text-transform - Transformarea textului

Permite transformarea fontului astfel:

• none - nu permite nicio transformare,
• uppercase - transformă toate caracterele în litere mari,
• lowercase - opusul lui uppercase,
• capitalize - toate cuvintele vor începe cu literă mare,
• full-width - toate caracterele vor fi scrise în interiorul unui spațiu cu lățime fixă, similar cu fontul „monospace”.

Decorațiunile textului - text-decoration

Activează/dezactivează decorațiunile textului. Este foarte des utilizată pentru a elimina sublinierea implicită a linkurilor.

• none - dezactivează decorațiunile deja prezente,
• underline - subliniază textul,
• overline - trasează o linie deasupra textului,
• line-through - taie textul cu o linie.

text-decoration acceptă mai multe valori simultan și este forma prescurtată pentru text-decoration-line, text-decoration-style și text-decoration-color. Puteți utiliza combinații care creează efecte interesante.

Text cu efecte de umbră - Text drop shadows

Puteți aplica efecte de umbră pe text cu ajutorul proprietății text-shadow:

text-shadow: 3px 4px 5px red;

Prima valoare reprezintă decalarea orizontală (stânga/dreapta) a umbrei față de poziția inițială a textului.

A doua valoare reprezintă decalarea verticală (sus/jos).

A treia valoare reprezintă dispersarea umbrei (blur). Culoarea poate fi orice valoare CSS validă.

Aranjarea (dispunerea) textului - Text layout

Alinierea textului - Text alignment

Proprietatea text-align este utilizată pentru a controla modul în care textul este aliniat în cutia de conținut în care se află.

• left - aliniere la stânga,
• right - aliniere la dreapta,
• center - centrează textul,
• justify - face ca textul să se răspândească, modificând decalajele dintre cuvinte, astfel încât toate liniile de text să aibă aceeași lățime.

Înălțimea liniei - Line height

Proprietate cu ajutorul căreia definim înălțimea fiecărei linii de text. Putem utiliza orice unitate de măsură, dar și o valoare fără unitate, care acționează ca un multiplicator. Este considerată cea mai bună opțiune. Dimensiunea fontului este înmulțită pentru a obține înălțimea liniei. Înălțimea liniei este în general cuprinsă între 1.5-2 (spațiu dublu).

  line-height: 1.5;

Spațiile dintre cuvinte și caractere - Letter and word spacing

Sunt folosite mai rar, în special pentru a îmbunătăți lizibilitatea unui font foarte dens și permit setarea distanței dintre litere și/sau cuvinte.

  p::first-line {
    letter-spacing: 2px;
    word-spacing: 4px;
  }

Proprietățile studiate până acum sunt printre cele mai des utilizate, dar există multe alte proprietăți pe care le puteți utiliza uneori:

Stilizarea fonturilor:

• font-variant: - comutare între litere mici și normale,
• font-kerning: - activează/dezactivează spațierea dintre litere,
• font-feature-settings: - activează/dezactivează diferite caracteristici ale fonturilor OpenType,
• font-variant-alternates: - controlează alternativele unui font,
• font-variant-caps: - controlează utilizarea de glife alternative pentru majuscule,
• font-variant-east-asian: - controlează glifele pentru Asia de Est,
• font-variant-ligatures: - controlează ligaturile și formele contextuale,
• font-variant-numeric: - controlează glifele pentru numere și fracții,
• font-variant-position: - controlează glifele de dimensiuni mici, ca superscript/subscript,
• font-size-adjust: - stabilește dimensiunea fontului pe baza înălțimii minusculelor,
• font-stretch: - selectează o față condensată sau extinsă a fontului,
• text-underline-position: - poziția sublinierii textului,
• text-rendering: - oferă informații motorului de randare din browser.

Alinierea textului:

• text-indent: - spațiu orizontal înainte de începutul primei linii,
• text-overflow: - modul în care este semnalizat conținutul ascuns,
• white-space: - modul în care este gestionat spațiul alb,
• word-break: - ruperi de linie la revarsarea textului,
• direction: - direcția textului: rtl sau ltr,
• hyphens: - cratimizarea automată,
• line-break: - modul de rupere a liniilor în limbi asiatice,
• text-align-last: - alinierea ultimei linii,
• text-orientation: - orientarea caracterelor în mod vertical,
• word-wrap: - întreruperi de linie în elemente inline,
• writing-mode: - direcția de scriere: orizontală sau verticală.

Scrierea prescurtată a proprietăților fontului

Multe proprietăți ale fontului pot fi scrise într-o singură linie, într-o anumită ordine: font-style, font-variant, font-weight, font-stretch, font-size, line-height și font-family.

Dintre toate proprietățile de mai sus, doar font-size și font-family sunt obligatorii atunci când se utilizează forma prescurtată.

Proprietățile font-size și line-height trebuie separate de o linie oblică (/).

  font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;

  font: 400 15px/1.4 "Open Sans", sans-serif;

  font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;

Manevrarea direcției textului

În ultimii ani, CSS a evoluat foarte mult și în sensul unui suport mai bun pentru direcționalitatea diferită a conținutului, inclusiv de la dreapta la stânga, dar și de sus în jos (cum este în scrierea japoneză).

Aceste direcționalități diferite se numesc moduri de scriere.

Un mod de scriere în CSS se referă la modul în care curge textul - orizontal sau vertical. Proprietatea writing-mode ne permite să schimbăm modul de scriere.

Nu este necesar să schimbăm modul de scriere doar atunci când lucrăm într-o anumită limbă. Putem face acest lucru și în scop creativ, pentru a crea layout-uri mai interesante pentru utilizatori.

  h6 {
    writing-mode: vertical-rl;
  }

Există trei valori posibile:

• horizontal-tb: - direcția de curgere a textului este de sus în jos,
• vertical-rl: - direcția de curgere a textului este de la dreapta la stânga,
• vertical-lr: - direcția de curgere a textului este de la stânga la dreapta.

În realitate, proprietatea writing-mode setează direcția de afișare în pagină a întregului bloc (de sus în jos, de la dreapta la stânga etc.), iar acest lucru va influența modul de curgere a textului.

Practic, atunci când schimbăm modul de scriere, schimbăm și modul de afișare (direcția de afișare), din block în inline sau invers.

🧠 Quiz - CSS Stilizarea Textului