De regulă, blocurile de text sunt separate prin paragrafe (paragrafe). În mod implicit, există un mic spațiu vertical între paragrafe, numit spațiu. Sintaxa pentru crearea paragrafelor este următoarea.

Paragraful 1

paragraful 2

Fiecare paragraf începe cu o etichetă

Și se termină cu o etichetă de închidere opțională

În orice carte, indentarea primului rând, numită și „linia roșie”, este folosită pentru a evidenția următorul paragraf. Acest lucru permite cititorului să caute cu ușurință o nouă linie și astfel crește lizibilitatea textului. Pe o pagină web, această tehnică nu este de obicei folosită, dar umplutura este folosită pentru a separa paragrafele.

Exemplul 7.1 arată utilizarea paragrafelor pentru a crea indentări între linii.

Exemplul 7.1. Utilizarea Paragrafelor

Folosind paragrafe

În unele locuri este încă februarie, în altele este deja aprilie.

Timpul trece, veșnic numărătoare: an după an, secol după secol...

În toate – ritmul lui negrabă, alergarea lui neagră ca beznă.

Există douăzeci și cinci de săptămâni de bucurie și tristețe într-un an.

Am douăzeci și cinci de săptămâni de februarie și douăzeci și cinci de săptămâni de aprilie.

Timp de douăzeci și cinci de săptămâni, secole trec în ceață.

Farsa mea sonoră zboară undeva spre nori.

M. Shcherbakov

Rezultatul acestui exemplu este prezentat în Fig. 7.1.

Orez. 7.1. Indentare pe o pagină web când se utilizează paragrafe

După cum se poate vedea din figură, atunci când utilizați eticheta

Sunt prea multe spații între paragrafe. Puteți scăpa de ele dacă adăugați o etichetă la rupturile de rând:
. Spre deosebire de un paragraf, o etichetă de întrerupere de linie
nu creează spații verticale suplimentare între linii și poate fi folosit în aproape orice text.

Astfel, textul exemplului 7.1, luând în considerare rupturile de linie, va fi transformat astfel (exemplul 7.2).

Exemplul 7.2. Etichetă

Siguranțe în text

Migdali înfloresc în unele grădini, în timp ce furtunile de zăpadă în altele.
În unele locuri este încă februarie, în altele este deja aprilie.
Timpul trece, veșnic numărătoare: an după an, secol după secol...
În toate – ritmul lui negrabă, alergarea lui neagră ca beznă.
Există douăzeci și cinci de săptămâni de bucurie și tristețe într-un an.
Am douăzeci și cinci de săptămâni de februarie și douăzeci și cinci de săptămâni de aprilie.
Timp de douăzeci și cinci de săptămâni, secole trec în ceață.
Farsa mea sonoră zboară undeva spre nori.

M. Shcherbakov

Rezultatul exemplului este prezentat în Fig. 7.2. Se poate observa că distanța dintre liniile de text a scăzut și a căpătat un aspect mai compact.

În timp ce citiți orice carte, ziar, revistă sau, într-adevăr, orice text normal, ați întâlnit multe paragrafe, iar primul rând al fiecăruia conține mică adâncime. În acest articol voi arăta cea mai buna varianta stabilirea indentărilor de paragraf folosind CSS.

Desigur, orice număr de spații pot fi inserate folosind , selectând astfel indentarea necesară, dar probabil că înțelegeți că aceasta metoda, ca să spunem ușor, incomod. Și soluția la această problemă este foarte simplă.

Ar trebui să știți deja că în HTML, un paragraf este creat folosind . Astfel, fiecare paragraf ar trebui să fie în propria etichetă. Și pentru a indenta primul rând al fiecărui paragraf, trebuie doar să conectați următorul cod CSS:

P(
text-indent: 10px;
}

ÎN în acest exemplu am făcut o indentare de 10 pixeli. Vă puteți juca cu această valoare pentru a găsi cea mai bună pentru site-ul dvs.

Ca aceasta într-un mod simplu Puteți indenta primele rânduri ale oricărui paragraf din textul de pe site.

Dacă aveți întrebări sau doriți să comentați acest articol, vă puteți lăsa comentariul în partea de jos a paginii.

31.05.2013 13:10:03

Bună Mihail, ajută-mă să rezolv problema cu următorul cod CSS: .bam ( chenar: 1px negru solid; chenar-radius: 8px; margin-bottom: 4%; text-align: left; width: 84%; ) .bam .author (culoare fundal: alb; chenar-jos: 1px negru solid; chenar-sus-dreapta-rază: 8px; chenar-sus-stânga-rază: 8px; font-weight: bold; padding:4px; ) .bam .text (culoare de fundal: WhiteSmoke; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding:4px; ) Este necesar ca textul din interiorul „.bam .text” să se împacheteze într-un altul linie dacă nu se încadrează pe o linie. Dar din anumite motive nu este transferat, ci se târăște din bloc. Ajută la rezolvarea acestei probleme.

Răspuns

06.06.2013 22:42:20

Bună Mihail, se întâmplă să știi cum să găsești o cale de ieșire din următoarea situație: există un bloc, iar în interiorul lui există un alt bloc, iar în acest bloc, ceea ce este în interior este text scris (lungimea textului este necunoscut dinainte). Deci, cum puteți face ca înălțimea blocului părinte să depindă de înălțimea blocului din interiorul acestuia (cu text)? Din anumite motive, se dovedește că înălțimea blocului părinte este mai mică decât înălțimea celui intern.

Răspuns

Admin 06.06.2013 23:32:40

Toate blocurile externe sunt întinse în funcție de dimensiunea blocurilor interne. Nu este nevoie să faceți acest lucru, ar trebui să fie deja acolo implicit.

Răspuns

07.06.2013 11:11:09

și te uiți: http://progbase.ru/about.php

Răspuns

Admin 06.07.2013 21:54:37

Trebuie folosit - puneți-l acest bloc V locuri diferite si vezi ce se schimba. Odată ce totul este în ordine, lăsați-l acolo.

Răspuns

13.09.2013 21:39:34

Buna ziua! Vă rugăm să mă ajutați să creez indentări și alte stiluri de text în această fereastră de tip tooltip. Pur și simplu, ceva nu funcționează, asta-i tot. Mulțumesc anticipat. .podskazka( culoare de fundal: #FF6600; padding:0px; chenar:3px solid #66FFFF; poziție:absolut; margine: 3px; lățime: 200px; înălțime minimă: 50px; înălțime maximă: automat; spațiu alb: normal ; chenar-jos: 1px întreruptă #000080; ) funcția podskazka() ( this.show = function(text,x,y) ( var div = document.createElement("div"); div.className = "podskazka"; div .id = "metka"; div.innerHTML = text; var koordx = x + 0; var koordy = y + 20; div.style.left = koordx + "px"; div.style.top = koordy + "px" ; document.body.appendChild(div); ) this.hide = function() ( var metka = document.getElementById("metka"); metka.parentNode.removeChild(metka); ) ) var vsplil = new podskazka(); hint Sugestie și mai departe în text

Î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 cu 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.

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

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

Copie următorul cod la fișierul .html.

Alinierea paragrafelor folosind atributul Stil

Acest paragraf este aliniat la centru

Acest paragraf este aliniat la dreapta

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 stângă este dreaptă. Vedeți cum ambele margini ale acestui paragraf sunt drepte? Acest lucru se realizează prin stilul text-align:justify.

La fereastră browser HTML Codul paragrafului arată astfel.

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ă:

Instalare spațiere între linii folosind atributul Stil

Acest paragraf folosește două sensuri pentru atribut de 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 răspândit 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ă.

: Seturi spațiere între linii 13 pixeli;

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

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

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:

Indentați paragrafele folosind atributul Stil

Acest paragraf nu este indentat, este pur și simplu justificat. Uitați-vă la atributul de stil al elementului P pentru acest paragraf.

Pentru acest paragraf, am setat umplutura din stânga la 30 px 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.

În HTML sau CSS nu avem nevoie de asta. 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 instalat pentru prima Paragraf HTML indentare 10 pixeli înainte de al doilea și 50 pixeli după al doilea paragraf:

Indentați paragrafele folosind atributul Stil

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ă înainte de paragraf ș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ă.

• 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 HTML nu afectează rezultatul. Browserul șterge totul spatii 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 căi diferite— încorporat (în etichete), intern (în cadrul aceluiași fișier HTML folosind elementul) și extern (într-un fișier separat);
• Cea mai bună practică atunci când dezvoltați site-uri web este să utilizați un extern fișier CSS. Astfel putem separa conținutul și prezentarea;
• Stilul este un atribut global, deci poate fi folosit pe orice alte elemente, nu doar pe element

  ;

• Stilul de aliniere a textului aliniază un paragraf la stânga, la centru, la dreapta sau justificat;
• Spațierea dintre linii pentru un paragraf poate fi setată folosind stilul înălțime de rând. Poate căpăta înțelesuri diferite;
• Puteți specifica mai multe valori pentru înălțimea liniei (1 pentru spațierea unei linii, 1,5 pentru unu și jumătate, 2 pentru dublu, 3 pentru triplu etc.), precum și pixeli, procente etc.;
• Indentarea paragrafelor în HTML poate fi setată folosind stilul padding-left sau padding-right. Poate lua valori în pixeli, procente etc.;
• Spațierea dintre paragrafe în HTML poate fi setată folosind stilurile padding-top sau padding-bottom. Valorile în pixeli, procente etc. sunt, de asemenea, acceptabile pentru aceasta.

Această publicație este o traducere a articolului „HTML Paragraph Formatting”, pregătit de echipa prietenoasă a proiectului

Deci, să începem să studiem direct limbaj HTML. În sfârșit, încă câteva cuvinte în afara subiectului.

În procesul de prezentare a materialului se vor da multe exemple, pe care te sfătuiesc să le faci singur. După ce ați tastat textul exemplu, asigurați-vă că vă uitați la ce ați primit (cred că veți fi interesat). Dacă utilizați un editor HTML specializat, atunci, de regulă, un astfel de program are propriul browser încorporat, cu care puteți vedea rezultatele muncii dvs.

Dacă lucrurile sunt cu adevărat dificile și utilizați un blocnotes obișnuit, atunci pentru a-l vizualiza trebuie să salvați textul sursă cu extensia .htm sau .html și apoi să vizualizați fișierul salvat într-un browser. Dacă ai Windows, atunci motor de cautare Explorer este încorporat automat în timpul instalării sistemului.

Ei bine, asta pare să fie tot.

Sa trecem la treaba.

Există mai multe etichete HTML de bază care trebuie să fie prezente în textul oricărei pagini Web. Fiecare pagină Web trebuie să conțină o etichetă (etichetă) situată chiar la început. Această etichetă (etichetă) descrie documentul dvs. ca o pagină Web în format HTML. Direct după descriptor este de obicei o etichetă (etichetă), care indică prezența unui text care conține numele paginii și Informații suplimentare despre ea.

Secțiunea HEAD conține de obicei o etichetă care servește la indicarea numelui paginii. Titlurile paginilor apar de obicei în bara de titlu a ferestrei browserului. Titlul paginii web poate fi introdus numai folosind caractere alfanumerice și spații.

Aceasta este urmată de o etichetă (etichetă), care indică începutul „corpului” real al paginii Web. Această secțiune conține tot restul textului, graficelor, tabelelor și altor elemente ale conținutului paginii pe care le va vedea un vizitator al site-ului dvs.

Exemplu:

Instruire online: HTML Textul site-ului

Un editor HTML normal are deja un set de etichete (etichete) de mai sus atunci când creează o pagină nouă. Trebuie spus că alegerea numelor pentru paginile Web trebuie luată foarte în serios, pentru că sunt folosite de motoarele de căutare pentru a crea cataloage de pagini Web. Un motor de căutare este un site web care ajută utilizatorii să găsească rapid informațiile de care sunt interesați. Pagina dvs. este mai probabil să fie găsită de un motor de căutare căruia i se oferă un anumit set de Cuvinte cheie caută dacă aceste cuvinte sunt prezente în titlul paginii. Printre cele mai populare motoare de căutare ar trebui să fie numit Yandex, Google, Aport, Yahoo, Rambler.

Browserele web de obicei nu iau în considerare acele caractere newline care sunt introduse în text de către utilizator în etapa formării acestuia. Pentru a începe un nou paragraf, utilizați o etichetă (etichetă)

.

După deschiderea unei pagini într-o fereastră de browser Web, toate paragrafele textului acesteia sunt marcate cu o etichetă (etichetă)

, sunt separate linii goale, care îi îmbunătățește aspectul și aspectul.

În mod implicit, browserul formatează de obicei paragrafele cu aliniere la stânga. Pentru a forța alinierea, utilizați atributul align. Cu ajutorul acestuia, paragrafele pot fi aliniate la stânga, la dreapta, la centru și justificate.

Exemplu:

Browserele web împachetează automat textul în paragrafe pe o nouă linie. Dacă sarcina este de a plasa orice combinație de cuvinte într-o singură linie, atunci o etichetă (etichetă) este utilizată în acest scop.

A merge la linie nouă se folosește eticheta
. Spune browserului să nu mai plaseze text și alte elemente ale paginii în linia curentă și să treacă la o nouă linie. Această etichetă (etichetă) nu are omologul său slash, așa-numita etichetă de închidere (etichetă).

Utilizarea principală a acestei etichete este de a forța elementele inline în anumit loc pagini. Este convenabil și în cazurile în care este necesară mărirea zonelor goale între elemente separate pagini.

Pentru a-i da un stil specific, trebuie să plasați textul în containerul corespunzător.

Toate etichetele de formatare pot fi împărțite în trei grupuri:

1. Etichete de antet (h1-h6).

2. Etichete de design pentru textul corpului ( , , , etc.).

3. Etichete de grupare (

, ,
)

Ele transformă textul obișnuit într-un titlu de un anumit nivel. Eticheta creează titlul de primul nivel - cel mai mare și cel mai important (de obicei titlul articolului de pe pagină) și este responsabil pentru titlul de al șaselea nivel - cel mai mic și mai discret. Aceste etichete sunt importante atât pentru utilizatori, cât și pentru motoarele de căutare - ambilor le plac titlurile cu subtitluri. Trebuie respectată ierarhia nivelurilor, adică trebuie să treci în urmă, și nu invers.

Pentru a înțelege cum funcționează, introduceți următorul cod în fișierul html:

Titlu de primul nivel Titlu de nivel al doilea Titlu de nivel al treilea Titlu de nivel al patrulea Titlu de nivel al cincilea Titlu de nivel al șaselea

În browser va arăta așa:

Permite formatarea la nivel de caracter. Să ne uităm la ce poți face cu ele.

Este necesar să se concentreze atenția asupra textului. De asemenea, este important pentru motoarele de căutare, acestea pot evidenția cuvintele cheie.

Etichetele și sunt responsabile pentru stilul îndrăzneț.

Ele pot fi utilizate în formule, ecuații și desemnarea anumitor cantități.

Eticheta este responsabilă pentru crearea indicilor inferiori, iar eticheta este utilizată pentru indici superiori.

X1=32 m2

Dacă trebuie să faceți textul cu o valoare mai mică decât valoarea setată pe toată pagina, atunci trebuie să utilizați eticheta

Text simplu. Text redus.

Acest tip de evidențiere poate fi folosit pentru a indica modificările aduse unui document sau pur și simplu pentru a atrage atenția asupra textului.

Text simplu. Text subliniat.

Puteți tăia informații dacă acestea și-au pierdut deja relevanța. Eticheta este destinată acestui lucru.

Este necesar să se concentreze atenția asupra textului și poate fi creat cu o etichetă sau .