Ghid pentru formatarea textului în CSS

Când proiectați un site web, formatarea textului este un aspect important al creării unei interfețe atractive și lizibile.

CSS oferă mai multe proprietăți care vă permit să personalizați diferite elemente de text, inclusiv culoarea fontului, dimensiunea, familia, alinierea, spațierea și multe altele.

Mai jos este un ghid detaliat despre fiecare proprietate de formatare a textului, împreună cu exemple pentru fiecare proprietate.

 

Culoare font

Parametru: o valoare de culoare, care poate fi un nume de culoare(de exemplu, red), un cod hexadecimal(de exemplu, „#FF0000”), o valoare RGB(de exemplu, „rgb(255, 0, 0)”) sau o valoare RGBA(de ex., "rgba(255, 0, 0, 0,5)").

p {  
  color: blue;  
}  

 

Marimea fontului

Parametru: o valoare de dimensiune, care poate fi în pixeli(de exemplu, „16px”), unități em(de exemplu, „1em”), unități rem(de exemplu, „1.2rem”), unități de lățime a ferestrei de vizualizare(de exemplu, „10vw”), unități de înălțime a ferestrei(de exemplu, „5vh”) sau alte unități.

h1 {  
  font-size: 24px;  
}  

 

Familie de fonturi

Parametru: o listă de familie de fonturi, specificată în ordinea preferată. Puteți specifica numele fontului(de exemplu, Arial) sau includeți numele fonturilor care conțin caractere speciale între ghilimele duble(de exemplu, " Times New Roman).

body {  
  font-family: Arial, sans-serif;  
}  

 

Greutatea și stilul fontului

Parametru font-weight: normal(default), bold, , sau valori numerice de la 100 la 900 bolder. lighter

Parametrul font-style: normal(default), italic.

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

 

Decorare text

Parametru: "none"(default), "underline", "overline", "line-through"  sau o combinație de valori separate prin spații.

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

 

Alinierea textului

Parametru: "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

 

Înălțimea liniei și marginile

Parametru line-height: O valoare numerică sau un procent din dimensiunea curentă a fontului.

Marja parametrului: o valoare de măsurare, cum ar fi pixeli(px), unități em(em), unități rem(rem) etc.

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

 

Aspect text cu mai multe coloane

Parametru: Un întreg pozitiv sau "auto"(default).

.container {  
  column-count: 2;  
}  

 

Schimbarea culorii textului la trecerea cursorului

Niciun parametru specific, utilizați doar pseudo-clasa :hover.

a:hover {  
  color: red;  
}  

 

Schimbarea culorii textului în stare(activ, vizitat)

Niciun parametru specific, utilizați doar pseudo-clasele :active  și :visited.

a:visited {  
  color: purple;  
}  

 

Sperăm că explicațiile și exemplele de mai sus v-au ajutat să înțelegeți cum să utilizați și să personalizați proprietățile de formatare a textului în CSS pentru a crea o interfață de text atrăgătoare și captivantă pe site-ul dvs. web.