Acum să scriem la fel cod HTML, dar cu utilizarea containerelor, în plus, să ne aliniem nu la centru, ci la dreapta.

După cum puteți vedea, totul funcționează. Vă sfătuiesc să modificați și valoarea atributului " alinia" pentru a analiza alte tipuri de aliniere a conținutului containerului.

Un alt mod de a alinia elementele HTML- acestea sunt tabele, dar acest subiect merită o discuție separată, așa că vom vorbi despre el într-unul din articolele următoare.

Pentru moment, pagina ta ar trebui să arate astfel:

Titlul de nivel 1 centrat

Titlu de nivel 1, aliniat la dreapta

Cu stimă, Mihail Rusakov.

P.S. Dacă doriți să aflați mai multe despre HTML atunci uită-te la al meu curs gratuit cu un exemplu de creare a unui site pe HTML:

Bună ziua, dragi cititori ai blogului. În acest articol, continuăm să învățăm elementele de bază ale stilului Markup CSSși uită-te la vertical-align, text-align, text-indent și alte proprietăți pentru decorarea textului html.

Alinierea textului cu CSS

Să începem cu atributele de stil care controlează afișarea textului în elemente la nivel de bloc. Sa incepem cu proprietăți de aliniere a textului, care este de fapt un înlocuitor atributul de aliniere(utilizat pentru a alinia conținutul elementelor html, cum ar fi p paragrafe).

proprietate de stil aliniere text seturi aliniere orizontala textși are doar patru valori posibile:

text-align: stânga|dreapta|centru|justificare

Valorile disponibile ale acestei reguli determină alinierea, respectiv: stânga — la stânga, dreapta — la dreapta, centru — la centru și justifică — la lățimea paginii (stânga și dreapta în același timp prin mărirea spațiului dintre cuvinte). De exemplu, textul acestui articol este aliniat la lățimea paginii (dacă observați că are margini egale pe ambele părți din stânga și din dreapta) folosind regula text-align:justify.

În mod implicit, alinierea orizontală este stânga, deci nu trebuie să specificați în mod specific text-align:left decât dacă a fost specificată altă aliniere pe elementele părinte.

Exemple de utilizare a proprietății:

p (alinierea textului: justificare)
h1 ( text-align: center )

Următoarea proprietate CSS text-ident seturi indentare pentru linia roșie, de exemplu pentru textul dintr-o etichetă p paragraf. Această regulă, precum text-align, se aplică numai elementelor la nivel de bloc. Sintaxă:

indentarea textului:<отступ>

Aici sunt permise valori absolute și relative. Valorile absolute (px - pixeli, em, ex etc.) pot fi specificate atât cu semnul plus, cât și cu semnul minus. Valoare relativă de obicei dat ca procent (%). Valoarea relativă se calculează din lățimea zonei care este rezervată textului. Deci, regula css text-indent:50% va seta linia roșie egală cu jumătate din lungimea acestei linii. În mod implicit, indentarea „liniei roșii” este zero. Exemplu:

p ( text-ident: 10px; )

Apoi, luați în considerare aliniere verticală- proprietate vertical-align. Această proprietate este deja aplicabilă pentru toate elementele html și pentru aproape toate mijloacele de aliniere între ele elemente inline cu text relativ la linia de bază. Pe lângă etichetele de tabel td și th, în care tot conținutul va fi aliniat vertical. Sintaxă:

vertical-align: linie de bază|sub|super|sus|text-sus|middle|bottom|text-bottom|<величина>

Să ne uităm la fiecare valoare mai detaliat:

• linie de bază - alinierea unei bucăți de text de-a lungul liniei de bază element părinte. Aceasta este valoarea implicită;
• sub — fragmentul de text este afișat ca indicele sau indice pentru elementul părinte;
• super - un fragment de text este afișat ca superscript sau superscript pentru elementul părinte;
• top - alinierea fragmentului de text la marginea superioară a elementului părinte;
• text-top - alinierea fragmentului la marginea superioară a textului elementului părinte;
• mijloc - alinierea centrului fragmentului de text la centrul elementului părinte;
• jos - alinierea fragmentului de text la marginea de jos a elementului părinte;
• text-bottom - aliniază fragmentul la marginea de jos a textului elementului părinte;

În figura de mai jos, puteți vedea comportamentul fragmentelor de testare cu diferite valori ale proprietății de aliniere verticală în motor de cautare Explorer 11:

Pe lângă valorile de mai sus, puteți specifica valori numerice. Deci regula CSS vertical-align:0 ar însemna același lucru ca și intrarea vertical-align:baseline. Și regula vertical-align:10px va muta textul în sus cu 10 pixeli față de linia de bază. Pentru a muta textul în jos, valoarea trebuie specificată cu un minus.

De asemenea, schimbul poate fi setat unități relative măsurători, de exemplu în em și în ex sau ca procent.

Pentru a alinia vertical conținutul celulelor tabelului în aliniere verticală, ar trebui să utilizați următoarele valori:

• top - pentru a alinia conținutul la marginea superioară a celulei;
• jos - pentru a alinia conținutul la marginea de jos a celulei;
• mijloc - pentru a se alinia la centrul celulei (utilizat implicit).

Pentru realizare rezultatul dorit, de obicei trebuie să experimentezi sensuri diferite proprietățile stilului de aliniere verticală. numeroși valori posibile da rezultate foarte diferite în cazuri diferite.

Opțiunile de spații albe și de înfășurare a cuvintelor care controlează întreruperile de linie

Următorul pe linie este parametrul spații albe, care este responsabil pentru afișarea caracterelor de spațiu alb pe pagina html.

După cum știm, în mod implicit, browserul combină toate caracterele de spații albe consecutive: spații, întreruperi de linie și tab-uri într-un singur spațiu. O exceptie etichetă

, textul plasat în el este afișat ca atare, cu toate spațiile.

Proprietatea spațiu alb are următoarea sintaxă:
spatiu alb: normal|pre|nowrap|pre-wrap|pre-line
Este clar că valoarea normală este utilizată în mod implicit și lasă totul așa cum este descris mai sus, toate spațiile consecutive sunt combinate într-unul singur și rupturile de linie sunt setate automat.
Utilizarea valorii 
Va fi o analogie completă la aplicarea etichetei 
Browserul va reda pagina pentru toți spatii suplimentareși cratime așa cum au fost adăugate de dezvoltator.  Dacă rândul de text este prea lung, acesta va fi adăugat bara orizontala sul.

Valoarea nowrap împiedică browserul să încapsuleze linii, iar textul este afișat ca o singură linie.  Singurul lucru este adăugarea unei etichete 
va muta textul în linie nouă.
Valoarea pre-wrap păstrează toate secvențele de spații și întreruperi de linie, dar dacă linia nu se încadrează în zona specificată, atunci browserul înfășoară automat textul pe o nouă linie.
Ei bine, valoarea pre-linie convertește spațiile într-un singur spațiu, liniile noi sunt păstrate, iar browserul poate rupe liniile care sunt prea lungi pentru a evita derularea orizontală.
Exemplu de utilizare:
p (spațiu alb: pre; )
Apoi, luați în considerare parametrul de înfășurare a cuvintelor, care vă permite să specificați dacă să includeți sau nu cuvinte lungi care nu se încadrează în zona specificată.  Această proprietate nu este folosită des, dar uneori nu vă puteți descurca fără ea:
word-wrap: normal|break-word
Valoarea normală îi spune browserului că textul se poate sparge doar pe spații, iar acesta este un comportament normal al browserului.  Iar valoarea break-word permite browserului să insereze întreruperi de rând în interiorul cuvintelor.  Exemplu:
p (înfășurare de cuvânt: ruptură de cuvânt; )
Opțiuni de umbră text - proprietate text-shadow
Pentru iubitorii de diferite decorațiuni în standardul CSS3, a devenit posibil să se stabilească o umbră pentru text.  Utilizarea corectă a proprietății text-shadow vă permite să reînviați vizibil pagină web.  Sintaxă:
text-shadow: niciunul |<цвет> <горизонтальное смещение> <вертикальное смещение> [<радиус размытия>]
Valoarea none dezactivează adăugarea unei umbre textului și este setată implicit.
Culoarea umbrei specificat în orice format CSS disponibil și nu este parametru obligatoriu.  În mod implicit, culoarea umbrei este aceeași cu culoarea textului.
Decalaj orizontal al umbrei poate fi setat în orice unitate CSS acceptată.  Dacă valoarea este pozitivă, umbra va fi poziționată în dreapta textului, cu negativ - la stânga. Valoare zero va poziționa umbra chiar sub text și are sens numai dacă este setată umbra estompată.
Decalaj vertical al umbrei poate fi setat și în orice unitate CSS acceptată.  O valoare pozitivă va muta umbra sub text, o valoare negativă o va muta mai sus.  O valoare de zero va poziționa umbra direct sub text.
În orice unitate de măsură, și raza de estompare a umbrei.  Cu cât această valoare este mai mare, cu atât umbra devine mai largă și se netezește mai mult.  Dacă această opțiune nu este setată, se presupune valoarea de estompare zero.  Deoarece algoritmul de netezire are de obicei browsere diferite este diferit, aspectul umbrei poate fi ușor diferit în funcție de browser.
Luați în considerare un exemplu:
p( 
text-shadow: roșu 1px 1px 2px 
dimensiunea fontului: 2em 

}
Și așa va arăta textul paragrafului p folosind această regulă stil în Internet Explorer 11:

Aici voi încheia articolul.  Pentru a afla mai multe despre proprietățile CSS, nu uitați să vă abonați la actualizările blogului și să citiți articole din secțiunea „”.  Ne vedem în curând!
Descriere
 
Aliniază un bloc de text la margine.
Stilurile trebuie folosite în locul acestui atribut
 
Sintaxă
 
Valori
stânga Aliniază textul la stânga.  În acest caz, liniile de text sunt aliniate la stânga, iar marginea dreaptă este situată într-o „scără”.  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.  center Aliniază textul la centru.  Textul este plasat orizontal în fereastra browserului sau containerul în care se află. bloc de text.  Liniile de text par să fie înșirate pe o axă invizibilă care trece prin centrul paginii web.  O metodă de aliniere similară este utilizată în mod activ în titluri și diferite subtitrări, cum ar fi legendele, dă un aspect oficial și solid designului textului.  În toate celelalte cazuri, alinierea la centru este rar folosită pentru motivul acesta că este incomod să citești o cantitate mare de astfel de text.  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 dreapta, în timp ce stânga rămâne „zdrențuită”.  Datorită faptului că marginea stângă nu este aliniată, și anume din care se citesc linii noi, un astfel de 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, acolo este posibil mod similar alinierea va fi utilă.  Dar unde la noi ați văzut astfel de site-uri.  justify Justify, ceea ce înseamnă justificat stânga și dreapta în același timp.  Pentru a efectua această acțiune, browserul în acest caz adaugă spații între cuvinte. 
Valoare implicită
 
Exemplu.  Alinierea textului


 
 
 
 
 
 
Duis te feugifacilisi.  Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et justo odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla faciliti.  Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat.  Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
 

Browsere: Desktop Mobile ?

Internet Explorer
Crom
Operă
safari
Firefox
1

1

1

1

1


Android
Firefox Mobile
Opera Mobile
Safari Mobile
1

1

6

1


✖

Browsere
Următoarea notație este utilizată în tabelul browserului.
- elementul este pe deplin suportat de browser;
- elementul nu este perceput de browser și este ignorat;
- poate apărea în timpul funcționării diverse erori, sau elementul este susținut cu rezerve.
Numărul indică versiunea de browser din care este acceptat elementul.
Salutari Prieteni!  Astăzi vom vorbi despre eticheta de paragraf și atributul de aliniere.  În general, tot conținutul dintr-o pagină ar trebui împărțit în paragrafe.  Conținutul paragrafului este scris între etichete 
Text…
.  Când afișăm 2 paragrafe consecutive, între ele se formează un câmp invizibil, care le împinge unul de celălalt.  Eticheta este eticheta bloc deci ocupă toată lățimea paginii.

De exemplu, să luăm o pagină cu următorul cod:

 

 
 
 
 
 
 

 Primul paragraf: Lorem Ipsum este pur și simplu un text fals al industriei de tipărire și de tipărire.  Lorem Ipsum a fost textul fals standard al industriei încă din anii 1500, când o imprimantă necunoscută a luat o bucătărie de tipărire și a amestecat-o pentru a face o carte cu specimene de tipar.
 

 Al doilea paragraf: Este un fapt stabilit de mult că un cititor va fi distras de conținutul care poate fi citit al unei pagini atunci când se uită la aspectul acesteia.  Scopul utilizării Lorem Ipsum este că are o distribuție mai mult sau mai puțin normală a literelor, spre deosebire de utilizarea „Conținut aici, conținut aici”, făcându-l să pară ca o engleză lizibilă.
 

Să vedem cum arată acest caz în browser:
 


Probabil ați observat că există o etichetă în codul paginii puternic, această etichetă face textul aldine.
Atributele etichetei
Pentru fiecare etichetă, în unele cazuri chiar trebuie să specificați atribute.  Prin atribut, îi spunem browserului exact cum să afișeze acest sau acel element pe pagină.
Atributul este specificat în paranteza etichetei de deschidere și are următoarea sintaxă: attribute_name="valoare"
atribut de aliniere
De exemplu, avem un paragraf pe pagină și vrem să-i aliniem conținutul.  Pentru a face acest lucru, scriem un atribut în interiorul etichetei de deschidere alinia, care este responsabil pentru alinierea conținutului din paragraf și setați-l la o singură valoare.
Conținutul paragrafului.


Acest atribut are 4 valori:
1 stânga– Aliniază conținutul la stânga.  Această valoare este implicită.  Adică dacă nu specificăm atributul pentru paragraf alinia, atunci conținutul din interiorul paragrafului este aliniat la stânga în mod implicit.  Acest lucru poate fi văzut în exemplul anterior.
2.Corect– Aliniază conținutul la dreapta.

 
Text…
Iată cum arată în browser:
 

3.Centru- Aliniază conținutul la centrul paginii.

 
Text…
 

4. Justificați– Aliniază conținutul la lățimea paginii.

 
Text…
 

Rezumatul lecției: 
Astăzi am învățat ce paragrafîn html.  Paragrafele sunt folosite foarte des în html.  Am învățat și ce este un atribut de etichetă.  Și am învățat atributul de aliniere alinia. Care poate lua una dintre următoarele valori: stânga (implicit)dreapta,centru,justifica.
Bună ziua, dragi cititori ai blogului.  Astăzi continuăm să studiem și suntem următorii în linie cu proprietățile text-decoration, vertical-align, text-align, text-indent și o serie de altele care ajută la modelarea aspectului textelor în codul HTML.
În ultimul articol, ne-am uitat la proprietățile care urmează să fie configurate aspect fonturi la .
Ei bine, chiar și mai devreme, am examinat toate tipurile în detaliu, am învățat cum pot fi grupate și ce priorități le stabilește browserul atunci când le interpretează.  Adevărat, toate acestea au fost împărțite în mai multe articole, așa că, pentru a nu vă încurca, vă sfătuiesc să studiați materialele în ordinea dată în.
Text-decor, text-align, text-indent in CSS
Cum se lucrează cu text în CSS?  Ar fi logic să presupunem că există reguli special concepute în acest scop.  Să începem cu text-align, care este de fapt un înlocuitor pentru atributul align (a fost folosit pentru a alinia conținut precum P paragrafe sau titluri).
Are doar patru valori posibile:
Sensul rămâne același ca înainte. aliniere text este alinierea orizontală a liniilor.  Această regulă se aplică numai elementelor bloc (paragrafe, titluri etc.), adică  acele etichete în care pot apărea mai multe linii.  pentru că  poate exista o singură linie în elementele inline, atunci nu există niciun punct special în utilizarea text-align în ele.
Este clar că valorile acestei reguli înseamnă aliniere, respectiv: pe marginea stângă (stânga), pe marginea dreaptă (dreapta), în centru (centru) și pe lățimea paginii (Justify - simultan în stânga și marginile drepte prin creșterea distanței dintre cuvinte) .  Este de la sine înțeles că valoarea Justify ar trebui utilizată pentru elementele cu cel puțin câteva rânduri de text, altfel nu va exista niciun efect vizibil din aceasta.
De exemplu, am justificat paragraful anterior (puteți vedea că are margini chiar atât în ​​stânga, cât și în dreapta) folosind:
text-align:justify;
În mod implicit, textul este aliniat orizontal la stânga, adică.  Nu trebuie să scrieți în mod specific text-align:left, decât dacă, desigur, ați specificat anterior o aliniere diferită.  Apropo, am aliniat acest paragraf la centru (centru) din nou pentru bun exemplu, dar aici, cred, totul este clar.
Următoarea regulă css indentarea textului vă permite să setați o linie roșie, de exemplu, pentru textul dintr-o etichetă de paragraf P. Indentația liniei roșii poate fi setată prin specificarea unei valori (atât cu semnul plus, cât și cu semnul minus, folosind ) sau folosind un procent :
Din ce sunt procentele din text-indent?  Din lățimea zonei care este rezervată textului.  Acestea.  Regula css text-indent:50% va seta linia roșie la jumătate din lungimea acelei linii.  Ei bine, acest paragraf este doar un exemplu al unei astfel de reguli.
Și puteți, de exemplu, să setați o valoare negativă pentru linia roșie din text-indent și apoi vom obține ceva ca ceea ce vedeți în acest paragraf.  Pentru realizare rezultatul dat Am scris următoarea regulă CSS pentru eticheta de paragraf P:
text-indent:-1em;
Bine si uz comun text-indent (pentru a seta linia roșie standard) ar putea arăta astfel: text-indent:40px;  (apropo, aplicat acestui alineat).  Această regulă, la fel ca text-align discutat mai devreme, se aplică numai elementelor bloc, adică  unde pot apărea mai multe rânduri (paragrafe, titluri etc.).
Deci acum să trecem la text-decor(decor folosind o linie orizontală), care este deja aplicată tuturor element html m (atât literele mici, cât și blocul).
Poate avea doar patru semnificații:
Acestea.  poate fi folosit cu decorarea textului: supraliniu (supraliniat), barat (linie) sau subliniat (subliniat), bine, sau nu folosiți nimic (nici unul).  Unele elemente HTML au deja stil implicit linie orizontală, de exemplu (sunt subliniate implicit).
Prin urmare, evidențierea a altceva cu o subliniere (cu excepția hyperlink-urilor) nu este bună, deoarece utilizatorii au o înregistrare subconștientă care, odată subliniat (și, de asemenea, evidențiat în culoare), atunci puteți da clic pe el pentru a merge.  Dar subliniind text simplu, induceți în eroare utilizatorul și dezamăgiți ulterioară resursa dvs. (el a crezut asta, dar s-a dovedit a fi...).
Nuanțarea utilizării regulii de decorare a textului Css este că va fi posibil să scrieți trei (sau două) valori simultan pentru orice element HTML (omițând niciunul) și, ca rezultat, veți obține subliniat-subliniat-barcat bucată de text(suna si arata bine, nu-i asa?):
Text-decor: subliniere overline line-through;
Valori pentru decor text(dacă doriți să folosiți mai multe dintre ele deodată) trebuie să scrieți prin caracterul spațial.
Vertical-align - aliniere verticală
În continuare avem alinierea verticală - vertical-align.  Pentru aproape toate elementele din codul HTML, înseamnă alinierea elementelor inline cu textul în raport cu linia lor de bază.  Adevărat, pentru aceasta înseamnă puțin diferit - tot conținutul care se află în aceste celule va fi aliniat vertical.
Pentru regula de aliniere verticală Css, puteți utiliza următoarele valori:
Rândurile sunt aliniate implicit la linia de bază.  Uite, am aplicat la această bucată de text măriți fontul iar aceste două fragmente sunt aliniate pe linia de bază (de jos).  Și alinierea verticală cu alinierea verticală este doar pentru a schimba modul în care liniile sunt aliniate.
De exemplu, dacă scriu vertical-align:baseline pentru aceeași bucată de text mărită, atunci nu vor apărea modificări, deoarece  valoarea de bază este utilizată pentru această regulă Css implicită.
Apropo, numerele pot fi folosite și ca valori pentru acesta, iar vertical-align:0 va însemna același lucru cu vertical-align:baseline, adică.  valoarea liniei de bază este echivalentă cu zero.  Prin urmare, dacă dorim să specificăm orice deplasare în alinierea verticală, atunci această deplasare va fi indicată în raport cu linia de bază (sau zero).
Poti scrie asa:
vertical-align:10px;
Și primim deplasați fragmentul cu font mărit în sus 10 pixeli de la linia de bază.  Dacă scriem o valoare negativă:
vertical-align:-10px;
Apoi primim deplasați fragmentul în jos raportat la linia de bază.  Din exemple se poate observa că din cauza deplasării, înălțimea liniei a crescut, astfel încât textul să se potrivească în ea fără să se ciocnească de linia adiacentă.  Deplasarea poate fi setată și în Em și Ex, ei bine, ca procent, care va fi calculat de la înălțimea liniei acestui element (rețineți că în ultimul articol am învățat cum să o setăm folosind ).
Pentru a alinia vertical conținutul celulelor tabelului în aliniere verticală, ar trebui să utilizați valorile de sus și de jos pentru a obține partea de sus și de jos a celulei, respectiv (ei bine, mijlocul într-o celulă de tabel este folosit ca valoare implicită de aliniere verticală ).
Și pentru elementele fontului, puteți folosi text-top, text-bottom, middle.  Să folosim un exemplu pentru această bucată de text sens:
vertical-align:mijloc;
Ce s-a întâmplat ca urmare?  Linia de mijloc a fragmentului mărit a fost aliniată de-a lungul liniei de bază a textului simplu, adică  avem alinierea verticală pe linia mediană.  Pentru text-top și text-bottom totul va fi la fel.  Ca text-top și ca text-bottom .
Valorile Css ale sub- și super-propietăților de aliniere verticală se potrivesc cu sub- și superindexul care a avut loc în HTML pur(inainte de Utilizarea CSS proprietăți pentru design vizual).
Transformare text, spațiere între litere, spațiere între cuvinte și spațiu alb
Niciunul nu este utilizat în mod implicit și înseamnă că caracterele din text nu se vor schimba în niciun fel - așa cum este scris în Html, acestea vor fi afișate.  Valoarea Uppercase pentru text-transform va transforma toate literele fragmentului în majuscule ( un exemplu este prezentat în această propoziție, unde a fost folosită regula text-transform:majuscule, iar literele au fost scrise inițial cu litere mici).
Valoarea cu litere mici pentru regula de transformare a textului Css vă va permite să transformați toate caracterele fragmentului în litere mici, ei bine, valoarea cu majuscule va face toate primele litere ale cuvântului cu majuscule ( exemplu în această propoziție- text-transform: capitalize).  Acestea.  cu text-transform poți face orice cu text simpluși apoi înapoi cu ușurință totul înapoi.
Prin urmare, dacă, de exemplu, aveți sarcina de a scrie numai toate anteturile litere mari, apoi scrieți-le în mod normal în Html și puneți-le cu majuscule deja în CSS prin text-transform: majuscule.  Apoi, dacă decizi să schimbi ceva înapoi, este suficient să faci doar o mică schimbare în stiluri, și nu în conținutul tuturor celor 100.500 de titluri de pe site-ul tău.
În mod implicit, atât spațierea dintre litere, cât și spațierea cuvintelor sunt setate la Normal, sau aceasta este la fel cu zero (adică, distanța dintre caractere și cuvinte nu se modifică în niciun fel).  Mărimea modificării distanței în aceste reguli poate fi indicată doar în pixeli, sau Em sau Ex, dar nu în termeni procentuali.
Cu toate acestea, puteți folosi atât pozitive (simboluri sau cuvinte rare), cât și valori negative(convergența simbolurilor sau a cuvintelor).  De exemplu, poți „Așa, rarează personajele din această frază” prin intermediul următorul css reguli:
Spațiere între litere: 0,4 em;
Sau este posibil „Așa se unește personajele în această frază” prin intermediul:
Spațiere între litere: -1px;
Același lucru se poate spune despre spațierea cuvintelor cu o singură diferență, că în acest caz distanța se va schimba deja între cuvinte, ca, de exemplu, în această frază, cu ajutorul unei astfel de construcții CSS:
Spațierea cuvintelor: 4em;
În mod similar, puteți utiliza valori negative în spațierea cuvintelor pentru a reduce distanța dintre cuvinte.
Ei bine, ultima regulă Css pentru astăzi, care vă permite să stilați textul în codul HTML într-un anumit fel, este spatiu alb.  Este responsabil pentru afișarea caracterelor cu spații albe pe o pagină web care a avut loc când scrierea HTML cod.
După cum vă amintiți din articolul despre, browserul, atunci când analizează codul, combină toate spațiile, întreruperile de linie și filetele într-un singur spațiu și înfășoară liniile de pe pagina web exact în funcție de caractere cu spații albe care a avut loc în cod.
Deci, spațiul alb poate lua una dintre cele trei valori:
Este clar că valoarea implicită este Normală și în acest caz totul este afișat așa cum am descris mai sus.  Dar când folosim valoarea Pre, obținem o analogie completă cu utilizarea , adică.  pe pagina web, textul va fi afișat cu toate acele caractere de spațiu alb în plus care au avut loc la scrierea codului și browserul nu le va putea separa cu silabe.
Ei bine, sensul nowrap pur și simplu împiedicați browserul să încapsuleze caracterele de spațiu alb pe care le găsește în interiorul unui fragment cu regula CSS white-space:nowrap.  Puteți încerca singuri cum funcționează totul creând un fișier HTML simplu și încadrând orice fragment de text în etichete similare:
 
fragment de text de testare
 
Multă baftă!  Ne vedem curând pe site-ul paginilor blogului
Puteți viziona mai multe videoclipuri accesând
");">
S-ar putea să fiți interesat
Stilul listei (tip, imagine, pozitie) - reguli Css pentru personalizarea aspectului listelor in cod HTML 
Poziționare cu Z-index și CSS Regula cursorului pentru a schimba cursorul mouse-ului 
Căptușeală, margine și chenar - instalate css internși marginile, precum și chenarele pentru toate părțile (sus, jos, stânga, dreapta) 
Pentru ce este CSS, cum să conectați foile de stil în cascadă document htmlși sintaxa de bază a acestui limbaj 
Float și clear în CSS - instrumente aspectul blocului
 
CSS - ce este, cum sunt conectate foile de stil în cascadă cod html cu Style și Link