Proprietăți text

1. Diverse familii de fonturi

Codul în HTML
< p>
Acesta este un element de paragraf, ceea ce înseamnă că prima linie va fi indentată cu 3em (adică de trei ori;< code> calculul < /code>textului din paragraf). Celelalte linii din paragraf nu vor fi indentate, indiferent cât de lung ar fi paragraful.
< /p>
Codul CSS
< style type="text/css">
body {width: 500px;}
p {text-indent: 3em;}
< /style>
Rezultat

Acesta este un element de paragraf, ceea ce înseamnă că prima linie va fi indentată cu 3em (adică de trei ori; calculul textului din paragraf). Celelalte linii din paragraf nu vor fi indentate, indiferent cât de lung ar fi paragraful.


2. Indentarea textului cu procente

Codul în HTML
< div>
< p>
Acest paragraf este conținut în interiorul unui DIV, care are o lățime de 400px, astfel încât primul rând al paragrafului este indentat 40px (400 * 10% = 40). Aceasta este deoarece procentele sunt calculate în raport cu lățimea elementului.
< /p>
< /div>
Codul CSS
< style type="text/css">
body {width: 500px;}
div {width: 400px;}
p {text-indent: 10%;}
< /style>
Rezultat

Acest paragraf este conținut în interiorul unui DIV, care are o lățime de 400px, astfel încât primul rând al paragrafului este indentat 40px (400 * 10% = 40). Aceasta este deoarece procentele sunt calculate în raport cu lățimea elementului.


3. Comportamente selectate ale proprietății Aliniere text

Codul în HTML
< p class="cl1">
Acest paragraf este stilizat < code>text-align: left;< /code> , ceea ce face ca casetele linie din element să se alinieze de-a lungul marginii interioare stângi a conținutului paragrafului.
< /p>
< p class="cl2">
Acest paragraf este stilizat < code>text-align: right;< /code> , ceea ce face ca casetele linie din element să se alinieze de-a lungul marginii interioare din dreapta a conținutului paragrafului.
< /p>
< p class="cl3">
Acest paragraf este stilizat < code>text-align: center;< /code> , ceea ce face ca casetele linie din element să se alinieze la centrua conținutului paragrafului.
< /p>
< p class="cl4">
Acest paragraf este stilizat < code>text-align: justify;< /code> , ceea ce face ca casetele linie din element să se alinieze la ambele margini interioare a conținutului paragrafului.
< /p>
Codul CSS
< style type="text/css">
body {width: 40em; padding: 1em; margin: 0; background: white;} .cl1 {text-align: left;border: 2px dotted gray;} .cl2 {text-align: right;border: 2px dotted gray;} .cl3 {text-align: center;border: 2px dotted gray;} .cl4 {text-align: justify;border: 2px dotted gray;} < /style>
Rezultat

Acest paragraf este stilizat text-align: left; , ceea ce face ca casetele linie din element să se alinieze de-a lungul marginii interioare stângi a conținutului paragrafului.

Acest paragraf este stilizat text-align: right; , ceea ce face ca casetele linie din element să se alinieze de-a lungul marginii interioare din dreapta a conținutului paragrafului.

Acest paragraf este stilizat text-align: center; , ceea ce face ca casetele linie din element să se alinieze la centrua conținutului paragrafului.

Acest paragraf este stilizat text-align: justify; , ceea ce face ca casetele linie din element să se alinieze la ambele margini interioare a conținutului paragrafului.


4. Stânga, dreapta și centru în modurile de scriere verticală

Codul în HTML
< p class="cl1">
Acesta este un paragraf cu alinierea textului la stinga vertical < /p>
< strong>stinga< /strong>
< p class="cl2">
Acesta este un paragraf cu alinierea textului la dreapta vertical < /p>
< strong>dreapta< /strong>
< p class="cl3">
Acesta este un paragraf cu alinierea textului la centru vertical < /p>
< strong>centru< /strong>
Codul CSS
< style type="text/css">
body {margin: 1ch auto; display: grid; grid-template-columns: repeat(3,min-content); grid-template-rows: repeat(2,min-content); grid-gap: 0 5ch;}
p {border: 1px dotted gray; line-height: 1; padding: 0.5em; height: 13em; direction: rtl; writing-mode: vertical-lr;}
.cl1 {text-align: left;}
.cl2 {text-align: right;}
.cl3 {text-align: center;}
strong {text-align: center; font: 1.33em Arvo, sans-serif; margin-top: 1ch;}
< /style>
Rezultat

Acesta este un paragraf cu alinierea textului la stinga vertical

stinga

Acesta este un paragraf cu alinierea textului la dreapta vertical

dreapta

Acesta este un paragraf cu alinierea textului la centru vertical

centru

5. Ultimele linii aliniate diferit


6. Schimbarea spațiului dintre cuvinte

Codul în HTML
< p class="spread">
Spațiile – ca și cele dintre "cuvinte" – din acest paragraf va fi majorată cu 0,5em.
< /p>
< p class="tight">
Spațiile – ca și cele dintre "cuvinte" – din acest paragraf va fi majorată cu 0,5em.
< /p>
< p class="default">
Spațiile – ca și cele dintre "cuvinte" – din acest paragraf nu va fi nici crescuta si nici majorata
< /p>
< p class="zero">
Spațiile – ca și cele dintre "cuvinte" – din acest paragraf nu va fi nici crescuta si nici majorata
< /p>
< p class="larg">
Spațiile dintre cuvintele din acest paragraf vor fi mărite cu un centimetru. Spațiu suficient pentru tine?
< /p>
Codul CSS
< style type="text/css">
p.spread {word-spacing: 0.5em;}
p.tight {word-spacing: -0.5em;}
p.default {word-spacing: normal;}
p.zero {word-spacing: 0;}
p.larg{word-spacing: 1in;}
< /style>
Rezultat

Spațiile – ca și cele dintre "cuvinte" – din acest paragraf va fi majorată cu 0,5em.

Spațiile – ca și cele dintre "cuvinte" – din acest paragraf va fi majorată cu 0,5em..

Spațiile – ca și cele dintre "cuvinte" – din acest paragraf nu va fi nici crescuta si nici majorata

Spațiile – ca și cele dintre "cuvinte" – din acest paragraf nu va fi nici crescuta si nici majorata

Spațiile dintre cuvintele din acest paragraf vor fi mărite cu un centimetru. Spațiu suficient pentru tine?

7. Diferite tipuri de spațiere a literelor

Codul în HTML
< p>
Acest paragraf spațios conține< small> text minuscul, care este doar la fel de spațioasă, < /small> chiar dacă autorul probabil a dorit spațierea trebuie să fie proporțională cu dimensiunea textului.
< /p>
Codul CSS
< style type="text/css">
body {width: 500px;}
p {letter-spacing: 0.25em; font-size: 20px;}
small {font-size: 50%;}
< /style>
Rezultat

Acest paragraf spațios conține text minuscul, care este doar la fel de spațioasă, chiar dacă autorul probabil a dorit spațierea trebuie să fie proporțională cu dimensiunea textului.


8. Calcule simple cu proprietatea înălțime-linie

Codul în HTML
< p>
Acest paragraf moștenește o "înălțime a liniei" de 18px de la corp, precum și o "dimensiune a fontului" de 16px.
< /p>
< p class="cl1">
Acest paragraf are o "înălțime a liniei" de 24px (16 * 1,5), deci Va avea o înălțime a liniei puțin mai mare decât de obicei.
< /p>
< p class="cl2">
Acest paragraf are o "înălțime a liniei" de 15px (10 * 150%), deci Va avea o înălțime a liniei puțin mai mare decât de obicei.
< /p>
< p class="cl3">
Acest paragraf are o "înălțime a liniei" de 0,33 in, deci va avea puțin mai multă înălțime decât de obicei.
< /p>
Codul CSS
< style type="text/css">
body {line-height: 18px; font-size: 16px;}
p.cl1 {line-height: 1.5em;}
p.cl2 {font-size: 10px; line-height: 150%;}
p.cl3 {line-height: 0.33in;}
< /style>
Rezultat

Acest paragraf moștenește o "înălțime a liniei" de 18px de la corp, precum și o "dimensiune a fontului" de 16px.

Acest paragraf are o "înălțime a liniei" de 24px (16 * 1,5), deci Va avea o înălțime a liniei puțin mai mare decât de obicei.

Acest paragraf are o "înălțime a liniei" de 15px (10 * 150%), deci Va avea o înălțime a liniei puțin mai mare decât de obicei.

Acest paragraf are o "înălțime a liniei" de 0,33 in, deci va avea puțin mai multă înălțime decât de obicei.


9. Înălțime mică a liniei, dimensiune mare a fontului, ușoară problemă

Codul în HTML
< div>
< p>
"Dimensiunea fontului" din acest paragraf este de 18px, dar "înălțimea liniei" moștenită valoarea este de numai 10px. Acest lucru poate face ca liniile de text să se suprapună altele cu o sumă mică.
< /p>
< /div>
Codul CSS
< style type="text/css">
body {font-size: 10px; width: 500px;}
div {line-height: 1em;}
p {font-size: 18px;}
< /style>
Rezultat

"Dimensiunea fontului" din acest paragraf este de 18px, dar "înălțimea liniei" moștenită valoarea este de numai 10px. Acest lucru poate face ca liniile de text să se suprapună altele cu o sumă mică.


10. Alinierea liniei de bază a unei imagini

Codul în HTML
< p>
Imaginea găsită în acest paragraf
< img src="star.gif" class="i1"/> are marginea inferioară aliniată cu linia de bază a textului din paragraf.
< /p>
< p>
Imaginea găsită în acest paragraf
< img src="star.gif" class="i2"/> este aliniată la mijlocul textului din paragraf.
< /p>
< p>
Imaginea găsită în acest paragraf
< img src="star.gif" class="i3"/> are marginea superioara aliniata cu linia de baza a textului din paragraf.
< /p>
Codul CSS
< style type="text/css">
.i1 {vertical-align: baseline;}
.i2 {vertical-align: middle;}
.i3 {vertical-align: top;}
< /style>
Rezultat

Imaginea găsită în acest paragraf are marginea inferioară aliniată cu linia de bază a textului din paragraf.

Imaginea găsită în acest paragraf este aliniată la mijlocul textului din paragraf.

Imaginea găsită în acest paragraf are marginea superioara aliniata cu linia de baza a textului din paragraf.


11. Aliniere exponent și indice

Codul în HTML
< p>
Acest paragraf conține text
< span class="sus">superior< /span>
și text < span class="jos">subinferior
< /span>
< /p>
Codul CSS
< style type="text/css">
body {width: 500px;}
span.sus {vertical-align: super;}
span.jos {vertical-align: sub;}
< /style>
Rezultat

Acest paragraf conține textsuperior și text subinferior


12. Aliniere exponent și indice

Codul în HTML
< p>
Aici: o < img src="tall.gif" class="tbot" /> imagine inalta, si apoi o < img src="short.gif" class="tbot"/> imagine.
< /p>
< p>
Aici: o < img src="tall.gif" class="ttop"/> imagine inalta, si apoi o < img src="short.gif" class="ttop" /> imagine.
< /p>
Codul CSS
< style type="text/css">
p {font-size: 2em; margin: 0;}
img.ttop {vertical-align: text-top;}
img.tbot {vertical-align: text-bottom;}
< /style>
Rezultat

Aici: o imagine inalta, si apoi o imagine.

Aici: o imagine inalta, si apoi o imagine.

13. Procente și efecte distractive

Codul în HTML
< p>
Putem fie < sup>să ne înălțăm spre noi înălțimi< /sup>
o, fie, în schimb, < sub>să ne scufundăm în disperare...< /sub>
< /p>
Codul CSS
< style type="text/css">
body {width: 500px;}
p {font-size: 16px; line-height: 16px;}
sub, sup {font-size: 1em;}
sub {vertical-align: -100%;}
sup {vertical-align: 100%;}
< /style>
Rezultat

Putem fie să ne înălțăm spre noi înălțimi o, fie, în schimb, să ne scufundăm în disperare...

14. Diferite tipuri de decorare a textului

Codul în HTML
< p class="one">Text decorat cu linie dedesupt.< /p>
< p class="two">Text decorat cu linie deasupra.< /p>
< p class="three">Acest text a fost decorat cu o linie pe mijloc.< /p>
< p class="four">Acest text nu a fost decorat cu nimic.< /p>
Codul CSS
< style type="text/css">
p {font-size: 1.5em;}
p.one {text-decoration: underline;}
p.two {text-decoration: overline;}
p.three {text-decoration: line-through;}
p.four {text-decoration: none;}
< /style>
Rezultat

Text decorat cu linie dedesupt.

Text decorat cu linie deasupra.

Acest text a fost decorat cu o linie pe mijloc.

Acest text nu a fost decorat cu nimic.

15. Diverse grosimi de decorare

Codul în HTML
< div class="tiny">
< h1>Titlu de nivel 1< /h1>
< p>Un paragraf cu text< /p>
< /div>
< div class="embased">
< h1>Titlu de nivel 1< /h1>
< p>Un paragraf cu text< /p>
< /div>
< div class="percent">
< h1>Titlu de nivel 1< /h1>
< p>Un paragraf cu text< /p>
< /div>
Codul CSS
< style type="text/css">
body {display: flex; justify-content: space-between;}
h1 {margin-top: 0;}
div::after {content: "." attr(class); display: block;
font: 1.5em Consolas, monospace; text-align: center; padding-top: 0.67em; opacity: 0.67;}
h1, p {text-decoration-line: underline;}
.tiny * {text-decoration-thickness: 1px;}
.embased * {text-decoration-thickness: 0.333em;}
.percent * {text-decoration-thickness: 10%;}
< /style>
Rezultat

16. Diverse stiluri de decorare

Codul în HTML
< p class="one">Text cu subliniere solidă.< /p>
< p class="two">Text cu dubla subliniere.< /p>
< p class="three">Text cu subliniere punctata.< /p>
< p class="four">Text cu subliniere punctata.< /p>
< p class="five">Text cu subliniere ondulata< /p>
Codul CSS
< style type="text/css">
p {text-decoration-line: underline; text-decoration-thickness: 0.1em; font-size: 1.5em;}
p.one {text-decoration-style: solid;}
p.two {text-decoration-style: double;}
p.three {text-decoration-style: dotted;}
p.four {text-decoration-style: dashed;}
p.five {text-decoration-style: wavy;}
< /style>
Rezultat

Text cu subliniere solidă.

Text cu dubla subliniere.

Text cu subliniere punctata.

Text cu subliniere punctata.

Text cu subliniere ondulata

17. Diverse stiluri de decorare

Codul în HTML
< p class="one">Subliniere automata.< /p>
< p class="two">Subliniere a fost compesata 2px< /p>
< p class="three">Subliniere a fost compesata -2px.< /p>
< p class="four">Subliniere a fost compesata cu 0.5em< /p>
< p class="five">Subliniere a fost compesata cu 15%< /p>
Codul CSS
< style type="text/css">
p {text-decoration-line: underline; font-size: 1em;}
p.one {text-underline-offset: auto;}
p.two {text-underline-offset: 2px;}
p.three {text-underline-offset: -2px;}
p.four {text-underline-offset: 0.5em;}
p.five {text-underline-offset: 15%;}
< /style>
Rezultat

Subliniere automata.

Subliniere a fost compesata 2px

Subliniere a fost compesata -2px.

Subliniere a fost compesata cu 0.5em

Subliniere a fost compesata cu 15%

18. Umbre simple

Codul în HTML
< p class="um1">Fii cu ochii pe umbre. Se mișcă atunci când nu te uiți. < /p>
< p class="um2">Fii cu ochii pe umbre. Se mișcă atunci când nu te uiți. < /p>
< p class="um3">Fii cu ochii pe umbre. Se mișcă atunci când nu te uiți. < /p>
< p class="um4">Fii cu ochii pe umbre. Se mișcă atunci când nu te uiți. < /p>
< p class="um5">Fii cu ochii pe umbre. Se mișcă atunci când nu te uiți. < /p>
Codul CSS
< style type="text/css">
body {margin: 2em; font-size: 1.5em;}
.um1 {text-shadow: green 5px 0.5em;}
.um2 {text-shadow: rgb(128,128,255) -5px -0.5em;}
.um3 {color: black; text-shadow: gray 2px 2px 4px;}
.um4 {color: white; text-shadow: 0 0 4px black;}
.um5 {color: black; text-shadow: 1em 0.5em 5px red, -0.5em -1em hsla(100,75%,25%,0.33);}
< /style>
Rezultat

Fii cu ochii pe umbre. Se mișcă atunci când nu te uiți.

Fii cu ochii pe umbre. Se mișcă atunci când nu te uiți.

Fii cu ochii pe umbre. Se mișcă atunci când nu te uiți.

Fii cu ochii pe umbre. Se mișcă atunci când nu te uiți.

Fii cu ochii pe umbre. Se mișcă atunci când nu te uiți.


19. Lungimi diferite ale filelor

Codul în HTML
< div class="arena">
< p class="cl1">Acesta este un paragraf de text în limba engleză, în mare parte nestilat.< /p>
< p class="cl2">Acesta este un paragraf de text în limba engleză, în mare parte nestilat.< /p>
< p class="cl3">Acesta este un paragraf de text în limba engleză, în mare parte nestilat.< /p>
< p class="cl4">Acesta este un paragraf de text în limba engleză, în mare parte nestilat.< /p>
< p class="cl5">Acesta este un paragraf de text în limba engleză, în mare parte nestilat.< /p>
< /div>
< div class="labels">
< p>< strong>orizontal-tb< /strong>< /p>
< p>< strong>vertical-rl< /strong>< /p>
< p>< strong>vertical-lr< /strong>< /p>
< p>< strong>lateral-RL< /strong>< /p>
< p>< strong>lateral-LR< /strong>< /p>
< /div>
Codul CSS
< style type="text/css">
.arena {display: flex; width: 80em;}
p {border: 1px dotted; width: 8em; height: 6em; margin: 1em; font-size: 1.5em;}
.cl1 {writing-mode: horizontal-tb;}
.cl2 {writing-mode: vertical-rl;}
.cl3 {writing-mode: vertical-lr;}
.cl4 {writing-mode: sideways-rl;}
.cl5 {writing-mode: sideways-lr;}
div.labels {clear: left; display: flex; translate: 0 -1em;}
div.labels p {width: 8em; text-align: center; height: auto; margin-top: 0; border: 0;}
div.labels p strong {font: bold 90% Consolas, monospace;}
< /style>
Rezultat

Acesta este un paragraf de text în limba engleză, în mare parte nestilat.

Acesta este un paragraf de text în limba engleză, în mare parte nestilat.

Acesta este un paragraf de text în limba engleză, în mare parte nestilat.

Acesta este un paragraf de text în limba engleză, în mare parte nestilat.

Acesta este un paragraf de text în limba engleză, în mare parte nestilat.

orizontal-tb

vertical-rl

vertical-lr

lateral-RL

lateral-LR

20. Orientarea textului

Codul în HTML
< div class="arena">
< p>Acesta este un paragraf de < span lang="jp">日本語< /span> și englez, în mare parte nestilizat. < span lang="jp">これより多くのテキストです。< /span>< /p>
< p class="cl1">Acesta este un paragraf de < span lang="jp">日本語< /span> și englez, în mare parte nestilizat. < span lang="jp">これより多くのテキストです。< /span>< /p>
< p class="cl2">Acesta este un paragraf de < span lang="jp">日本語< /span> și englez, în mare parte nestilizat. < span lang="jp">これより多くのテキストです。< /span>< /p>
< p class="cl3">Acesta este un paragraf de < span lang="jp">日本語< /span> și englez, în mare parte nestilizat. < span lang="jp">これより多くのテキストです。< /span>< /p>
< div class="labels">
< p>< strong>mixed< /strong>< /p>
< p>< strong>drept< /strong>< /p>
< p>< strong>lateral< /strong>< /p>
< /div>
< /div>
Codul CSS
< style type="text/css">
body:hover {filter: grayscale(1);}
[lang="jp"] {color: red;}
.arena p[class] {border: 1px dotted; float: left; width: 12em; height: 9em; margin-right: 2em; margin-left: 0; writing-mode: vertical-lr;}
.cl1 {text-orientation: mixed;}
.cl2 {text-orientation: upright;}
.cl3 {text-orientation: sideways;}
div.labels {clear: left; display: flex;}
div.labels p {width: 12em; text-align: center; height: auto; margin-top: 0.5em; margin-right: 2em;}
div.labels p strong {font: bold 123% Consolas, monospace;}
< /style>
Rezultat

Acesta este un paragraf de 日本語 și englez, în mare parte nestilizat. これより多くのテキストです。

Acesta este un paragraf de 日本語 și englez, în mare parte nestilizat. これより多くのテキストです。

Acesta este un paragraf de 日本語 și englez, în mare parte nestilizat. これより多くのテキストです。

Acesta este un paragraf de 日本語 și englez, în mare parte nestilizat. これより多くのテキストです。

mixed

drept

lateral