Indentați primul rând al unui paragraf în html. Cum să faci o linie roșie în html sau să indentezi prima linie dintr-un paragraf

Bună ziua, dragi cititori. Astăzi o scurtă notă despre cum se face linie roșie pentru fiecare paragraf de pe pagina html. Dacă cineva nu știe, linia roșie este indentarea primei rânduri dintr-un bloc de text. O astfel de indentare în paragrafe poate fi găsită în aproape orice text tipărit, dar atunci când se creează site-uri web, designul unei linii roșii este destul de rar, în ciuda faptului că face textul mult mai convenabil de perceput. În cazul în care un client cere brusc ca paragrafele de pe site-ul său să înceapă cu o linie roșie, atunci vă dau o rețetă simplă pentru a rezolva această problemă.

Puteți rezolva problema în mai multe moduri, de exemplu, puteți introduce mai multe caractere speciale la rând la începutul fiecărui paragraf, dar acest lucru poate dura destul de mult timp. Prin urmare, recomand să utilizați proprietatea CSS pentru a crea o linie roșie text-indentare, care stabilește prima linie liniuță bloc de text. În acest caz, nu se face niciun efect asupra liniilor rămase.

Proprietatea text-indent are o sintaxă simplă:

text-indent:<значение> | <проценты>| moşteni

Puteți specifica pixeli (px), puncte (pt) și alte unități acceptate în CSS ca valori. Valoarea determină cât de mult să deplaseze textul primei rânduri la dreapta din poziția inițială. Este acceptabil să specificați valori negative, apoi textul se va muta la stânga. La specificarea valorilor procentuale, indentarea primului rând este calculată în funcție de lățimea blocului de text.

Dacă trebuie să adăugați o linie roșie la un singur paragraf, puteți face acest lucru:

Rezultat:

Pe marginea drumului era un stejar. Probabil că era de zece ori mai în vârstă decât mesteacănii care alcătuiau pădurea, de zece ori mai gros și de două ori mai înalt decât fiecare mesteacăn. Era un stejar uriaș, de două ori mai mare, cu ramuri rupte și coaja acoperită de răni vechi. Cu brațele și degetele uriașe, stângace, înfășurate asimetric, noduroase, stătea ca un ciudat bătrân, supărat și disprețuitor între mesteacănii zâmbitori. Numai că el singur nu a vrut să se supună farmecului primăverii și nu a vrut să vadă nici primăvara, nici soarele.

Sau, la paragrafele care ar trebui să înceapă cu o linie roșie, adăugați atributul class și adăugați stilul dorit:

Prințul Andrei s-a uitat înapoi la acest stejar de mai multe ori în timp ce conducea prin pădure. Sub stejar se aflau flori și iarbă, dar tot stătea în mijlocul lor, posomorât, nemișcat, urât și încăpățânat.

Rezultat:

Prințul Andrei s-a uitat înapoi la acest stejar de mai multe ori în timp ce conducea prin pădure. Sub stejar se aflau flori și iarbă, dar tot stătea în mijlocul lor, posomorât, nemișcat, urât și încăpățânat.

Acum poți ușor faceți o linie roșie pe paginile dvs. html. Ne mai vedem!

Buna ziua! Să continuăm să ne uităm la elementele de bază ale programării site-urilor web. Este greu de imaginat cel puțin unul dintre ele care nu conține o etichetă de paragraf în codul său. Astăzi vom vedea cum să-l scriem corect și o descriere a mai multor acțiuni suplimentare cu text.

Exemplu

Să ne uităm la un exemplu despre cum să faci un paragraf în cod HTML.

Una sau mai multe propoziții.

O condiție prealabilă este prezența unei etichete de deschidere și de închidere. Apropo, puteți face totul direct în Notepad, trebuie doar să salvați fișierul în formatul corespunzător mai târziu.

Formatare

Destul de des observ că oamenii sunt interesați de cum să facă o linie roșie. Pentru un anumit paragraf se face foarte simplu.

Activarea acestor opțiuni va indenta prima linie la 15 pixeli de la marginea din stânga. Dacă astfel de modificări ar trebui aplicate tuturor etichetelor P, atunci în fișierul CSS care este conectat la paginile site-ului, puteți scrie codul prezentat mai jos.

Personal, de obicei nu fac linii roșii atunci când editez codul în Notepad sau alt editor.

Pur și simplu includ umplutură între blocurile de text. Pentru a face acest lucru, trebuie să specificați parametri speciali în CSS.

p(marja-jos:25px;)

Dacă utilizați acest design, atunci după fiecare paragraf va exista o indentare de 25 de pixeli.

De fapt, există o mulțime de opțiuni pentru a lucra cu HTML și diferite stiluri. Am descris doar câteva dintre ele; este foarte dificil să acopere totul într-un singur articol.

Vrei să afli mai multe? Puteți găsi utile publicațiile mele anterioare despre următoarele subiecte:

Aici voi încheia articolul și, cred, acum nu va fi dificil să faci paragrafe în HTML și să le format frumos folosind etichete speciale.

Vă doresc mult succes în stăpânirea programării. Apropo, te-ai gândit să faci bani pe site-uri de informare non-profit? El a oferit informații pur și simplu uimitoare special pentru cititorii săi.

Munca normală online și finanțele sunt subiectele cheie ale acestui blog. Puteți face cunoștință cu clienții potențiali online chiar acum din materialele publicate. Continui să pregătesc și să public conținut nou și, cel mai important, cu adevărat util. Abonați-vă la actualizările Workip pe adresa dvs. de e-mail. Ne vedem mai târziu.

04/11/16 10.5K

Formatarea unui paragraf HTML folosind stiluri

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

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 în fișierul dvs. .html.

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.

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

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

Indentație între paragrafe (indentație înainte și indentare după paragraf)

Î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 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ă î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ă.

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 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 moduri diferite - inline (în etichete), intern ( în interiorul aceluiași fișier HTML folosind elementul