Î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 paragrafelorPuteț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.
În fereastră browser HTML Codul paragrafului arată astfel.
Spațiere între liniiPuteț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 Style
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:
: 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.
IndentăriAm 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 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.
Nu avem nevoie de asta în HTML sau CSS. Putem indica pur și simplu stil de căptușeală 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:
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ă î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ă.
- Un paragraf HTML poate fi aliniat folosind atributul de aliniere sau stil de aliniere a textului;
- 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 ș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 în diverse moduri— î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 utilizarea fișier extern 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 liniilor (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
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 câtorva acțiuni suplimentare cu text.
ExempluSă ne uităm la un exemplu despre cum să faci un paragraf în cod HTML.
Una sau mai multe propoziții.
Condiție obligatorie 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.
FormatareDestul 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 fișier CSS, care se conectează 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.
Am inclus doar căptușeală între blocuri 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 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 voi face paragrafe în HTML și le voi formata frumos folosind etichete speciale nu va fi greu.
iti doresc succes imensî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.
Funcționare normalăși finanțele online 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 lucruri noi și, cel mai important, este real continut util. Abonați-vă la actualizările Workip pe dvs e-mail. Ne vedem mai târziu.
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 proprietatea text-indent CSS pentru a crea o linie roșie, care stabilește indentarea primei linii a unui bloc de text. În acest caz, nu se produce 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 . Este acceptabil să se indice, 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:
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!
În timp ce citiți orice carte, ziar, revistă sau orice text normal în general, ați întâlnit multe paragrafe, iar primul rând al fiecăruia conține o mică indentație. Î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 î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, puteți lăsa comentariul dvs. î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 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 - plasați acest bloc în locuri diferite și vedeți ce se schimbă. 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ă, 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 = text; hide = function() ( var metka = document.getElementById("metka"); metka.parentNode.removeChild(metka); ) var vsplil = new podskazka();
hint Sugestie și mai departe în text
1. Etichete de antet (h1-h6).
2. Etichete de design pentru textul corpului ( , , , etc.).
3. Etichete de grupare (
,
,
)
Convertit text simpluîntr-o rubrică 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 corpuluiPermite formatarea la nivel de caractere. Să vedem ce poți face cu ele.
Tipare aldineEste necesar să se concentreze atenția asupra textului. De asemenea, este important pentru motoarele de căutare, acestea pot evidenția cuvintele cheie.
Răspunzător de stil îndrăzneț etichete și .
Superscript și indiceEle pot fi utilizate în formule, ecuații și desemnarea anumitor cantități.
Pentru creație indicele Eticheta răspunde, pentru cele de sus se folosește eticheta.
X1=32 m2
Reducerea personaluluiDacă 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.
SubliniaAcest 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.
StriatPuteți tăia informațiile dacă și-au pierdut deja relevanța. Eticheta este destinată acestui lucru.
CursiveEste necesar să se concentreze atenția asupra textului și poate fi creat cu o etichetă sau .
Introducerea textului pe computerSe întâmplă că trebuie să adăugați la o pagină web cod sursă programul și rezultatele acestuia. 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 spații suplimentare și întreruperi de rând.
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țiiCodul 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 generalPentru 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 etichetat puternicș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). etichete blockquote, cite și q sunt folosite pentru a crea citate (Cerul respira deja toamna)
Eticheta pre păstrează formatarea originală a textului fără a elimina spații sau întreruperi de rând.Browserul interpretează acest cod după cum urmează:
Este necesar ca textul să nu ruleze într-o singură linie continuă, ci să fie împărțit în componente logice.
- În interiorul etichetelor este un paragraf.
Primul paragraf
Al doilea paragraf
- Etichetă
face trecerea la rândul următorîn interiorul unui 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. atribute de lățime, size , color , align și noshade specifică lățimea, grosimea, culoarea, alinierea și, respectiv, niciun efect 3D al liniei.
Linie deasupra liniei. Linie de sub linie.
