CU folosind CSS proprietăți culoare Puteți schimba culoarea textului elementelor HTML.

Culoarea poate fi setată în următoarele moduri:

1. Folosind numele culorii (de exemplu, „roșu” va seta culoarea roșie);
2. Prin folosirea valori RGB(de exemplu, „rgb(255,255,255)” va seta culoarea la alb);
3. Prin folosirea valoare hexazecimală(de exemplu, „#00ff00” va seta verde).

Explicatii:

Prima metodă este folosită în principal pentru a specifica culorile primare, ale căror nume sunt bine cunoscute. De exemplu, roșul va determina roșu, albastru - albastru, alb - alb.

A doua metodă poate fi folosită pentru a seta orice culori și nuanțe.

Sintaxă:

RGB( roşu,verde,albastru)

roşu un număr de la 0 la 255 care indică cât de mult roșu va fi în nuanța finală.

verde un număr de la 0 la 255 care indică cât de mult verde va fi în nuanța finală.

albastru un număr de la 0 la 255 care indică cât de mult albastru va fi în nuanța finală.

De exemplu rgb(255,0,0) va seta culoarea roșie și rgb(0,255,0) rgb(255,255,0) devenim galbeni.

A treia metodă este echivalentă funcțional cu a doua, dar mai compactă. În practică, această metodă este utilizată în principal.

Sintaxă:

#roşuverdealbastru

roşu număr hexazecimal de la 0 la ff indicând cât de mult roșu va fi în nuanța finală.

verde un număr hexazecimal de la 0 la ff care indică cât de mult verde va fi în nuanța finală.

albastru un număr hexazecimal de la 0 la ff care indică cât de mult albastru va fi în nuanța finală.

De exemplu #ff0000 va seta culoarea roșie și #00ff00 verde. Amestecă roșu cu verde #ffff00 devenim galbeni.

Acum să încercăm să recolorăm paragrafele în verde folosind toate metodele enumerate mai sus:

P (culoare:verde;) p (culoare:rgb(0,255,0);) p (culoare:#00ff00;)

Vă rugăm să rețineți: Puteți selecta în mod convenabil nuanțele de culoare necesare folosind .

Alinierea textului

Prin folosirea Proprietăți CSS alinierea textului Puteți alinia textul unui element pe orizontală.

Textul poate fi aliniat:

• Centru (valoarea centrului);
• Marginea stângă (stânga);
• De-a lungul marginii din dreapta (dreapta);
• După lățime (justificare).

Vă rugăm să rețineți: Textul Justify este aliniat prin întinderea tuturor liniilor la aceeași lungime. Această metodă de aliniere este adesea folosită în ziare și reviste.

P.ta1 (text-align:center;) p.ta2 (text-align:left;) p.ta3 (text-align:right;) p.ta4 (text-align:justify;)

Vizualizare rapidă

proprietate text-decor

Utilizarea proprietăților CSS text-decor Puteți face textul elementului HTML:

• Subliniat (valoare de subliniere)
• Line-through
• Afișează o linie deasupra textului elementului (supralinie)

P.td1 (decor text:subliniat;) p.td2 (decorare text:linie;) p.td3 (decor text:supralinie;)

Vizualizare rapidă

Proprietatea text-decorare cu nu valoreaza niciuna„curăță” textul de toate efectele de mai sus. Acesta poate fi folosit pentru a crea link-uri nesubliniate.

A:link (text-decoration:none;) a:visited (text-decoration:none;)

Vizualizare rapidă

Vă rugăm să rețineți: Nu este recomandat să subliniați textul simplu, deoarece utilizatorii îl pot confunda cu un link.

Spațiul dintre cuvinte și litere din text

Utilizarea proprietăților CSS spațiere între litere Puteți mări sau micșora spațiul dintre litere în text HTML elemente.

P.ls1 (spațiere între litere: 10 px;)

Vizualizare rapidă

Folosind proprietatea spațierea cuvintelor Puteți mări sau micșora spațiul dintre cuvinte din textul elementelor HTML.

P.ws1 (spațierea cuvintelor: 15px;)

Vizualizare rapidă

Alte proprietăți de stil de text CSS

Pentru a privi informatii detaliate despre proprietatea CSS dorită, faceți clic pe numele acesteia.

Fă-o singur

Vă rugăm să rețineți: Pentru a finaliza această sarcină, va trebui să vizitați, deoarece nu toate proprietățile designului textului au fost discutate în acest capitol.

Sarcina 1 aranjați elementele conform descrierii lor:

1. În acest paragraf, indentarea dintre litere este de 17 px, iar indentarea dintre cuvinte este de 5 px. Acest paragraf este portocaliu. 2. Text a acestui element subliniat, spațiul dintre litere este de 15 pixeli. Acest paragraf este gri. 3. Textul acestui element este centrat, spațiul dintre cuvinte este de 10 pixeli. Acest element este culoarea #ff3366. 4. Textul acestui element este aliniat la dreapta, indentarea dintre litere este de 6 pixeli. Textul este scris cu litere mici roșii. 5. Textul acestui element este centrat, subliniat, iar spațiul dintre litere este de 7 pixeli. Textul este scris cu majuscule verde.

Vă rugăm să activați JavaScript pentru a utiliza sistemul de comentarii Disqus.

Bună ziua, dragi cititori ai blogului. Astăzi continuăm să studiem și în continuare avem proprietățile text-decoration, vertical-align, text-align, text-indent și o serie de altele, care ajută la proiectarea aspectului textelor în cod 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 analizat 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 în 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 semnificații posibile:

Sensul rămâne același ca înainte. Alinierea textului- aceasta este alinierea orizontală a liniilor. Această regulă se aplică exclusiv elementelor de bloc (paragrafe, titluri etc.), i.e. acele etichete în care pot apărea mai multe rânduri. Deoarece Deoarece elementele inline pot avea o singură linie, nu există nici un punct special în utilizarea text-align în ele.

Este clar că valorile acestei reguli înseamnă aliniere, respectiv: la stânga (stânga), la dreapta (dreapta), la centru (centru) și la lățimea paginii (Justificare - simultan la stânga și drept prin creșterea distanței dintre cuvinte) . Este de la sine înțeles că valoarea Justify ar trebui folosită pentru elemente cu cel puțin mai multe rânduri de text, altfel nu va exista niciun efect vizibil.

De exemplu, am justificat paragraful anterior (puteți vedea că are margini netede atât în ​​stânga, cât și în dreapta) folosind:

Text-align:justify;

În mod implicit, alinierea orizontală a textului este stânga, adică. Nu este nevoie să scrieți în mod specific text-align:left, cu excepția cazului în care, desigur, ați specificat anterior o aliniere diferită. Apropo, am aliniat acest paragraf la centru (centru) din nou pentru exemplu clar, dar aici, cred, totul este clar.

Următoarea regulă Css text-indentare vă permite să specificați o linie roșie, de exemplu, pentru textul dintr-o etichetă de paragraf P. Indentarea liniei roșii poate fi specificată prin specificarea unei valori (fie cu semnul plus, fie cu semnul minus, folosind ) sau folosind procente:

Din ce se calculează procentele în text-indent? Din lățimea zonei alocate pentru text. Aceste. Regula CSS text-indent:50% va seta o linie roșie egală cu jumătate din lungimea acestei linii. Ei bine, acest paragraf servește ca exemplu pentru o astfel de regulă.

Sau puteți, de exemplu, să setați o valoare negativă pentru linia roșie din text-indent și apoi vom obține aproximativ ceea ce vedeți în acest paragraf. Pentru a realiza acest rezultat Am scris această regulă CSS pentru eticheta de paragraf P:

Text-indent:-1em;

Ei bine, bine utilizare normală text-indent (pentru a seta linia roșie standard) ar putea arăta astfel: text-indent:40px; (aplicat, de altfel, 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.).

Bine, acum să trecem la text-decor(design folosind o linie orizontală), care se aplică deja tuturor element HTML m (atât litere mici, cât și bloc).

Poate avea doar patru semnificații:

Aceste. poate fi folosit folosind decorarea textului: supraliniere, subliniere sau subliniere, sau nu folosiți nimic (niciunul). Unele elemente HTML au deja un design implicit linie orizontală, de exemplu, (sunt subliniate implicit).

Prin urmare, evidențierea a altceva prin subliniere (cu excepția hyperlink-urilor) nu este bună, deoarece utilizatorii au scris în subconștient că odată ce este subliniat (și, de asemenea, evidențiat color), înseamnă că pot face clic pe el pentru a merge. Dar prin evidențierea textului obișnuit cu subliniere, induci în eroare utilizatorul și ulterior devii dezamăgit de resursa ta (a crezut, dar s-a dovedit că...).

Nuanța în utilizarea regulii de decorare a textului Css este că puteți introduce trei (sau două) valori simultan pentru orice element HTML (omițând niciunul) și, ca rezultat, veți obține fragment de text subliniat-subliniat-barit(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 printr-un caracter spațial.

Vertical-align - aliniere verticală

Mai departe avem alinierea verticală- aliniere verticală. Pentru aproape toate elementele din codul HTML, înseamnă alinierea elementelor inline cu text î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:

Liniile sunt aliniate implicit la linia de bază. Uite, am aplicat măriți dimensiunea fontului pentru această bucată de text iar aceste două fragmente sunt aliniate la linia de bază (de jos). Și alinierea verticală folosind vertical-align are tocmai scopul de 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 în mod implicit.

Apropo, puteți utiliza și numere ca valori pentru aceasta, iar inscripția vertical-align:0 va însemna același lucru ca vertical-align:baseline, adică. linia de bază este echivalentă cu zero. Prin urmare, dacă dorim să indicăm orice deplasare în alinierea verticală, atunci această deplasare va fi specificată în raport cu linia de bază (sau zero).

O poti scrie asa:

vertical-align:10px;

Și vom primi mutați fragmentul cu font mai mare în sus 10 pixeli în raport cu linia de bază. Dacă scriem o valoare negativă:

Aliniere verticală: -10px;

Apoi primim deplasați fragmentul în jos raportat la linia de bază. Din exemple, este clar că din cauza deplasării, înălțimea liniei a crescut, astfel încât textul să se potrivească în ea fără a se ciocni cu linia adiacentă. Deplasarea poate fi specificată și în Em și Ex și ca procent, care va fi calculat din î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, vertical-align ar trebui să folosească valorile de sus și de jos pentru a alinia conținutul la partea de sus și de jos a celulei (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ă-l folosim ca exemplu această bucată de text sens:

vertical-align:mijloc;

Care a fost rezultatul? Linia de mijloc a fragmentului mărit este aliniată cu linia de bază a textului obișnuit, adică. avem alinierea verticală la linia centrală. Pentru text-top și text-bottom totul va fi la fel. Acesta este text-top și acesta este text-bottom.

Valorile proprietății Css vertical-align sub și super corespund sub- și super-indexului care a avut loc în HTML pur(la folosind CSS proprietăți pentru design vizual).

Transformare text, spațiere între litere, spațiere între cuvinte și spațiu alb

Niciunul nu este folosit în mod implicit și înseamnă că caracterele din text nu se vor schimba în niciun fel - așa cum este scris în Html, așa vor fi afișate. Valoarea majuscule pentru text-transform va transforma toate literele din fragment î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 din fragment în litere mici, iar valoarea cu majuscule va face ca toate primele litere ale cuvântului să fie majuscule ( exemplu în această propoziție- text-transform: capitalize). Aceste. Folosind text-transform, puteți face orice doriți cu text simplu și apoi returnați cu ușurință totul înapoi.

Prin urmare, dacă, de exemplu, aveți sarcina de a scrie numai toate titlurile cu majuscule, apoi scrieți-le în Html ca de obicei și puneți-le cu majuscule în CSS prin text-transform:uppercase. Apoi, dacă decizi să schimbi ceva înapoi, atunci trebuie doar să intri mica schimbareîn stiluri, nu în conținutul tuturor celor 100.500 de anteturi de pe site-ul tău.

În mod implicit, atât spațierea dintre litere, cât și spațiarea 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). Cantitatea de modificare a distanței în aceste reguli poate fi indicată doar în pixeli, sau Em sau Ex, dar nu și în procente.

Cu toate acestea, puteți utiliza atât valori pozitive (raritatea caracterelor sau cuvintelor) cât și negative (apropierea caracterelor sau cuvintelor). De exemplu, poți „Așa se subțiază caracterele din această frază” folosind următoarea regulă CSS:

Spațiere între litere: 0,4 em;

Sau poți „Așa se apropie simbolurile din această expresie” prin utilizarea:

Spațiere între litere: -1px;

Același lucru se poate spune despre spațierea cuvintelor, singura diferență fiind că distanța se va schimba între cuvinte, ca, de exemplu, în această frază, folosind acest construct 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 de astăzi, care vă permite să formatați textul în cod HTML într-un anumit fel, este spatiu alb. Este responsabil pentru afișarea caracterelor de spații albe pe o pagină web care au apărut la scrierea codului HTML.

După cum vă amintiți din articolul despre, browserul, atunci când analizează codul, combină toate spațiile, întreruperile de rând și tabelele într-un singur spațiu și întrerupe 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 în plus care au fost prezente la scrierea codului, iar browserul nu va mai putea face transferuri folosindu-le.

Ei bine, care este sensul? nowrap pur și simplu va împiedica browserul să împacheteze acele caractere cu spații albe pe care le găsește în interiorul fragmentului regula CSS spatiu alb: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 ca aceasta:

Mult succes pentru tine! La pe curând pe paginile site-ului blogului

Puteți viziona mai multe videoclipuri accesând

S-ar putea să fiți interesat

Stil listă (tip, imagine, poziție) - reguli Css pentru personalizarea aspectului listelor în 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 externe, precum și cadre 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, ca tabelele stiluri în cascadă conectați-vă la cod HTML folosind Style și Link

Împreună cu mai multe proprietăți font-*, CSS oferă multe proprietăți text-*.

alinierea textului

Proprietatea text-align ar trebui aplicată la element blocși definește modul în care textul și copilul elemente inline sunt aliniate orizontal.

Corp (alinierea textului: stânga; )

Cele mai utilizate valori:

• corect
• centru
• justifica

Aceste valori corespund acelorași butoane de aliniere pe care le veți găsi în Microsoft Word sau Photoshop:

Valoarea implicită a text-align este start . Practic, startul poate fi la stânga sau la dreapta, în funcție de direcția textului specificată de direcția pentru documentul HTML.

direction este o proprietate CSS care poate fi ltr (de la stânga la dreapta) sau rtl (de la dreapta la stânga):

• dacă este selectat ltr, start este stânga;
• dacă este selectat rtl, start este egal cu dreapta.

text-decor

Proprietatea text-decorare este folosită pentru a adăuga o linie textului dvs.

Valoare implicită: niciuna.

Șters ( text-decor: line-through; )

Valori posibile:

• supraliniere
• subliniază
• line-through

A ( text-decor: niciuna; )

text-indentare

Proprietatea text-indent vă permite să adăugați spațiu înaintea primei litere a primei linii a unui element bloc.

Valoare implicită: 0 (zero).

Citate bloc (text-indent: 30px; )

Vă rugăm să rețineți că există doar indentare în prima linie. Dacă doriți să mutați un întreg bloc de text, utilizați padding.

Ca și în cazul proprietății font-size, puteți utiliza px, em sau chiar %.

text-umbră

Dacă ați folosit vreodată Photoshop, probabil că ați folosit instrumentul umbră. În CSS, puteți adăuga o umbră textului pentru a-l face să arate fantezist sau mai ușor de citit.

Tu definești:

• x - deplasare orizontală;
• y - deplasare verticală;
• estompa;
• culoare.

Sunt necesare doar valorile x și y. Încețoșarea umbră implicită este 0 (zero), iar culoarea implicită este aceeași cu culoarea textului.

Această proprietate este complicată, așa că folosește-o cu grijă și nu te înnebuni!

CSS dă oportunități ample la operarea cu stilul textului. Puteți influența fontul, culoarea, dimensiunea și alte proprietăți ale textului.

Deoarece această pagină este destinată începătorilor, să ne amintim mai întâi de elementele de bază Sintaxa CSSși terminologia folosită.

Fiecare regulă CSS constă dintr-un selector și o definiție. Selectorul este de obicei eticheta căreia îi aplicăm stilul, iar definiția este stilul în sine. O definiție constă dintr-o proprietate și valoarea acesteia. De exemplu: proprietate - culoare, valoare - roșu.

Sintaxa CSS este următoarea:

selector (proprietate: valoare)

Exemplu de regulă CSS:

p( culoare: albastru)

Afișează textul în albastru. Un selector poate avea mai multe perechi (proprietate: valoare).

p( culoare: albastru; dimensiunea fontului: 10 pt)

În acest exemplu, regula este setată pentru etichetare

Afișează textul în albastru și 10 pt. Adică, aici avem două perechi (proprietate: valoare) aplicate unui selector, în în acest caz, la eticheta de paragraf

În viitor, când vor apărea cuvintele proprietate și valoare în text, se va menține definiția selectorului din regula CSS.

Proprietățile fontului

Dacă nu specificați această proprietate în CSS, browserul va afișa textul în fontul implicit. Acesta este de obicei Times New Roman.

Lista fonturilor din valoarea familiei de fonturi poate include unul sau mai multe nume, separate prin virgulă. Dacă numele fontului conține spații, de exemplu, Trebuchet MS, acesta trebuie să fie cuprins între ghilimele, simplu sau dublu.

Browserul verifică unul câte unul prezența fonturilor din listă pe computerul utilizatorului. Dacă primul font din listă este prezent, atunci acesta este utilizat, în caz contrar browserul verifică prezența celui de-al doilea font din listă. Dacă nu este prezent, se folosește fontul implicit. La sfârșitul listei, de obicei este scris un cuvânt cheie care descrie tipul de font dorit - serif, sans-serif, fantasy, cursiv sau monospace.

Familii de fonturi universale:

• serif - fonturi antice (fonturi serif), cum ar fi Times;
• sans-serif - fonturi sans-serif (fonturi fără serif sau sans serif), un reprezentant tipic este Arial;
• monospace - fonturi monospace, lățimea fiecărui caracter dintr-o astfel de familie este aceeași (font Courier).
• fantezie - o familie de fonturi decorative;
• cursiv - familie de fonturi italic;

Exemplu folosind:

Titlul h1

Titlul h2

Următoarea proprietate:

Exemplu de cod, în acest exemplu vom încorpora stiluri în etichetă folosind atributul style.

Un exemplu de font normal.

Exemplu italic.

Exemplu font italic.

Se poate observa că caracterele italice nu diferă în aparență de fontul italic.

Următoarea proprietate:

Capitală este numele tipografiei pentru text în care caracterele mici arată ca majuscule reduse. Este necesar să se facă distincția între majuscule și pur și simplu reduse majuscule. Literele mari sunt puțin mai mari decât literele mici și, de regulă, au proporții ușor extinse.

Text simplu. Text cu majuscule mici.

Din nou, text simplu.

Următoarea proprietate:

Proprietatea font-weight stabilește greutatea fontului. Pentru a face acest lucru, se folosesc următoarele cuvinte cheie în sensul: bold - stil bold, normal - stil normal. Valoarea poate fi setată în intervalul de la 100 la 900 în trepte de 100. Greutatea fontului extra ușor pe care o poate afișa browserul este de 100, iar greutatea fontului suplimentar aldine este 900. Greutatea normală a fontului (care este implicită) este 400, textul aldin standard este aldin , - valoarea 700.

De obicei, browserele nu pot afișa cu exactitate greutatea fontului necesară, așa că comută între aldine, normal și mai ușor. În practică, stilul din majoritatea browserelor este de obicei limitat la doar două opțiuni: stil normal și stil îndrăzneț.

Valorile mai ușoare și mai îndrăznețe modifică greutatea fontului în raport cu greutatea părintelui, în jos și, respectiv, în jos.

Text simplu. text îngroșat.

Din nou, text simplu.

Următoarea proprietate:

Proprietatea font-size specifică dimensiunea fontului elementului. Mărimea fontului poate fi setată în mai multe moduri.

Dimensiunea absolută a fontului poate fi setată folosind cuvinte cheie: xx-mic (extrem de mic), mic (mic), mediu (mediu, valoare implicită), mare (mare), x-mari (foarte mare), xx-mari (extrem de mare). Dimensiunile absolute ale fonturilor depind de setările browserului și sistem de operare, deci nu sunt în întregime absolute.

Pentru a modifica dimensiunea textului în raport cu părintele, se folosește un alt set de constante (mai mare - mărește dimensiunea față de părinte, mai mic - scade dimensiunea).

Text simplu.

Text xx-mic. Text mai mare.

Text mic.

Mediu text.

Text mare.

Text x-mare.

Text xx-mare.

Din nou, text simplu.

Text 150%.

Text 15px. Text mai mare.

Proprietățile textului

Pe lângă lucrul cu fonturile, CSS oferă o serie de instrumente pentru a lucra cu proprietățile textului în sine.

Să ne uităm la prima proprietate:

Când setați spațierea între linii, raportul începe de la linia de bază a fontului. În mod implicit, distanța dintre liniile de text depinde de tipul și dimensiunea fontului și este determinată automat de browsere. Nu sunt permise valori negative.

Text simplu. Prima linie.
A doua linie.
A treia linie.

Text schimbat. Prima linie.
A doua linie.
A treia linie.

Când scrieți un procent, înălțimea fontului este considerată 100%.

Următoarea proprietate:

Folosind definiția ( text-decor: niciunul) Puteți elimina sublinierea din linkuri, care este instalată implicit în browsere.

Motor de căutare Google.

Următoarea proprietate:

Proprietatea text-transform controlează afișarea literelor, puteți seta caractere mari sau mici în funcție de valoarea selectată.

Exemplu de utilizare:

Trimite mesaj.

Text cu majuscule.

Text cu majuscule.

Text cu minuscule.

Comparați textul conținut în codul html cu textul din fereastra browserului.

Următoarea proprietate:

Proprietatea text-align este utilizată pentru a alinia textul pe orizontală în fereastra browserului sau containerul în care se află blocul de text.

Descrierea detaliată a valorilor:

• centru - textul este aliniat la centru.
• justificare - alinierea latime, de fapt, este aliniata la dreapta si la stanga in acelasi timp, intre cuvintele textului se formeaza locuri goale, pe care browserul le umple cu spații.
• stânga - alinierea la marginea stângă. Aceasta este valoarea implicită.
• alinierea dreapta - dreapta.

Un exemplu de utilizare a acestei proprietăți va fi combinat cu un exemplu al proprietății următoare.

Următoarea proprietate:

Proprietatea text-indent este utilizată pentru a crea valoarea indentării primei rânduri a unui bloc de text (de exemplu, pentru un paragraf

Această proprietate permite o valoare negativă, caz în care este creată prima linie.

Lucrul cu proprietățile text-align și text-indent. Pentru mai buna intelegere codul funcționează, deschideți pagina într-o fereastră nouă și reduceți dimensiunea acesteia.

Stabiliți cum să transferați cuvinte lungi:

1. numai acolo unde există liniuță, spațiu sau Enter (excl. spatiu de nerupereŞi cratima continuă‑). Între părți ale unui cuvânt este scrisă o cratimă (de exemplu, roșu-galben), iar între cuvinte este scrisă o liniuță. „Cratima moale” – apare numai atunci când este necesar un transfer. Dacă cuvântul trece dincolo de părinte, atunci sau își transferă partea fără linie. Expresiile matematice folosesc semnul minus (de exemplu, 5 − 2). Numerele de telefon afișează o bară de cifre (de exemplu, +7 800 000‒00‒00). Și toate acestea nu sunt același lucru familiar care se află pe tastatură.
2. după orice caracter.
3. conform regulilor limbii ruse cu utilizarea automată a cratimei.

debordare-învelire
înfășurare de cuvinte
ruptura de cuvinte
întrerupere de linie
cratime

kilogramul nostru de o mie nouă sute nouăzeci și nouă a fost deja reinspectat ridicător-buldozer-încărcător

Care este diferența dintre o proprietate și alta?

În mod implicit, cuvintele lungi nu sunt împărțite cu cratima decât dacă sunt instruiți în mod explicit să facă acest lucru printr-o cratimă și încep cu linie nouă.

Pentru a ignora liniuțele care sunt imediat vizibile pentru ochi, adăugăm word-break: keep-all; .

Pentru a împiedica browserul să acorde atenție cratimei moale, introduceți cratime: niciuna; .

Dacă este necesară împachetarea cuvintelor, atunci word-wrap: break-word; Vă sfătuiesc să îl utilizați întotdeauna, deoarece este înțeles de toate browserele. Este diferit de word-break: break-all; , care are prioritate în faptul că cuvintele care nu se încadrează în bloc încep pe o linie nouă și se ține cont de recomandarea cratima moale.

La partajarea word-break: break-all; cu cratime: auto; , acesta din urmă este ignorat. cratime: auto; Plasează orice cratime la discreția sa. Dar pentru ca acesta să funcționeze, trebuie să indicați limba dvs. specificând atributul lang="ru" în div.

Nu împacheta cuvintele pe altă linie

Să presupunem că un element de meniu sau un buton nu va arăta bine dacă se rupe. Prin urmare, separarea lor trebuie interzisă. Pentru a face acest lucru, toate proprietățile de mai sus ar trebui setate în modul „implicit” și adăugate. Faceți clic pe și priviți terenul nostru de antrenament.

Controlați împachetarea cuvintelor cu cratime: automat;

Tetrahidropiranilciclopentiltetrahidropiridopiridină