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

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 (

, ,
)

Etichete de titlu

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:

Etichete de design pentru textul corpului

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

Tipare aldine

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

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

Superscript și indice

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

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

X1=32 m2

Reducerea personalului

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.

Sublinia

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.

Striat

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

Cursive

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

Introducerea textului pe computer

Se întâmplă că trebuie să adăugați codul sursă al unui program și rezultatele muncii sale pe o pagină web. Pentru a facilita distingerea vizuală a diferitelor părți ale textului una de cealaltă, dezvoltatorii HTML au introdus etichete ale acestui grup.

Containerul conține codul programului, în timp ce variabilele acestuia sunt evidențiate cu eticheta, iar rezultatul execuției este . Containerul conține text pe care utilizatorul trebuie să îl introducă de la tastatură atunci când lucrează cu programul și tot ceea ce este inclus în etichete este salvat format original, inclusiv spatii suplimentareși întreruperi de linie.

deci a, b, c, acesta este rezultatul executării programului și acesta este textul introdus de utilizator și este afișat cam așa.

Citate și definiții

Codul programului va arăta astfel, variabilele sunt desemnate după cum urmează: a, b, c, acesta este rezultatul executării programului și acesta este textul introdus de utilizator. Păstrarea formatării originale apare cam așa.

Citat în eticheta blockquote Citat în interiorul containerului de citare cu eticheta Q Abreviere.

Exemplu general

Pentru a înțelege mai bine de ce este responsabilă fiecare etichetă și cum funcționează, priviți următorul cod și rezultatul execuției sale.

Text îngroșat se poate face cu etichete puternice și b. Em și sunt responsabili pentru cursive. i.

Etichetele sub și sup sunt folosite pentru a crea subscripte (x1...xn) și superscripte (42=16). Del taie, subliniază.

Etichetele de cod, kbd, var și samp sunt rareori folosite și sunt necesare pentru afișarea listelor de programe

abbr este necesar pentru a indica abrevieri (HTML). Etichetele blockquote, cite și q sunt folosite pentru a crea citate (Cerul respira deja toamna)

Eticheta prealabilă salvează formatarea inițială text fără a elimina spații sau întreruperi de rând.

Browserul interpretează acest cod după cum urmează:

Etichete de grupare

Este necesar ca textul să nu curgă într-o singură linie continuă, ci să fie rupt în componente logice.

  • În interiorul etichetelor este un paragraf.

Primul paragraf

Al doilea paragraf

  • Etichetă
    trece la rândul următor dintr-un paragraf (nu va exista indentație înaintea rândului).
  • vă permite să desenați linie orizontală. Îl puteți folosi pentru a separa textul mai clar. Atributele lățime, dimensiune, culoare, aliniere și nuanță specifică lățimea, grosimea, culoarea, alinierea și, respectiv, niciun efect 3D al liniei.

Linie deasupra liniei. Linie de sub linie.

Î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ă această metodă, 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.

Comentarii (9):

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 afară 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 să utilizați - 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ă fac liniuțe și alte stiluri de text în această fereastră de indicație cu mouse-ul. Ceva nu funcționează puțin, asta este tot.

.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 ; border-bottom: 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 = var koordx + 20; hide = function() ( var metka = document.getElementById("metka"); metka.parentNode.removeChild(metka); ) var vsplil = new podskazka(); hint Sugestie și mai departe în text Linia roșie html poate fi setată 4 în diverse moduri. Deși în același timp anumite standarde pentru acest fenomen limba dată nu oferă programare, deci nu există restricții în acest sens. În acest articol vom folosi nu tocmai

set standard

înseamnă a crea o linie roșie. 1a metoda Merită să începeți cu cea mai comună metodă. Numai în acest caz este necesară utilizarea tabelelor în cascadă, deoarece CSS este indisolubil legat de limbaj marcare hipertext. Linia roșie html poate fi setată folosind proprietatea „text-indent”. Este suficient să indicați element necesarși distanța care va fi utilizată pentru a indenta partea stângă a documentului. De exemplu, scrierea: „p (text-indent: 20px;)” înseamnă că se va face o linie roșie de 20 pixeli în fiecare paragraf p. Puteți utiliza orice bloc de text ca element pentru care specificați valoarea. De fapt această proprietate nu stabilește o linie roșie, ci pur și simplu indică indentația pentru prima linie a elementului selectat. Dar cine va observa diferența? Proprietatea „text-indent” poate dura trei

se ia în considerare distanța față de elementul părinte.

Moşteni. Când se specifică această valoare, proprietatea va fi moștenită de la elementul părinte. a 2-a metodaÎn html linia roșie poate fi setată fără conectare mese în cascadă pagini cu mai multe spații. Trebuie doar să folosești caractere speciale, și anume „ ”, pentru că dacă pui spațiu obișnuit, atunci doar unul va fi luat în considerare. Și folosind a acestui simbol puteți seta indentarea necesară. Atat de rosu șir HTML nu va avea aplicație globală și va trebui să puneți toate spațiile manual. Acest minus vă va împovăra foarte mult atunci când lucrați cu un număr mare documente. Această metodă va declara, de asemenea, codul paginii dvs. invalid.

a 3-a metoda

Concluzie

Ca o concluzie, putem spune că html împreună cu CSS vă permite să creați o mare varietate de efecte. Uneori, proprietățile și elementele nu sunt utilizate în scopul propus, dar nu ar trebui să vă abateți prea mult de la valoare standard etichete

Mânca moduri diferite setări HTML indentare înainte de text. Dar pentru compatibilitate cu browsere diferiteși accesibilitate, vom discuta despre cele mai populare metode:

Pentru a indenta înainte de text sau paragraf, este mai bine să utilizați CSS. Mai jos sunt exemple de compensare a etichetelor folosind foile de stil în cascadă. Lipiți fiecare dintre următoarele exemple de cod între Etichete HTML.

Următorul cod creează o „filă” de clasă CSS care mută caracterele și paragraful cu 40 de pixeli de la marginea din stânga:

Lipind codul de mai sus în secțiune, îl puteți rula oriunde adăugându-l la etichetele de paragraf (

) după cum se arată mai jos:

Fila Eșantion

Dacă intenționați să aplicați acest stil pe mai multe pagini, este mai bine să creați un fișier .css și să îl legați la toate paginile web. Pentru a indenta HTML, adăugați rândul următorîntre etichete și creați un link către fișier. L-am numit „basic.css”:

Odată ce fișierul CSS este creat, deschideți-l pentru editare și adăugați același cod, cu excepția etichetei și a marcajelor de comentariu, așa cum se arată mai jos:

Tab ( marja-stânga: 40px; )

Odată finalizați acești pași, puteți tabula orice text folosindu-l

Arată mai sus.

Există și alte opțiuni. De exemplu, dacă trebuie să mutați doar primul rând al unui paragraf, atunci utilizați codul de mai jos:

Tab ( text-indent: 40px )

Sfat: Puteți seta valoarea indentării ca procent. De exemplu, în loc să deplasați cu 40 de pixeli, puteți muta liniile cu 5% față de poziția curentă. Poate fi folosit și spatiu lung la determinarea lăţimii necesare.

Sfat bonus despre cum să indentați HTML: pentru a schimba indentarea din stânga cu indentarea din dreapta, modificați proprietatea margin-left la margin-right .

Puteți obține aceleași rezultate folosind stilul încorporat în codul HTML. Deşi aplicarea CSS facilitează gestionarea mai multor pagini web dacă utilizați stilul o singură dată:

Acesta este text indentat.

Aici întregul text al paragrafului este deplasat cu 40 de pixeli la stânga. Alte etichete

Nu deplasat.

Acesta este text indentat.

Și aici doar prima linie din paragraf este deplasată cu 40 de pixeli la stânga. Nici unul linii suplimentare nu va fi deplasat.

Sfat: Puteți seta indentarea folosind procente. De exemplu, în loc de compensare cu 40 de pixeli, puteți modifica valoarea la 5% pentru a muta textul cu 5%.

Sfat bonus: puteți schimba marginea din stânga la marginea din dreapta schimbând proprietatea margine-stânga în margine-dreapta.

Metodă alternativă

Alte utilizate în mod obișnuit Metoda HTML indentați textul folosind , așa cum se arată mai jos.

Deși acest lucru este mult mai ușor, există probleme de compatibilitate care pot apărea din cauza acestei soluții. Această etichetă destinat citarii, nu compensarii:

Această linie va fi deplasată.

Traducerea articolului „Cum indentează sau indentează text pe pagina mea web sau în HTML? ” a fost pregătit de echipa prietenoasă de proiect.

Bine Rău

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

Bună ziua, dragi cititori. Astăzi o scurtă notă despre cum să faci o linie roșie pentru fiecare paragraf dintr-o pagină 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 pe rând la începutul fiecărui paragraf. caractere speciale, dar poate dura destul de mult număr mare timp. Prin urmare, recomand să utilizați proprietate CSS text-indent , care specifică indentarea primei linii a unui 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 pozitia de pornire valori procentuale, indentarea primei linii este calculată în funcție de lățimea blocului de text.

Dacă trebuie să adăugați o linie roșie doar la un 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ș, lat de două circumferințe, 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 adăugați la paragrafe care ar trebui să înceapă cu o linie roșie atribut de clasă si adauga stilul dorit:


p.indent(
text-indent: 25px;
}

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 puteți face cu ușurință o linie roșie pe dvs pagini html. Ne vedem din nou!

  • Serghei Savenkov

    un fel de recenzie „scurtă”... de parcă ne-am grăbi pe undeva