Introducere în formatarea textului CSS
În zilele anterioare, ați fost constrâns să reprezentați textul folosind versiunea veche de CSS. Aveți eticheta pentru a schimba umbrirea și tipografia conținutului, totuși măsurarea a fost împiedicată prin utilizarea dimensiunilor textului pre-caracterizate. Diferitele impacturi, precum intensitatea și impactul, au fost concepute doar în structuri fundamentale, cu ajutorul etichetelor HTML. În prezent, utilizatorul poate utiliza o varietate de proprietăți de formatare a textului CSS pentru a aranja textul pe paginile web în modalitățile sale.
În acest capitol, veți vedea numeroase proprietăți de formatare a textului CSS. Proprietățile de formatare a textului CSS sunt utilizate pentru a proiecta textul, stilul textului, descrie câteva stiluri de formatare etc. Proprietățile vă oferă reprezentarea vizuală a caracterelor, spațiilor, cuvintelor, alineatelor și multe altele.
Lista proprietăților de formatare a textului CSS:
Detalii despre modalitățile de formatare a textului în CSS: -
1) Culoarea textului
Această proprietate poate fi folosită pentru a schimba culoarea textului. Poate fi definit folosind proprietatea culorii.
Exemplu : ilustrarea culorii textului
CSS Text Color Property
Salut Lume….
Bine ați venit la EDUCBA …
Va afișa următoarea ieșire:
2) Alinierea textului
Această proprietate poate fi utilizată pentru a schimba orizontala textului. Poate fi definit utilizând proprietăți de stânga, dreapta, centru, justificare.
Exemplu : ilustrarea alinierii textului
Text Alignment Property
Salut Lume…
Bine ați venit la EDUCBA …
Consultant educațional …
Va afișa următoarea ieșire:
3) Decorarea textului
Această proprietate poate fi utilizată pentru decorarea textului. Poate fi definit utilizând proprietăți subliniate, suprapuse, line-through.
Exemplu : ilustrare de text-decor
Text DecorationProperty
Salut Lume…
Bine ați venit la EDUCBA …
Consultant educațional …
Va afișa următoarea ieșire:
4) Transformarea textului
Această proprietate poate fi folosită pentru a schimba cazurile textului. Poate fi definit utilizând proprietăți majuscule, minuscule, minuscule.
Exemplu : ilustrare a transformării textului
Text Transformation Property
Salut Lume…
Bine ați venit la educba …
Consultant educațional …
Va afișa următoarea ieșire:
5) Indentare text
Această proprietate poate fi folosită pentru a indenta prima linie a textului. Poate fi definit utilizând proprietăți px, cm, pt.
Exemplu : Ilustrație de indentare a textului
Text Indentation Property
Salut Lume…
Bine ați venit la Educba …
Consultant educațional …
Va afișa următoarea ieșire:
6) Spațierea cuvintelor
Această proprietate poate fi folosită pentru a oferi spațiu între cuvinte. Poate fi definit utilizând proprietatea spațiere a cuvintelor.
Exemplu : ilustrarea distanțării cuvintelor
Word Spacing Property
Salut Lume…
Bine ați venit la Educba …
Consultant educațional …
Va afișa următoarea ieșire:
7) Spațiuarea literelor
Această proprietate poate fi folosită pentru a oferi spațiu între caractere. Poate fi definit utilizând proprietatea de spațiere a literelor.
Exemplu : ilustrarea distanțării literelor
Letter Spacing Property
Salut Lume…
Bine ați venit la Educba …
Consultant educațional …
Va afișa următoarea ieșire:
8) Înălțimea liniei
Această proprietate poate fi folosită pentru a oferi spațiu între linii. Poate fi definit prin utilizarea proprietății înălțime a liniei.
Exemplu : ilustrarea înălțimii liniei
Line Height Property
h3
(
line-height:2.5;
)
h4
(
line-height:150%;
)
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) este un
principal furnizor global de educație bazată pe competențe
La eduCBA, este o problemă de mândrie pentru noi să ne orientăm spre locuri de muncă
predă cursuri disponibile oricui, oricând și oriunde.
Va afișa următoarea ieșire:
9) Text-direcție
Această proprietate poate fi folosită pentru a schimba direcția textului. Poate fi definit utilizând proprietatea rtl. Acesta stabilește direcția de la dreapta la stânga.
Exemplu : ilustrarea direcției textului
Text Direction Property
Salut lume … Bine ați venit la Educba …
Va afișa următoarea ieșire:
10) Text-umbră
Această proprietate poate fi folosită pentru a oferi umbră textului. Poate fi definit utilizând proprietatea text-shadow. Utilizează componente precum poziția stângă, poziția de sus, dimensiunea încețoșării, numele culorii.
Exemplu : Ilustrație de text-shadow
Text Shadow Property
h3
(
text-shadow:3px 3px 2px lightblue;
)
h4
(
text-shadow:3px 3px 2px plum;
)
Salut lume … Bine ați venit la EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) este o educație bazată pe competențe
Va afișa următoarea ieșire:
11) Ems
Aceasta este o unitate scalabilă pentru dimensionare. Această proprietate em poate fi utilizată pentru a defini dimensiunea textului în funcție de textul înconjurător. Dimensiunea implicită a textului este 1em, care este egală cu 12pt. 2em este egal cu 24pt și așa mai departe.
Exemplu : ilustrarea proprietății ems
Ems Property
h3
(
font-size: 0.8em;
)
h4
(
font-size: 1.2em;
)
Salut lume … Bine ați venit la EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) este o educație bazată pe competențe
Va afișa următoarea ieșire:
12) Familia fonturilor
Această proprietate este utilizată pentru a furniza diferite tipuri de nume de fonturi pentru textul selectat. De exemplu, Helvetica, Calibri, Arial, Sans-serif, Times, Courier New, etc.
Exemplu : ilustrarea proprietății font-family
Font Family Property
Salut Lume…
Bine ați venit la Educba …
Consultant educațional …
Va afișa următoarea ieșire:
Concluzie
Până în prezent, am studiat modalitățile de formatare a textului în CSS. Puteți vedea textul este prezentat cu diferite tipuri de proprietăți de formatare a textului. Aceste proprietăți sunt aspecte foarte importante ale CSS pentru a afișa textul pe pagina web, astfel încât utilizatorii sau cititorii să poată fi atrasi văzând textul dvs. pe site-ul web. Utilizați aceste proprietăți de text foarte ușor și eficient pe paginile web.
Articole recomandate
Acesta a fost un ghid pentru formatarea textului CSS. Aici am discutat despre o introducere și o listă a proprietăților de formatare a textului CSS în detaliu, cu exemple de cod de probă și ieșire corespunzătoare. Puteți parcurge și alte articole sugerate pentru a afla mai multe -
- Ce este CSS?
- SASS vs CSS
- Comenzi CSS
- Întrebări de interviu CSS3