Atributul align și valorile acestuia. Opțiuni de spații albe și de împachetare a cuvintelor pentru a controla întreruperile de linie

Salutare dragi cititori ai site-ului blogului. În acest articol, continuăm să explorăm elementele de bază ale stilului Markup CSSși luați în considerare proprietățile vertical-align, text-align, text-indent și unele altele, concepute pentru a stila textul html.

Alinierea textului cu CSS

Să începem cu atributele de stil care controlează redarea textului în elementele bloc. Sa incepem cu proprietăți de aliniere a textului care este de fapt un înlocuitor pentru atributul align (folosit pentru a alinia conținutul elementelor html, cum ar fi p paragrafe).

Proprietate de stil aliniere textîntreabă aliniere orizontala textși are doar patru valori posibile:

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

Valorile disponibile pentru această regulă determină alinierea, respectiv: stânga - la stânga, dreapta - la dreapta, centru - la centru și justifică - la lățimea paginii (simultan la stânga și la dreapta prin creșterea distanței între cuvinte). De exemplu, textul din acest articol este aliniat la lățimea paginii (dacă observați că are margini egale atât la stânga, cât și la dreapta) folosind regula text-align: justify.

În mod implicit, alinierea orizontală este aliniată la stânga, deci nu este necesar să specificați în mod specific text-align: left, cu excepția cazului în care a fost specificată o aliniere diferită în elementele părinte.

Exemple de utilizare a proprietății:

p (alinierea textului: justificare)
h1 (alinierea textului: centru)

Următoarea proprietate CSS text-identîntreabă indentare pentru linia roșie, de exemplu pentru textul din eticheta de paragraf p. Această regulă, precum text-align, se aplică numai elementelor bloc. Sintaxă:

text-indent:<отступ>

Valorile de indentare absolute și relative sunt permise aici. Valorile absolute (px - pixeli, em, ex etc.) pot fi specificate atât cu semnul plus, cât și cu semnul minus. Mărimea relativă de obicei dat ca procent (%). Valoarea relativă este calculată din lățimea zonei care este rezervată pentru text. Deci, regula css text-indent: 50% va seta linia roșie egală cu jumătate din lungimea acestei linii în sine. În mod implicit, indentare „linie roșie”. este zero... Exemplu:

p (ident text: 10px;)

În continuare, să ne uităm la alinierea verticală - proprietatea vertical-align... Această proprietate este deja valabilă pentru toată lumea. elemente htmlși pentru aproape toată lumea înseamnă aliniere unul cu celălalt elemente inline cu text relativ la linia de bază. Cu excepția etichetelor de tabel td și th, în care tot conținutul va fi aliniat vertical. Sintaxă:

aliniere verticală: linie de bază | sub | super | sus | text-sus | mijloc | jos | text-jos |<величина>

Să luăm în considerare fiecare valoare mai detaliat:

• linie de bază - alinierea unei bucăți de text la linia de bază element părinte... Aceasta este valoarea implicită;
• sub - o bucată de text este afișată ca indicele sau indice pentru elementul părinte;
• super - o bucată de text este afișată ca superscript sau superscript pentru elementul părinte;
• top - aliniază o bucată de text la marginea de sus a elementului părinte;
• text-top - aliniază fragmentul la marginea de sus 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 - alinierea fragmentului la marginea de jos a textului elementului părinte;

Figura de mai jos arată comportamentul fragmentelor de testare pentru diferite valori ale proprietății de aliniere verticală din browser. Internet Explorer 11:

Pe lângă valorile de mai sus, puteți specifica valori numerice... Asa de, regula CSS vertical-align: 0 va însemna același lucru cu vertical-align: baseline. Și regula vertical-align: 10px va compensa textul 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 aliniere verticală conținutul celulelor tabelului în aliniere verticală ar trebui să utilizeze valorile:

• 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ăți de stil vertical-align. numeroși valori posibile da rezultate prea diferite în cazuri diferite.

Opțiuni de spații albe și de împachetare a cuvintelor pentru a controla î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 browser-ul combină toate consecutive caractere cu spații albe: spații, rupturi de rând ș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.
Folosind o valoare 
Va fi o analogie completă atunci când utilizați eticheta 
Browserul va reda pagina ținând cont de toate spatii suplimentareși separarea prin silabe așa cum a fost adăugată de dezvoltator.  Dacă linia de text se dovedește a fi prea lungă, atunci va fi adăugată dungă orizontală defilare.

Valoarea nowrap împiedică browserul să împacheteze linii, iar textul este afișat pe o singură linie.  Singurul lucru, adăugarea unei etichete 
va transfera textul către 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ă, browserul înfășoară automat textul pe o nouă linie.
Ei bine, valoarea pre-linie convertește spațiile într-un spațiu, fluxurile de rând sunt salvate și browserul poate rupe linii prea lungi pentru a evita derularea orizontală.
Exemplu de utilizare:
p (spațiu alb: pre;)
Luați în considerare următoarea parametrul de înfășurare a cuvintelor, care se rotește pentru a indica dacă se transferă sau nu cuvinte lungi care nu se încadrează în zona specificată.  Această proprietate nu este folosită des, dar uneori nu te poți descurca fără ea:
word-wrap: normal | break-word
Valoarea normală îi spune browserului să întrerupă textul doar la 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;)
Parametri umbră text - proprietate text-shadow
Pentru fanii diferitelor ornamente din standardul CSS3, a devenit posibil să se stabilească o umbră pentru text.  Utilizarea inteligentă a proprietății text-shadow vă permite să animați vizibil pagină web...  Sintaxă:
text-shadow: niciunul |<цвет> <горизонтальное смещение> <вертикальное смещение> [<радиус размытия>]
Valoarea none anulează umbrirea textului și este setată implicit.
Culoarea umbrei este setat în orice format CSS disponibil și nu este parametrul necesar...  În mod implicit, culoarea umbrei este aceeași cu culoarea textului.
Deplasarea orizontală a umbrei poate fi specificat în orice unitate de măsură suportată de CSS.  Dacă valoarea este pozitivă, umbra va fi poziționată în dreapta textului, cu negativ - la stânga. Valoare zero va poziționa umbra direct sub text și are sens numai dacă umbra este neclară.
Deplasarea verticală a umbrei de asemenea, poate fi setat în orice unitate de măsură acceptată de CSS.  O valoare pozitivă va muta umbra sub text; o valoare negativă o va muta deasupra acesteia.  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 valoarea este mai mare, cu atât umbra devine mai largă și se netezește mai mult.  Dacă acest parametru nu este setat, se presupune că valoarea de estompare este zero.  Deoarece algoritmul de netezire are de obicei browsere diferite este diferit, aspectul umbrei poate diferi ușor în funcție de browser.
Să luăm î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 a acestei reguli stil în Internet Explorer 11:

Aceasta va încheia articolul.  Pentru a afla mai multe despre Proprietăți CSS nu uitați să vă abonați la actualizările blogului și să citiți articolele din secțiunea „”.  Pana data viitoare!
Salutari Prieteni!  Astăzi vom vorbi despre eticheta paragraf și despre atributul de aliniere...  În general, tot conținutul dintr-o pagină ar trebui să fie împărțit în paragrafe.  Conținutul paragrafului este scris între etichete 
Text…
...  Când afișăm 2 paragrafe consecutive, atunci se formează un câmp invizibil între ele, care le respinge unul de celălalt.  Eticheta este eticheta bloc prin urmare ocupă întreaga lățime a paginii.

De exemplu, să luăm o pagină cu acest 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ărit ș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 într-un 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ă: nume_atribut = „valoare”
Atribut de aliniere
De exemplu, avem un paragraf pe o pagină și dorim să-i aliniem conținutul.  Pentru a face acest lucru, scriem atributul în interiorul etichetei de deschidere alinia, care este responsabil pentru alinierea conținutului în cadrul paragrafului și să îi acorde o singură valoare.
Conținutul paragrafului.


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

 
Text…
Așa 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: 
Am aflat astăzi despre ce este vorba paragrafîn html.  Paragrafele sunt folosite foarte des în html.  De asemenea, am învățat 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.
Descriere
 
Aliniază un bloc de text la margine.
Stilurile trebuie folosite în locul acestui atribut
 
Sintaxă
 
Valorile
stânga Aliniază textul la stânga.  În acest caz, liniile de text sunt aliniate la stânga, iar marginea dreaptă este „scara”.  Această metodă de aliniere este cea mai populară pe site-uri, deoarece permite utilizatorului să găsească cu ușurință o nouă linie cu o privire și să citească confortabil text mare.  center Aliniază textul la centru.  Textul este centrat orizontal în fereastra browserului sau containerul în care se află caseta de text.  Liniile de text sunt înșirate împreună pe o axă invizibilă care se întinde în centrul paginii web.  O metodă similară de aliniere este utilizată în mod activ în titluri și diferite legendele, cum ar fi legendele figurilor, oferă un aspect oficial și solid designului textului.  În toate celelalte cazuri, alinierea la centru este rar aplicată. motivul 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 „ruptă”.  Datorită faptului că marginea din stânga nu este aliniată, și anume, de la ea, începe citirea unor linii noi, un astfel de text este mai greu de citit decât dacă ar fi aliniat la stânga.  Prin urmare, justificarea la dreapta este de obicei folosită pentru titluri scurte de cel mult trei rânduri.  Nu luăm în considerare site-uri specifice în care textul trebuie citit de la dreapta la stânga, este posibil acolo mod similar aliniere și să fie la îndemână.  Dar unde ați văzut astfel de site-uri la noi?  justificare Justificare, ceea ce înseamnă justificare 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 iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore teisi feugat nulla facil  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 mobil
1

1

6

1


✖

Browsere
Următoarele convenții sunt utilizate în tabelul browserului.
- elementul este pe deplin suportat de browser;
- elementul nu este perceput de browser și este ignorat;
- in timpul functionarii, aparitia diverse erori, sau articolul este susținut de avertismente.
Numărul indică versiunea de browser din care este acceptat elementul.
Pentru imagini, standardele nu definesc o aliniere implicită în ceea ce privește textul și alte imagini de pe aceeași linie - nu este întotdeauna posibil să se prezică cum vor arăta aceste componente.1 În documentele HTML, imaginile sunt de obicei „inline” cu o singură linie. linie de text.  După cum se obișnuiește în media tipărită mass media textul „înfășoară” în jurul lor, astfel încât mai multe linii pot fi adiacente imaginii și deloc una.
Din fericire, creatorii de documente sunt capabili să controleze oarecum alinierea imaginilor în raport cu textul din jur folosind atributul de aliniere al etichetei. ...  Standardele HTML și XHTML definesc cinci valori pentru atributul de aliniere: stânga, dreapta, sus, mijloc, jos.  Valorile stânga și dreapta fac ca textul să se înfășoare în jurul imaginii, deplasat la marginea corespunzătoare.  Restul trei aliniază imaginea direcție verticalăîn raport cu textul înconjurător.
Toate browserele populare, inclusiv Opera, Firefox, Netscape și Internet Explorer, sunt de acord că atributul align = bottom este alinierea verticală implicită și poziționează imaginile la egalitate deasupra caracterului cel mai de sus într-o linie de text, vezi Figura 4-2.  15.11.
În același timp, browserele nu sunt de acord cu privire la modul de poziționare a imaginilor cu atributul align = middle în raport cu textul.  În fig.  Figura 5.11 arată că Netscape și Opera poziționează imaginea pe linia din mijloc a textului.  În ceea ce privește browserele Internet Explorer
Orez.  5.11.  Alinierea standard a imaginilor încorporate
Orez.  5.12.  Internet Explorer și Firefox aliniază linia de mijloc a imaginii cu linia de mijloc a celui mai înalt element, nu cu linia de mijloc a textului
și Firefox, poziționează imaginea în linia centrală a celui mai înalt element, care nu este neapărat text (Figura 5.12).
În plus, browserele acceptă, în diferite grade, cinci caracteristici suplimentare de aliniere verticală a imaginii: texttop, center, absmiddle, baseline, and absbottom (ridicați mâna dacă nu ați ghicit ce înseamnă acestea):
Expresia align = texttop îi spune browserului să alinieze marginea superioară a imaginii cu marginea superioară a celui mai înalt element de text din linia curentă...  În caz contrar, partea de sus este activă și aliniază partea de sus a imaginii cu partea de sus a celui mai înalt element, componentă de text sau imagine de pe linia curentă.  Dacă linia nu conține alte imagini care să iasă deasupra textului, texttop și top au același efect.  Opera nu acceptă texttop, dar alte browsere populare îl interpretează strict conform acestei descrieri.
Introdus pentru prima dată în Internet Explorer și Netscape, valoarea pentru centru este interpretată în browserele Internet Explorer, Netscape și Firefox în același mod ca valoarea pentru mijloc.  Dar să nu uităm că fiecare dintre ei înțelege semnificația mijlocului în felul său.  Opera ignoră expresia align = center.
Dacă dați atributul align al etichetei valoare absmiddle, browserul va seta mijlocul absolut al imaginii față de mijlocul absolut al liniei curente.  Acesta nu este cazul valorilor din mijloc și din centru, care aliniază mijlocul imaginii cu linia de bază a liniei curente de text.  În timp ce Netscape și Opera nu fac distincție între absmiddle și middle, Firefox și Internet Explorer folosesc aceste valori pentru a alinia selectiv imaginile la liniile centrale.  Cu alte cuvinte, Firefox și Internet Explorer tratează absmiddle în același mod în care Netscape tratează mijlocul.
Orez.  5.13.  La alinierea imaginilor cu atributul alingn = absbottom, browserele respectă descendenții
de jos și de bază (implicit)
Valorile de jos și de bază au același efect ca și cum nu ați include deloc atributul de aliniere.  Browserul aliniază partea de jos a imaginii cu linia de bază a textului.  Acest lucru nu trebuie confundat cu efectul valorii de jos, care include și părți ale literelor care se încadrează sub linia de bază 1 (Dacă aveți totuși mâna ridicată, o puteți coborî.)
Expresia align = absbottom îi spune browserului să alinieze partea de jos a imaginii cu partea de jos reală a textului de pe linia curentă.  True Bottom este punctul cel mai de jos al textului, inclusiv orice descendenți (de exemplu, Partea de jos caracterul „y”), chiar dacă nu există niciunul în șir.  Linia de bază trece de-a lungul marginii inferioare a „v” din simbolul „y”.  Opera, purtătorul standardului, ignoră valoarea absbottom, iar alte browsere populare o tratează așa cum este descris (Figura 5.13).
Utilizați partea de sus și de mijloc pentru a alinia miniaturile, marcatorii și alte imagini de specialitate cu textul din apropiere.  În alte cazuri, align = bottom (selectat implicit) are rezultate mai bune aspect...  Când aliniați una sau mai multe imagini pe o linie, alegeți valoarea atributului care va da cel mai bun aspect documentului dvs.
Specificație
 
HTML:
 
3.2

 
4.01

 
5.0

 
XHTML:
 
1.0

 
1.1

Descriere
 
Alinierea conținutului unui recipient 
pe margine.

 
Sintaxă
 
...
 
Valorile
center Aliniază textul la centru.  Textul este centrat orizontal în fereastra browserului sau containerul în care se află caseta de text.  Liniile de text sunt înșirate împreună pe o axă invizibilă care se întinde în centrul paginii web.  O metodă similară de aliniere este utilizată în mod activ în titluri și diferite legendele, cum ar fi legendele figurilor, 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.  stânga Aliniază textul la stânga.  În acest caz, liniile de text sunt aliniate la stânga, iar marginea dreaptă este „scara”.  Această metodă de aliniere este cea mai populară pe site-uri, deoarece permite utilizatorului să găsească cu ușurință o nouă linie cu o privire ș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 dreapta, în timp ce stânga rămâne „ruptă”.  Datorită faptului că marginea din stânga nu este aliniată, și anume, de la ea, începe citirea unor linii noi, un astfel de text este mai greu de citit decât dacă ar fi aliniat la stânga.  Prin urmare, justificarea la dreapta este de obicei folosită pentru titluri scurte de cel mult trei rânduri.  Nu luăm în considerare site-uri specifice în care textul trebuie citit de la dreapta la stânga, poate exista o modalitate similară de aliniere și poate fi utilă.  Dar unde ați văzut astfel de site-uri la noi?  justificare Justificare, ceea ce înseamnă justificare 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ă
 
HTML 4.01 IE Cr Op Sa Fx

 

 
 
 
 
 
 
 

 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
 
 

 
Rezultat acest exemplu prezentată în fig.  unu.
 
Orez.  1. Alinierea elementelor folosind atributul align