Formatarea unui paragraf HTML. Spațiere între linii

Acest articol lung tutorial va fi dedicat subiectelor importante, a căror sarcină este de a sorta metodele de lucru cu elementele bloc, de a explica cititorului de ce se folosește modificarea modelului pentru calcularea lățimii și înălțimii elementelor, cum să gestionați depășirea de elemente de bloc și cum să lucrați cu dimensiuni minime și maxime ale elementelor.

În timp ce am aflat despre modelul casetei CSS, am aflat că proprietățile de lățime și înălțime stabilesc lățimea și înălțimea zonei interioare a elementului ( zona de continut), care poate conține text, imagini și alte elemente.

În modelul de casetă CSS, există o diferență între valorile lățimii și înălțimii pe care le oferiți unui element și spațiul pe care îl rezervă browserul pentru a-l afișa. Lățimea și înălțimea totală a elementelor reprezintă zona ferestrei browser care constă din lățimea și înălțimea de umplutură, chenarele și valorile personalizate specificate pentru acestea.

Lățimea totală a elementului se calculează folosind formula:

div(lățime: 150px; /* setează lățimea elementului */înălțime: 150px; /* setează înălțimea elementului */ umplutură: 10px; /* setează umplutura internă a elementului */ chenar: 5px; /* setează marginile elementului */ }

În cazul nostru, acest lucru salvează situația și nu trebuie să facem niciun calcul, iar în viitor ne este teamă de orice modificări care ar putea fi necesare pentru elementele noastre. Să lăsăm aceste calcule inutile din partea browserului și să ne uităm la rezultatul exemplului nostru:

Pentru a înțelege pe deplin acest model pentru calcularea lățimii și înălțimii elementelor, să ne consolidăm cunoștințele cu următorul exemplu:

Valoarea proprietății content-box este valoarea implicită și calculează lățimea și înălțimea totală a elementului conform schemei clasice. Folosind lățimea ca exemplu:

150 px (lățime personalizată) + 10 px (chenar din stânga) + 10 px (chenar din dreapta) + 10 px (chenar din stânga) + 10 px (chenar din dreapta) = 190 px.

În ceea ce privește al doilea element căruia i-am aplicat proprietatea border-box, lățimea și înălțimea personalizate ale elementului includ deja conținutul elementului, chenarul și umplutura. În cele mai multe cazuri, folosirea unei proprietăți cu value border-box este de preferat pe pagini, deoarece face vizibile dimensiunile finale ale elementului și evită unele dintre situațiile neprevăzute discutate mai sus.

Rezultatul exemplului nostru:

Controlul depășirii elementului bloc

În timpul procesului de layout, veți întâlni situații în care conținutul unui element va fi afișat în afara granițelor elementului. În mod implicit, browserul afișează acest conținut (depășirea elementului este redată), ceea ce în unele cazuri duce la erori vizuale. Proprietatea CSS overflow este responsabilă pentru acest comportament al browserului. Să luăm în considerare valorile sale posibile:

Să ne uităm la următorul exemplu:

ÎN în acest exemplu noi am postat patru bloc de lățime și înălțime fixe, pentru care au fost specificate valori diferite Proprietăți CSS preaplin:

• Primul bloc(valoare vizibilă) – conținutul se extinde dincolo de granițele elementului (valoarea implicită).
• Al doilea bloc(valoare ascunsă) – conținutul care depășește elementul este tăiat.
• Al treilea bloc(valoare de defilare) – Depășirea este tăiată, dar este adăugată o bară de defilare.
• Al patrulea bloc(valoare automată) – ca și în cazul valorii de defilare, numai o bară de defilare va fi adăugată automat dacă blocul depășește de-a lungul unei anumite axe ( x- orizontală, sau y- vertical) și nu este afișat permanent pe pagină.

Rezultatul exemplului nostru.

Descriere

Pentru a redimensiona o imagine folosind HTML, sunt furnizate atributele înălțime și lățime. Puteți utiliza valori în pixeli sau procente. Dacă este setată o intrare procentuală, atunci dimensiunile imaginii sunt calculate în raport cu elementul părinte - containerul în care se află eticheta .

Dacă nu există niciun container părinte, fereastra browserului acționează ca acesta. Cu alte cuvinte, width="100%" înseamnă că imaginea va fi întinsă pe toată lățimea paginii web. Adăugarea unui singur atribut de lățime sau înălțime păstrează proporțiile și raportul de aspect al imaginii. Browserul așteaptă până când imaginea este complet încărcată pentru a-i determina înălțimea și lățimea inițiale.

Asigurați-vă că setați dimensiunile tuturor imaginilor de pe pagina web. Acest lucru face ca pagina să se încarce ceva mai rapid, deoarece browserul nu trebuie să calculeze dimensiunea fiecărei imagini după ce o primește. Această afirmație este deosebit de importantă pentru imaginile plasate în interiorul unui tabel.

Lățimea și înălțimea imaginii pot fi modificate fie mai mici, fie mai mari.

Cu toate acestea, acest lucru nu afectează în niciun fel viteza de încărcare a imaginii, deoarece dimensiunea fișierului rămâne neschimbată. Prin urmare, micșorați cu prudență deoarece... Acest lucru poate provoca confuzie în rândul cititorilor cu privire la motivul pentru care o imagine atât de mică durează atât de mult să se încarce. Dar creșterea dimensiunii duce la efectul opus - dimensiunea imaginii este mare, dar fișierul se încarcă mai repede față de o imagine de aceeași dimensiune. Dar calitatea desenului se deteriorează.

Sintaxă

HTML

XHTML

Valori

Orice număr întreg pozitiv în pixeli sau procent.

Valoare implicită

HTML5 IE Cr Op Sa Fx

Etichetă IMG, atribut lățime

În cazul documentelor HTML, etichetele funcționează mai mult pentru a marca conținutul decât pentru a indica modul în care ar trebui să fie prezentat. Un control mai mare asupra prezentării este obținut prin stiluri. În acest articol mă voi uita la acele stiluri care sunt asociate cu formatarea paragrafelor în HTML.

Etichetă

În HTML, puteți specifica paragrafe, iar atributul de aliniere le aliniază la stânga, la dreapta, la centru sau justificat. Pe lângă ele, vom folosi atributul de stil global.

Alinierea paragrafelor

Puteți alinia un paragraf folosind atributul align cu următoarele valori:

Copiați următorul cod în fișierul dvs. .html.

Alinierea paragrafelor folosind atributul Stil

Acest paragraf apare justificat în fereastra browserului. Un paragraf justificat este aliniat la dreapta și la stânga prin adăugarea de spații suplimentare. Puteți vedea că marginile paragrafului justificat se potrivesc cu marginile paragrafelor aliniate la stânga și la dreapta. Într-un paragraf aliniat la stânga, marginea stângă este dreaptă, în timp ce într-un paragraf aliniat la dreapta, marginea dreaptă este dreaptă. Vedeți că ambele margini ale acestui paragraf sunt drepte? Acest lucru se realizează prin stilul text-align:justify.

Într-o fereastră de browser, codul HTML pentru paragraf arată astfel:

Spațiere între linii

Puteți controla spația dintre liniile paragrafului folosind style=line-height . Utilizați atributul style cu următoarele valori:

line-height: normal|număr|lungime|inițial|moștenire;

Mai jos este un exemplu de cod HTML care afișează paragrafe cu spațiere între rânduri diferită:

Acest paragraf folosește două valori pentru atributul stil. Prima linie-height:1.5 specifică o spațiere între rânduri și jumătate pentru paragraf, iar a doua valoare text-align:justify specifică faptul că textul paragrafului trebuie să fie întins pe lățime.

Acest paragraf este la două spații și este justificat. line-height:2 specifică spațierea dublă. Atributul style nu trebuie să aibă două valori. Dar dacă trebuie să specificați două valori, puteți face acest lucru separându-le cu punct și virgulă.

Iată câteva moduri diferite de a utiliza valoarea înălțimii liniei pentru atributul stil:

: Setează distanța dintre linii la 13 pixeli;

: Setează distanța HTML între paragrafe la 200% față de dimensiunea curentă a fontului;

: Setează înălțimea liniei la 14 pixeli.

Indentări

Am folosit termenul „indentări” pentru a fi mai ușor de înțeles. Dar în HTML, folosim spațierea pentru a crea spațiu gol în jurul unui obiect. Puteți utiliza atributul de stil cu o valoare de umplutură pentru a indenta un paragraf la stânga sau la dreapta.

Mai jos este un exemplu de paragrafe cu indentare din stânga și din dreapta:

Acest paragraf nu este indentat, este pur și simplu justificat. Priviți atributul de stil al elementului P pentru acest paragraf.

Pentru acest paragraf, am setat umplutura din stânga la 30px folosind stilul padding-left:30px. Acest paragraf este, de asemenea, justificat folosind stilul text-align:justify. După cum știți deja, putem folosi mai multe valori pentru atributul Stil, separându-le cu punct și virgulă.

Și acest paragraf are o indentație din dreapta de 30 de pixeli, dar nicio indentație din stânga. Este, de asemenea, aliniat la lățime. Valoarea „padding-right” a atributului de stil specifică umplutura corectă. Dacă nu vedeți efectul, reduceți lățimea ferestrei browserului, astfel încât paragraful HTML justificat să fie afișat corect.

Indentări între paragrafe (indentație înainte și după paragraf)

Nu avem nevoie de asta în HTML sau CSS. Putem specifica pur și simplu stilul de umplutură pentru element

Padding-top și padding-bottom specifică spațiul alb înainte și după un paragraf, care acționează ca umplutură în partea de sus sau de jos. Uită-te la exemplul de etichetă de mai jos

Am setat primul paragraf HTML să aibă o umplutură de 10 pixeli înainte de al doilea paragraf și 50 de pixeli după al doilea paragraf:

Acest paragraf nu are nicio indentare înainte sau după specificată. Acesta este un paragraf obișnuit, justificat. După cum știți deja, putem justifica un paragraf folosind codul style="text-align:justify" în interiorul etichetei.

Acest paragraf este exagerat. De asemenea, are 10 pixeli de umplutură înaintea paragrafului și 50 de pixeli după acesta. În interiorul etichetei am setat 3 stiluri.

Acesta este un paragraf obișnuit, fără indentări și aliniere implicită.

Lucruri de reținut

• Un paragraf HTML poate fi aliniat folosind atributul align sau stilul text-align;
• HTML va fi redat diferit în funcție de dimensiunile ecranului, dimensiunile ferestrei browserului;
• Adăugarea de spații suplimentare sau linii goale Codul HTML nu afectează rezultatul. Browserul elimină toate spațiile suplimentare;
• Etichetele definesc ceea ce ar trebui să fie afișat, iar stilurile definesc modul în care ar trebui să fie afișat;
• Stilurile pot fi specificate în trei în diverse moduri- încorporat (în etichete), intern ( în interiorul aceluiași fișier HTML folosind elementul

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

  Rezultatul acestui exemplu, așa cum este afișat în browserul Safari, este prezentat în Fig. 1.

  Orez. 1. Lățimea blocului

  Model de obiect

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

  Browsere

  Internet Explorer 6 definește incorect lățimea ca lățime minimă . În modul ciudat, versiunile Internet Explorer până la 8.0 inclusiv calculează incorect lățimea unui element fără a adăuga valori de umplutură, marjă sau chenar la acesta.

  Versiunile de Internet Explorer până la 7.0 inclusiv nu acceptă valoarea de moștenire.