Informații teoretice scurte. Lucruri de amintit

Î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. Mai mult control asupra prezentării este obținut cu stiluri. În acest articol, voi analiza acele stiluri care sunt legate de 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 la justificare. Pe lângă ele, vom folosi atributul de stil global.

Alinierea paragrafelor

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

text-align: stânga|dreapta|centru|justificare|inițial|moștenire;

Copiați următorul cod într-un fișier .html.

Acest paragraf este aliniat la centru

Acest paragraf este aliniat la dreapta

Acest paragraf este afișat în fereastra browserului justificat. Un paragraf bine distanțat este justificat 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 justificate din stânga și din dreapta. Într-un paragraf aliniat la stânga, marginea din stânga este uniformă, iar într-un paragraf aliniat la dreapta, este dreapta. Puteți vedea că acest paragraf are ambele margini egale? Acest lucru se realizează datorită stilului text-align:justify.

În fereastra browserului HTML, codul paragrafului arată astfel.

Spațiere între linii

Puteți controla distanța dintre rânduri a unui paragraf cu style=line-height . Utilizați atributul style cu următoarele valori:

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

Următorul este un exemplu de cod HTML care scoate 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 justificat în lățime.

Acest paragraf are spațiere dublă între rânduri ș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 dintre paragrafe în HTML la 200% din dimensiunea fontului curent;

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

Indentare

Am folosit termenul „indentație” pentru a fi mai ușor de înțeles. Dar în HTML, folosim spații pentru a crea spațiu alb în jurul unui obiect. Puteți utiliza atributul de stil cu o valoare de padding pentru a seta indentația din stânga sau din dreapta unui paragraf.

Următorul este un exemplu de paragrafe indentate la stânga și la dreapta:

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

Pentru acest paragraf, am setat indentarea din stânga la 30px folosind 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 liniuță din dreapta de 30 de pixeli, dar nicio liniuță din stânga. Se justifică și în lățime. Valoarea „padding-right” a atributului de stil setează padding-ul la dreapta. 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 (indentare înainte și după un paragraf)

În HTML sau CSS, nu avem nevoie de asta. Putem doar modela căptușeala pe element

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

Am setat primul paragraf HTML la 10px indent înainte de al doilea și 50px după al doilea paragraf:

Acest paragraf nu este indentat înainte sau după. Acesta este un paragraf normal justificat. După cum știți deja, putem justifica un paragraf folosind codul style="text-align:justify" din interiorul etichetei.

Acest paragraf este aliniat. Are, de asemenea, o indentație de 10 px înainte de paragraf și 50 px după. În interiorul etichetei, am setat 3 stiluri.

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

Lucruri de amintit

• 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 la 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 setate în trei moduri diferite - inline (în interiorul etichetelor), intern ( în interiorul aceluiași fișier HTML cu un element

  Pentru acest paragraf, setați numai lățimea și înălțimea.

  Acest paragraf conține, pe lângă lățime și înălțime, o liniuță, o chenar și o liniuță.

  Încerca "

  Exemplul arată clar că al doilea element ocupă mai mult spațiu decât primul. Dacă calculăm conform formulei noastre, atunci dimensiunile primului paragraf sunt 150x100 pixeli, iar dimensiunile celui de-al doilea paragraf sunt:

  
  

  Inaltimea totala:	5px	+	10px	+	100px	+	10px	+	5px	= 130px
  	superior cadru		superior indentare		înălţime		inferior indentare		inferior cadru

  adică 180x130 pixeli.

  debordarea elementului

  După ce ați definit lățimea și înălțimea pentru element, ar trebui să acordați atenție unui punct important - conținutul situat în interiorul elementului poate depăși dimensiunea blocului specificată. În acest caz, o parte din conținut va depăși granițele elementului, pentru a evita acest moment neplăcut, puteți folosi proprietatea CSS de overflow. Proprietatea overflow îi spune browserului ce să facă dacă conținutul blocului depășește dimensiunea acestuia. Această proprietate poate lua una dintre cele patru valori:

  • vizibil este valoarea implicită utilizată de browser. Specificarea acestei valori va avea același efect ca și nesetarea proprietății de overflow.
  • scroll - Adaugă bare de defilare verticale și orizontale unui element.
  • automat - Adaugă bare de defilare dacă este necesar.
  • ascuns - ascunde o parte din conținutul care depășește limitele elementului bloc.