Alinierea textului în CSS: proprietatea text-align. Alinierea elementelor în HTML

Continuând „săpăturile mele CSS”, a apărut o nouă idee de a diseca un alt subiect de actualitate, care se referă la alinierea uniformă a blocurilor în lățime. În principiu, am postat deja cercetarea mea amănunțită pe blogul meu, dar întrucât comunității Habra i-a plăcut foarte mult munca mea din trecut, am decis să fac aici o scurtă prezentare generală a acestui articol, astfel încât niciun suflet Habra să nu-l rateze cu siguranță. Deci, așa cum a spus Gagarin: „Hai să mergem”.

În general, în sarcinile de layout, apar periodic momente când devine necesară alinierea unei liste la lățimea ecranului. În acest caz, elementele din această listă ar trebui să fie aliniate uniform, apăsând elementele lor exterioare pe marginile containerului, iar distanța dintre ele ar trebui să fie aceeași.

Figura arată că punctele sunt aliniate în lățime, adiacente pereților laterali și fac indentări între ele - echivalente.

Cum functioneaza?

În esență, trebuie să obținem ceea ce text-align: justify face textului. Deoarece comportamentul blocurilor noastre este foarte similar cu rezultatul alinierii cuvintelor într-o linie folosind această proprietate particulară. Cred că mulți oameni au deja o idee aproximativă despre ce este această proprietate și cum funcționează.

* În această recenzie, nu am postat o analiză a etapelor întregului algoritm, puteți citi despre acest lucru în articolul în sine. Principalul lucru este că înțelegeți esența.

Sarcina noastră

Sarcina noastră este să construim o soluție bazată pe acest algoritm. Aplicați, simulați, înlocuiți, faceți ce doriți, principalul lucru este să obținem ceea ce ne dorim până la urmă. Și anume, elemente aliniate uniform într-o linie, ale căror laterale sunt presate pe marginile lor. Și, desigur, distanțele (spațiile) dintre aceste elemente trebuie să fie absolut aceleași pentru orice lățime a containerului.

* Aș dori să vă informez imediat că au existat de fapt 4 opțiuni (funcționează și nu atât de funcțional), plus o grămadă de nuanțe interesante și utile analizate pentru un articol uriaș (în stilul meu). Prin urmare, aici voi descrie pe scurt câteva dintre ele :)

Opțiuni 3

Dar a treia opțiune este deja construită pe text-align: justificați algoritmul în sine și blocurile inline, care au dat roade, dar nu în totalitate. În primul rând, a trebuit să diluez lista cu un element suplimentar, suplimentar, iar în al doilea rând, s-au descoperit fapte interesante în IE6-7, ceea ce mi-a făcut mare plăcere să răsfoiesc. În aceste browsere, această soluție a refuzat deloc să funcționeze. Și ghici cine mi-a venit în ajutor. Așa este, SelenIT2! Dar nu a venit singur, ci cu o idee grozavă (pe care a furat-o cu nebunie de la colegul nostru comun de la GreatRash), de la care am fost pur și simplu șocat. După cum se dovedește, câteva proprietăți magice CSS3 din cele mai vechi timpuri pot transforma această soluție într-o soluție între browsere și pot face text-align: justificați munca în vechiul nostru IE6-7.

Întregul secret era în ultima linie a următorului cod:
ul ( font: 14px Verdana, Geneva, sans-serif; text-align: justify; /* Zero pentru părinte*/ line-height: 0; font-size: 1px; /* 1px pentru Opera */ /* Cure for IE6 -7*/ text-justify: ziar )
După cum puteți vedea, folosind text-justify: ziar; la ul opțiunea noastră devine cross-browser. Acest lucru se datorează faptului că proprietatea text-justify: ziar are scopul de a mări sau micșora distanța dintre litere și dintre cuvinte. MSDN susține că acest lucru este „Cea mai sofisticată formă de aliniere pentru alfabetul latin”, dar în acest articol există și o adăugare că, pentru textele arabe, această proprietate extinde literele în sine.

Opțiuni 4

Ei bine, opțiunea 4 a fost o respingere a markupurilor suplimentare, ceea ce a dus la noi probleme în IE6-7.

Se pare că ideea este că text-justify: ziarul face posibilă doar întinderea literelor noastre (inline-block), dar nu și comanda. Mai simplu spus, îi spune șirului cum ar dori să fie întins și text-align: justify este forța de întindere. Acestea. text-align: justify este responsabil pentru întinderea liniei, iar text-justify: newspaper specifică doar cum va avea loc exact această întindere.

În revizuirea opțiunii a 3-a, am spus că SelenIT2 mi-a sugerat două proprietăți, dintre care una (text-justify: ziar) ne-a ajutat în varianta anterioară, iar cealaltă ne-a ajutat în aceasta! Mai mult, de această dată s-au unit și cu forță dublă au reușit să învingă ultima variantă.
ul ( font: 14px Verdana, Geneva, sans-serif; text-align: justify; /* Zero pentru părinte*/ line-height: 0; font-size: 1px; /* 1px pentru Opera */ /* Cure for IE6 -7*/ text-justify: newspaper:1 /* Include ultima linie în lucrare */ text-align-last: justify;
Intalneste-ne! text-align-last- o proprietate care activează algoritmul text-align: justify în ultima linie de text, dacă același text-align: justify este aplicat acestuia. Mai simplu spus, atunci când aplicăm text-align obișnuit: justify la text, atunci, văzând asta, text-align-last îi spune primului că face ceva rău și că acum va trebui să lucreze și la ultima linie.

Apropo, aceste proprietăți sunt specificate, și nu un fel de chestii proprietare (cu excepția ziarul de valoare, care acum este numit diferit). Deci nici un pisoi nu va avea de suferit) Și vreau să subliniez că eroarea IE6-7 a fost depășită folosind CSS3 - cine a mai văzut asta vreodată? :)

În general, pentru a rezuma recenzia, aș dori să spun că mă bucur că am reușit să găsesc o soluție cu adevărat demnă. Și nu este ușor de găsit, ci să înțelegi totul și să-l aduci la compatibilitate absolută între browsere, folosind un minim de cod și fără a înfunda marcajul.

Dacă o scurtă recenzie nu a fost suficientă pentru cineva, atunci recomand să citești acest articol (deja mare) cu un debriefing amănunțit. Dar, te avertizez! Articolul nu este într-adevăr mic, așa că înainte de a începe să citiți, este mai bine să vă aprovizionați cu prăjiturile și ceaiul preferat :)

Etichete: Adăugați etichete

text CSS reprezintă un set de proprietăți pentru formatarea conținutului text al paginilor web. Folosirea stilurilor CSS pentru a formata textul vă permite să dați elementelor HTML aspectul dorit, astfel încât etichetele HTML să poată fi utilizate numai în scopul propus - pentru a defini structura documentului.

Despre proprietățile textului adăugate la specificație CSS3- text-overflow, word-break, word-wrap, poate fi citit.

Formatarea textului în CSS

1. Alinierea orizontală a textului

Proprietatea aliniază liniile de text din interiorul unui bloc în lățime în raport cu marginile acestuia. Se aplică numai elementelor bloc, cum ar fi paragrafele. Mostenit.


Valori:
stânga	Aliniați la marginea din stânga a elementului. Valoare implicită pentru limbile care citesc de la stânga la dreapta.
dreapta	Aliniați la marginea dreaptă a elementului.
centru	Element Center Align controlează mai degrabă alinierea conținutului decât elementele în sine. Centrează fiecare linie de text într-un element.
justifica	Aliniați la lățimea elementului. În textul justificat, ambele capete ale liniei sunt apăsate pe marginile din stânga și din dreapta ale elementului părinte. Spațiile dintre cuvinte și litere sunt distribuite astfel încât lungimea tuturor liniilor să fie egală. Diferitele browsere pot crește atât indentarea dintre cuvinte, cât și spațierea dintre litere.
iniţială
moşteni

Sintaxă

P (alinierea textului: stânga;) p (alinierea textului: dreapta;) p (alinierea textului: centru;) p (alinierea textului: justificarea;)
Orez. 1. Proprietatea text-align

2. Text-indentare

Setează indentarea (padding) pe prima linie a unui element, creând iluzia textului structurat. Se aplică oricărui element bloc, valoarea implicită este 0. Dacă există o imagine pe prima linie a unui element bloc, aceasta se va muta împreună cu restul textului. Mostenit.

Sintaxă

P (indentare text: 5px;) p (indentare text: 2%;)
Orez. 2. Proprietatea text-indent

3. Linie-înălțime

Orez. 3. Recipient de sfoară

Proprietatea specifică distanța dintre liniile de bază ale liniilor de text, determinând cantitatea cu care înălțimea blocului fiecărui element este mărită sau micșorată. Controlează spațierea între rânduri — spațiul suplimentar dintre liniile de deasupra și dedesubtul textului. Pentru a determina distanța dintre linii, trebuie să găsiți diferența dintre înălțimea liniei și dimensiunea fontului, împărțiți diferența la două și adăugați fiecare jumătate în zona de conținut de deasupra și dedesubt. Acceptă numai valori pozitive. Spația dintre linii standard este echivalentă cu 120%.

Dacă valorile înălțimii și înălțimii liniei sunt egale, acesta aliniază textul în înălțime. Mostenit.

Sintaxă

H1 (înălțimea liniei: 20px;) h1 (înălțimea liniei: 200%;) h1 (înălțimea liniei: 1,2;) h1 (înălțimea liniei: normal;)
Orez. 4. Exemplu de afișare a diferitelor valori de spațiere între linii

4. Aliniere verticală vertical-align

Se aplică numai elementelor inline, imaginilor și câmpurilor de formular. Nu aliniază conținutul unui element bloc. Nu moștenit.

vertical-align
Valori:
de bază	Aliniază linia de bază a elementului cu linia de bază a părintelui său, aliniind linia centrală a elementului cu linia centrală a elementului părinte.
sub	Face indicele elementului (similar cu eticheta _{). Suma de retrogradare a unui element poate varia în funcție de browserul utilizatorului.}
super	Face ca elementul superscript (similar cu eticheta ^{). Cu toate acestea, valorile sup și super nu modifică dimensiunea fontului în mod implicit, textul elementelor superscript și indicele are aceeași dimensiune ca și textul elementului părinte.}
top	Marginea superioară a elementului se aliniază cu marginea superioară a celui mai înalt element din linie.
text-top	Marginea superioară a elementului se aliniază cu marginea superioară a fontului elementului părinte.
mijloc	Linia mediană a unui element (de obicei o imagine) este aliniată cu o linie prin mijlocul elementului părinte.
fund	Marginea de jos a elementului este aliniată cu marginea de jos a elementului cel mai de jos din linie.
text-de jos	Marginea de jos a elementului se aliniază cu marginea de jos a fontului elementului părinte.
lungime	Setează o valoare în unități de lungime, deplasând elementul la o distanță specificată.
%	Nu permite setarea mijlocului, se calculează ca parte a înălțimii liniei a elementului, nu a părintelui său, de exemplu. Dacă setați alinierea verticală la 50% pentru un element cu înălțimea liniei de 20 px, linia de bază a elementului va crește cu 10 px.
iniţială	Setează valoarea proprietății la valoarea implicită.
moşteni	Moștenește valoarea proprietății de la elementul părinte.

CSS	Internet Explorer		Crom	Operă	Safari	Firefox	Android	iOS
2.1	6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+
3			2.0+	11.6+	3.1+	3.6+	2.1+	2.0+

informatie scurta

versiuni CSS

Valori

center Aliniază textul la centru. Textul este plasat orizontal în fereastra browserului sau containerul în care se află blocul de text. Liniile de text par să fie înșirate pe o axă invizibilă care se întinde în centrul paginii web. Această metodă de aliniere este utilizată în mod activ în titluri și diferite semnături, cum ar fi legendele, oferă un aspect oficial și solid designului textului; În toate celelalte cazuri, alinierea la centru este rar utilizată pentru că este incomod să citiți o cantitate mare de astfel de text. justify Justified, ceea ce înseamnă aliniat la stânga și la dreapta în același timp. Pentru a efectua această acțiune, browserul în acest caz adaugă spații între cuvinte. stânga Aliniază textul la stânga. În acest caz, liniile de text sunt aliniate la stânga, iar marginea dreaptă este aranjată ca o scară. Această metodă de aliniere este cea mai populară pe site-uri web, deoarece permite utilizatorului să caute cu ușurință o nouă linie și să citească confortabil text mare. dreapta Aliniază textul la dreapta. Această metodă de aliniere acționează ca un antagonist față de tipul anterior. Și anume, liniile de text sunt aliniate la marginea dreaptă, în timp ce stânga rămâne „ruptă”. Deoarece marginea stângă nu este aliniată, care este locul în care sunt citite linii noi, acest text este mai greu de citit decât dacă ar fi aliniat la stânga. Prin urmare, alinierea la dreapta este de obicei folosită pentru titluri scurte de cel mult trei linii. Nu luăm în considerare site-uri specifice în care textul trebuie citit de la dreapta la stânga, unde poate o metodă similară de aliniere va fi utilă. auto Nu schimbă poziția elementului. inherit Moștenește valoarea părintelui. start La fel ca la stânga dacă textul merge de la stânga la dreapta și la dreapta când textul merge de la dreapta la stânga. sfârșit La fel ca la dreapta dacă textul merge de la stânga la dreapta și la stânga când textul merge de la dreapta la stânga.

HTML5 CSS2.1 IE Cr Op Sa Fx

aliniere text

Alinierea la stânga

Alinierea la centru

Alinierea la dreapta

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Aliniați textul în browserul Safari

Internet Explorer până la versiunea 7.0 inclusiv interpretează acest exemplu oarecum diferit față de alte browsere, aliniind nu numai textul, ci și blocurile (Fig. 2).

Orez. 2. Alinierea textului în Internet Explorer 7

Model de obiect

document.getElementById("elementID").style.textAlign

Browsere

IE până la 7.0 inclusiv aliniază nu numai conținutul unui element la nivel de bloc, ci și elementul în sine.

Fiecare designer de layout se confruntă în mod constant cu nevoia de a alinia conținutul într-un bloc: orizontal sau vertical. Există mai multe articole bune pe acest subiect, dar toate oferă o mulțime de opțiuni interesante, dar puține practice, motiv pentru care trebuie să aloci timp suplimentar pentru a evidenția punctele principale. Am decis să prezint aceste informații într-o formă care îmi este convenabilă, ca să nu mai caut pe google.

Alinierea blocurilor cu dimensiuni cunoscute

Cel mai simplu mod de a utiliza CSS este alinierea blocurilor care au o înălțime cunoscută (pentru alinierea verticală) sau lățime (pentru alinierea orizontală).

Alinierea folosind umplutură

Uneori nu puteți centra un element, ci îi puteți adăuga margini folosind „ umplutura".

De exemplu, există o imagine de 200 x 200 pixeli și trebuie să o centrați într-un bloc de 240 x 300. Putem seta înălțimea și lățimea blocului exterior = 200px și adăugați 20 de pixeli în partea de sus și de jos , și 50 la stânga și la dreapta.

.example-wrapper1 ( fundal : #535E73 ; lățime : 200 px ; înălțime : 200 px ; umplutură : 20 px 50 px ; )

Alinierea blocurilor poziționate absolut

Dacă blocul este setat la " poziție: absolută", apoi poate fi poziționat relativ la cel mai apropiat părinte cu „poziție: relativă". Aceasta necesită toate proprietățile (" top","dreapta","fund","stânga„) din blocul interior pentru a atribui aceeași valoare, precum și „marja: auto”.

*Există o nuanță: lățimea (înălțimea) blocului interior + valoarea stânga (dreapta, jos, sus) nu trebuie să depășească dimensiunile blocului părinte. Este mai sigur să atribuiți 0 (zero) proprietăților din stânga (dreapta, jos, sus).

.example-wrapper2 ( poziție : relativă ; înălțime : 250 px ; fundal : url(space.jpg) ; ) .cat-king ( lățime : 200 px ; înălțime : 200 px ; poziție : absolut ; sus : 0 ; stânga : 0 ; jos : 0 ; dreapta : 0 ;

Aliniere orizontala

Alinierea folosind „text-align: center”

Pentru a alinia textul într-un bloc există o proprietate specială " aliniere text". Când este setat la " centru„Fiecare linie de text va fi aliniată orizontal. Pentru textul cu mai multe linii, această soluție este folosită extrem de rar; mai des această opțiune poate fi găsită pentru alinierea intervalelor, link-urilor sau imaginilor.

Odată a trebuit să vin cu ceva text pentru a arăta cum funcționează alinierea textului folosind CSS, dar nu mi-a venit în minte nimic interesant. La început am decis să copiez o rimă pentru copii undeva, dar mi-am amintit că asta ar putea strica unicitatea articolului, iar dragii noștri cititori nu l-ar putea găsi pe Google. Și apoi am decis să scriu acest paragraf - la urma urmei, punctul nu este cu el, dar punctul este aliniat.

.example-text ( text-align : center ; padding : 10px ; background : #FF90B8 ; )

Este demn de remarcat faptul că această proprietate va funcționa nu numai pentru text, ci și pentru orice elemente inline ("display: inline").

Dar acest text este aliniat la stânga, dar este într-un bloc care este centrat în raport cu învelișul.

.example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; lățime : 40% ; padding : 10px ; text-align : stânga ; fundal : #FFE5E5 ; )

Alinierea blocurilor folosind marginea

Elementele bloc cu o lățime cunoscută pot fi aliniate cu ușurință pe orizontală, setându-le la „margin-left: auto; margin-right: auto”. De obicei se folosește abrevierea: „ marja: 0 auto" (orice valoare poate fi folosită în loc de zero). Dar această metodă nu este potrivită pentru alinierea verticală.

.lama-wrapper ( înălțime : 200px ; fundal : #F1BF88 ; ) .lama1 ( înălțime : 200px ; lățime : 200px ; fundal : url(lama.jpg) ; margine : 0 auto ; )

Așa ar trebui să aliniați toate blocurile, acolo unde este posibil (unde nu este necesară poziționarea fixă sau absolută) - este cel mai logic și adecvat. Deși acest lucru pare evident, am văzut uneori exemple înfricoșătoare cu indentări negative, așa că am decis să clarific.

Aliniere verticală

Alinierea verticală este mult mai problematică - aparent, acest lucru nu a fost prevăzut în CSS. Există mai multe modalități de a obține rezultatul dorit, dar nu toate sunt foarte frumoase.

Alinierea cu proprietatea înălțimea liniei

În cazul în care există o singură linie într-un bloc, puteți obține alinierea sa verticală folosind butonul " inaltimea liniei" și setați-l la înălțimea dorită. Pentru fiabilitate, merită să setați și „înălțimea”, a cărei valoare va fi egală cu valoarea „înălțimea liniei”, deoarece aceasta din urmă nu este acceptată în toate browserele.

.example-wrapper4 (înălțimea liniei: 100px; culoare: #DC09C0; fundal: #E5DAE1; înălțimea: 100px; alinierea textului: centru; )

De asemenea, este posibil să se realizeze alinierea blocului cu mai multe linii. Pentru a face acest lucru, va trebui să utilizați un bloc suplimentar de înveliș și să setați înălțimea liniei la acesta. Un bloc intern poate fi cu mai multe linii, dar trebuie să fie „inline”. Trebuie să-i aplicați „vertical-align: middle”.

.example-wrapper5 (înălțimea liniei: 160px; înălțimea: 160px; dimensiunea fontului: 0; fundal: #FF9B00; ) .example-wrapper5 .text1 (afișare: bloc inline; dimensiunea fontului: 14px; înălțimea liniei: 1,5;

Blocul de înveliș trebuie să aibă setat „dimensiunea fontului: 0”. Dacă nu setați dimensiunea fontului la zero, browserul va adăuga câțiva pixeli în plus. De asemenea, va trebui să specificați dimensiunea fontului și înălțimea liniei pentru blocul interior, deoarece aceste proprietăți sunt moștenite de la părinte.

Alinierea verticală în tabele

Proprietate " vertical-align„ afectează și celulele tabelului. Cu valoarea setată la „middle”, conținutul din interiorul celulei este aliniat la centru. Desigur, aspectul tabelului este considerat arhaic în zilele noastre, dar în cazuri excepționale îl puteți simula prin specificarea „ afișare: tabel-celulă".

De obicei folosesc această opțiune pentru alinierea verticală. Mai jos este un exemplu de aspect preluat dintr-un proiect finalizat. Poza care este centrată vertical în acest fel este cea care interesează.

.one_product .img_wrapper ( afișare : table-cell ; înălțime : 169 px ; vertical-align : middle ; overflow : ascuns ; fundal : #fff ; lățime : 255 px ; ) .one_product img ( înălțime maximă : 169 px ; lățime maximă : 100 % ; lățime minimă : 140 px ;

Trebuie amintit că, dacă un element are un set „float” altul decât „none”, atunci va fi în orice caz bloc (afișare: bloc) - atunci va trebui să utilizați un înveliș suplimentar de bloc.

Alinierea cu un element suplimentar în linie

Și pentru elementele inline puteți folosi „ vertical-align: mijloc„. În plus, toate elementele cu „ display: inline" care sunt pe aceeași linie se vor alinia cu o linie centrală comună.

Trebuie să creați un bloc auxiliar cu o înălțime egală cu înălțimea blocului părinte, apoi blocul dorit va fi centrat. Pentru a face acest lucru, este convenabil să folosiți pseudo-elementele:before sau:after.

.example-wrapper6 (înălțime: 300px; text-align: center; fundal: #70DAF1; ) .pudge (afișare: inline-block; vertical-align: middle; fundal: url(pudge.png) ; fundal-culoare: # fff ; lățime : 200 px ; înălțime : 200 px ;

Afișaj: flex și aliniere

Dacă nu vă pasă foarte mult de utilizatorii Explorer 8 sau vă pasă atât de mult încât sunteți dispus să introduceți o bucată de javascript suplimentar pentru ei, atunci puteți folosi „display: flex”. Cutiile flexibile sunt excelente pentru a rezolva problemele de aliniere și scrieți doar „margin: auto” pentru a centra conținutul în interior.

Până acum, practic nu am întâlnit niciodată această metodă, dar nu există restricții speciale pentru ea.

.example-wrapper7 ( display : flex ; înălțime : 300px ; fundal : #AEB96A ; ) .example-wrapper7 img ( margine : automat ; )

Ei bine, atât am vrut să scriu despre alinierea CSS. Acum centrarea conținutului nu va fi o problemă!

Textul este aliniat folosind un atribut CSS aliniere text, care poate lua următoarele valori:

centru- in centru
justifica- în lățime
stânga- pe marginea stângă
dreapta- pe marginea dreapta

Atribut text-indentare setează indentarea „liniei roșii” - prima linie a unui nou paragraf.

Următoarele atribute sunt, de asemenea, folosite pentru a formata textul:

inaltimea liniei- inaltimea liniei. Valori posibile:
- n px,pt,ex,em,in,mm,cm,buc
- n %
marginea- indentare de la marginea exterioară a elementului la marginea interioară a elementului părinte. Sunt posibile opțiuni (margine-sus; margine-stânga; margine-jos; margine-dreapta). Valori:
- n px,pt,ex,em,in,mm,cm,buc
- n %
umplutura- indentarea de la marginea interioară a elementului până la conținutul acestuia. Opțiuni posibile (padding-top; padding-stânga; padding-bottom; padding-right). Valori:
- n px,pt,ex,em,in,mm,cm,buc
- n %
vertical-align- alinierea verticală (relevant pentru tabele). Valori:
- alinierea de sus - sus
- aliniament mijloc - mijloc
- fund - alinierea de jos
- text-top - aliniați la marginea de sus a textului
- text-bottom - aliniați la marginea de jos a textului
spatiu alb- o modalitate de a separa cuvintele unele de altele
- normal
- nowrap (întreruperile de linie sunt ignorate)

Mai jos sunt câteva exemple de aliniere a textului care nu vor fi prea greu de înțeles. Pentru a înțelege mai bine cum funcționează atributele de aliniere a textului, încercați să formatați singur câteva paragrafe.

Exemplu de aliniere a textului: Exemplul #6

Codul HTML al paginii:

Fără titlu

inelul de aur al Rusiei

„Inelul de aur al Rusiei” (în antichitate Zalesye), o rută turistică care include o rețea de orașe antice rusești: Sergiev Posad, Pereslavl-Zalessky, Rostov cel Mare, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Uglich. Numele Zalesie este în primul rând geografic, însemna tot ceea ce era „dincolo de pădure” în raport cu Rusia Kievană.

Trei atribute mai puternice pentru formatarea textului:

inaltimea liniei- determină distanța dintre linii. Valoarea trebuie să fie mai mare decât înălțimea fontului, altfel valoarea este ajustată automat la înălțimea textului. Valori:
- n px,pt,ex,em,in,mm,cm,buc
- n %
spațierea cuvintelor- spațierea dintre cuvinte. Valori:
- n px,pt,ex,em,in,mm,cm,buc
spațiul dintre litere- spațierea dintre litere. Valori:
- n px,pt,ex,em,in,mm,cm,buc

Exemplu de formatare a textului: Exemplul nr. 7

Codul HTML al paginii:

Fără titlu

inelul de aur al Rusiei

Acum putem aplica aceste cunoștințe în foaia de stil externă prin formatarea etichetei de paragraf:

Un exemplu de formatare a textului folosind o foaie de stil externă: Exemplul nr. 8

Codul HTML al paginii:

Fără titlu

inelul de aur al Rusiei

fișier CSS:

body (familie font: Verdana,Tahoma,Arial,Helvetica,sans-serif; culoare: gri; dimensiune font: 8pt;) H1 (culoare: verde; dimensiune font: 130%;) p (indentare text: 15px; ; dimensiunea fontului: 10pt; înălțimea liniei: 150%;