O resursă web este evaluată de utilizatori în funcție de atractivitatea sa externă. Prin urmare, chiar și informații text util este posibil să nu fie citit din cauza faptului că este prost formatat. Concluzie - trebuie să abordați cu atenție și atenție nu numai conținutul semantic al paginilor site-ului, ci și reprezentare vizuala. Aspect Tehnologii CSS a extins posibilitățile de a crea articole atractive. Una dintre proprietățile concepute pentru a face scrisul mai ușor de citit este indentarea. text css.
Margini și umplutură: care este diferența?
Înainte de a începe formatarea textului, ar trebui să înțelegeți ce sunt marginile și indentările. În ciuda faptului că aceste elemente de marcare în unele cazuri arată la fel pentru utilizator, există diferențe fundamentale între ele:
- câmpul este stabilit de proprietate căptușeală, liniuță - marginea;
- marja este determinată de decalajul dintre conținut și marginea blocului, indentarea - dintre marginile blocurilor învecinate;
- Marjele pot fi luate în considerare fie în dimensiunea elementului (lățime și înălțime), fie nu.
proprietatea marjei
Deci, pentru a seta indentarea orizontală sau verticală a textului CSS, utilizați construcția marginea. Această proprietate se aplică etichetei definirea paragrafului documentului. În chiar caz simplu este scris ca:
marjă: 12px
Această linie înseamnă că un bloc de text (sau orice alt bloc) va fi indentat pe toate părțile cu 12 pixeli. Pentru a mări intervalul, de exemplu, de trei ori, este suficient să scrieți:
marja: 36px
Dar ce se întâmplă dacă distanța dintre blocuri trebuie să fie diferită pe fiecare parte? Dezvoltatorii de pagini web folosesc mai multe forme de notație:
- marjă: 11px 22px.
- marjă: 11px 22px 33px.
- marjă: 11px 22px 33px 44px.
În primul exemplu, 11 pixeli vor fi indentați de la marginile inferioare și superioare ale blocului, iar 22 de pixeli vor fi indentați de pe părțile laterale ale blocului. Conform celei de-a doua forme de scriere, vor exista 11 pixeli între marginea superioară a blocului și conținut, 33 pixeli între partea de jos și 22 pixeli pe laterale. În al treilea caz, umplutura va fi de 11 pixeli de sus, 22 de pixeli din dreapta, 33 de pixeli de jos și 44 de pixeli din stânga.
De asemenea, este posibil să înregistrați distanța până la limita blocului doar pe o singură parte: margine-sus, margine-jos, margine-stânga, margine-dreapta. După ce a tradus numele proprietăților în rusă, este ușor să le ghicim scopul. De exemplu, următoarea intrare spune că umplutura din dreapta va fi de 22 de pixeli:
margine-dreapta: 22px
Pentru celelalte părți, distanțele din jurul blocului sunt luate egale cu valoarea elementului părinte.
Proprietate marginea are o caracteristică de care dezvoltatorul ar trebui să o țină cont atunci când folosește indentarea verticală CSS. Intervale elemente învecinate nu cumulative, ci suprapuse una peste alta. De exemplu, lăsați unul dintre blocuri să aibă margine-jos: 15px, iar blocul adiacent acestuia de jos margine-sus: 35px. Aritmetica școlară și bunul simț dictează că umplutura totală dintre ele va fi de 50 de pixeli. În practică, acesta nu este cazul. Blocați cu de mare valoare proprietăți marginea„absorbi” vecinul său. Ca urmare, distanța dintre elemente va fi de 35 de pixeli.
"Linie rosie
Realizarea unui document în editor de text, utilizatorii preferă să seteze fiecare alineat nou folosind linia roșie. DIN folosind CSS indentarea textului din stânga este ușor de făcut - construcția este folosită indentarea textului. Este scris astfel:
indentare text: 11px.
Adică, prima linie a paragrafului va fi deplasată de la marginea din stânga relativă cu 11 pixeli. Pentru ca textul de pe pagina web să arate mai mult ca un document în editor, ar trebui să setați suplimentar, adică să scrieți:
text-indent: 11px;
text-align: justifica.
Pe lângă pixeli, atunci când descrieți marcajul, este permisă utilizarea altor unități - inci, puncte, procente. Lăsați blocul să aibă o indentare de text CSS de 10%. Cu o lățime a blocului de 500 de pixeli, linia roșie va fi de 50 de pixeli (10% din 500).
Pentru proprietatea dată valoarea poate fi setată moşteni. O astfel de înregistrare spune că blocul folosește o proprietate similară a blocului părinte.
text-indent: moștenire.
În mod surprinzător, poate dura valori negative! În acest caz, se formează așa-numitele margini, adică textul principal rămâne pe loc, iar prima linie este deplasată la stânga cu 22 de pixeli:
text-indent: -22px.
Pentru ca literele să nu se încrucișeze marginea stângă browser, pe lângă indentarea textului trebuie să utilizați construcția pentru a seta câmpul:
umplutură-stânga: 22px
Principal proprietăți css pentru luat în considerare. Și practica va ajuta la remedierea lor. Iată câteva sfaturi finale despre cum să aplicați ceea ce ați învățat la dezvoltarea site-ului dvs.:
- linia roșie și indentarea textului sunt concepte diferite și sunt folosite diferite proprietăți pentru a le specifica;
- pentru indentări verticale regulile matematicii nu funcționează - intervalele sunt suprapuse, elementul cu o valoare mare „câștigă”;
- negativ liniuța paragrafului este folosit pentru a indica primul rând al unui paragraf folosind o imagine.
Marginile și umplutura sunt stiluri foarte importante atunci când construiți o pagină HTML. Acestea vă permit să poziționați mai precis elementele, să creați un cadru cu degajările necesare etc. Ambele stiluri sunt foarte asemănătoare și îndeplinesc funcții similare. Dar există încă diferențe.
Elementele pot fi imbricate, pot fi adiacente unele cu altele. Să ne uităm la următorul exemplu:
Avem două mese, lămâie și culoarea albastra situate una sub alta. Tabelele constau dintr-o celulă. Există un bloc roșu în celula primului tabel. În acest exemplu, să vedem cum funcționează marginile și umplutura.
Câmpurile sunt stabilite după stil căptușeală. Acest stil se aplică numai elementelor container care pot conține alte elemente. Stil vă permite să setați valoarea marginilor dintre marginile elementului și conținutul acestuia. Stil marginea vă permite să setați umplutura de la un element la cele mai apropiate margini ale altui element. Marginile altui element pot fi marginile containerului părinte, precum și marginile paginii în sine.
Există mai multe moduri de a seta aceste stiluri. De exemplu, specificați direct dimensiunea tuturor marginilor sau indentărilor cu un argument într-o unitate de măsură (px, ex, em, pt, cm și așa mai departe):
umplutură: 3px marjă: 3pxÎn acest caz, marginile și umplutura vor fi aceleași pe toate cele patru laturi. Când specificați două argumente separate printr-un spațiu:
umplutură: 3px 5px; marginea: 3px 5px;primul va determina cantitatea de margini/padding în partea de sus și de jos, al doilea - în stânga și în dreapta. Când se oferă trei argumente:
umplutură : 3px 5px 2px ; marginea : 3px 5px 2px ;prima este marginea de sus/indentație, a doua este stânga și dreapta în același timp, a treia este de jos. Cu patru argumente:
umplutură : 3px 5px 2px 6px ; marginea : 3px 5px 2px 6px ;prima este marginea de sus/padding, a doua este dreapta, a treia este partea de jos, a patra este stânga. Este ușor de reținut: primul este deasupra, apoi în sensul acelor de ceasornic. În plus, puteți seta separat marginile și umplutura pentru o anumită margine, folosind stilurile adecvate: captuseala de sus, umplutura dreapta, umplutură de fund, padding-stânga, margine-top, margine-dreapta, margine-fond, margine-stânga. Valoarea acestor stiluri poate fi doar un argument, care specifică cantitatea de marjă/padding pentru o anumită parte.
În figură, blocul roșu este situat în interiorul celulei tabelului și se învecinează cu marginile acesteia, adică celula nu are margini. Să setăm marginile celulei folosind stilul:
umplutură: 5pxCa urmare, pagina se va schimba în următoarele:
Acum să ne uităm la compensații. Două mese sunt adiacente una de alta, dacă vrem să le depărtăm puțin, putem aplica indentări. Există două opțiuni aici: fie setați liniuța de jos a primului tabel, fie liniuța de sus a celui de-al doilea tabel. Să-l folosim pe al doilea:
margine-top: 5px;Rețineți că setăm indentarea pentru tabel, și nu pentru celula tabelului, așa cum este cazul câmpurilor. Iată rezultatul:
Apropo, în primul caz (decalajul dintre blocul roșu și marginile celulei părinte), același efect ar putea fi obținut prin setarea indentărilor blocului. În general, dacă ceva nu este clar, dezabonează-te în comentarii.
Codul HTML al paginii experimentale:
<html> <cap> <titlu > Test</titlu> <meta http-equiv = „Content-Type” content = „text/html;charset=utf-8” > </cap> <corp> <stil> tabel (lățime: 200px; înălțime: 150px; chenar: 1px solid #555; border-collapse: collapse) td (aliniere verticală: sus; padding: 0px) div (lățime: 100px; înălțime: 100px; fundal: roșu)</stil> <stil de masă="background:lime"> <tr > <tdstyle="padding:5px"> <div style="margin:0px"></div> </td> </tr> </table> <stil de masă = „fond: albastru cer; margine-sus: 5px”> <tr > <td ></td> </tr> </table> </corp> </html>indentare HTML text- în procesul de creare a unui site, trebuie să lucrăm mult cu blocuri de text, sau fraze de text. Odată, a trebuit să adaug o frază de text, astfel încât înainte de această frază de text să existe ceva indentarea textului din margini html
blocul în care a fost adăugat textul dat.
Asa de, indentare text html, prima metoda este cea mai naturala si simpla. Pentru a indenta text, adăugați înainte text html cod de spațiu - Adăugați cod html spațiile sunt posibile în orice editor html.
Dau un exemplu de cod de lucru pentru setarea unei indentări pentru text folosind un cod de spațiu:
<html> <cap> <titlu >Indentarea textului HTMLtitlu > cap> <corp> <p > HTML indentarea textului din stânga, utilizați codul de spațiup > corp> html>
ÎN acest exemplu, înainte de textul pe care l-am ales, codul de spațiu -
adăugat de patru ori, ca urmare, obținem indentarea de care avem nevoie.Știm că codul de spațiu este procesat de orice browser. Prin urmare, adăugând numărul necesar de spații înainte de text, puteți obține indentarea necesară pentru text.
Această metodă este bună prin faptul că va fi garantată că va fi rezolvată de orice browser.
Dar aceasta metoda mânca dezavantaj semnificativ. Pentru a face o indentație pentru textul suficient de mare în lungime, în codul html, va trebui să adăugați înaintea textului un numar mare de caractere spațiale, care pot arăta urâte, greoaie și neprofesioniste.
Una dintre soluțiile la această problemă este calea următoare locuri de muncă indentare.
Metoda a doua de indentare a textului HTML - această metodă se bazează pe proprietățile etichetei blockquote. Această etichetă stabilește o indentare de aproximativ 40 de pixeli la stânga și la dreapta pentru textul plasat în ea. În plus, indentarea este setată în partea de sus și de jos. exemplu html Codul pentru utilizarea acestei metode este prezentat mai jos:
<p ><blockquote > Indentarea textului HTML din stânga, folosiți eticheta blockquoteblockquote >p >
După cum puteți vedea, această metodă de setare a unei indentări pentru text este foarte ușor de utilizat, dar această metodă are și un dezavantaj semnificativ. Indentație care stabilește eticheta citat bloc, este fix și este întotdeauna egal cu aceeași valoare - 40px.
Pentru a corecta situația, și atunci când adăugați indentare html si pentru text pentru a putea seta orice valoare, vom folosi a treia metoda.
Indentarea textului HTML, metoda trei.
Aici vom folosi proprietatea parametrului text-indent din CSS Cascading Style Sheets.
Dacă este deschis referință css, pe pagina de proprietăți text-indent, vom vedea că cu text-indent, putem seta indentarea primului rând sau a primului paragraf al unui bloc de text.
Ne uităm la un exemplu cu un bloc de text scurt, astfel încât proprietățile text-indent sunt destul de potrivite pentru cazul nostru.
Mai jos este codul html care indentează text folosind text-indent. Exemplul arată că prin setarea text-indent sensuri diferite argumente, putem schimba cantitatea de indentare a textului:
<pstyle="text-indent:100px"> HTMLindentaretext, de lucru stilul css - indentarea textuluip >
După părerea mea, acest mod de a seta o indentare pentru text este cel mai optim, dar, totuși, să luăm în considerare o altă modalitate de a seta o indentare folosind imagini.
Indentarea textului HTML, a patra cale - aici vom folosi o imagine pentru a seta indentarea.
Ca exemplu de lucru, să luăm imediat în considerare codul html care demonstrează funcționarea acestei metode:
Indentarea textului HTML
din stânga, folosiți imaginea
Din exemplul de mai sus, se vede clar că prin modificarea lățimii imaginii, putem schimba poziția textului, adică setăm indentarea dorită pentru text.
Ca imagine, puteți utiliza o imagine a cărei lățime și înălțime sunt egale cu un pixel. Pentru ca imaginea pe care o folosim să nu fie vizibilă pe pagină, îi vom seta culoarea exact la fel ca fundalul paginii site-ului.
După părerea mea, metodele de mai sus de setare a indentărilor pentru text sunt destul de suficiente pentru a organiza indentarea de care aveți nevoie în orice situație când adăugați conținut pe o pagină de pe site-urile dvs.
Vă urez bun venit pe blogul meu. CSS (Cascading Style Sheets) oferă o mulțime de opțiuni de personalizare aspect pagini web. Astăzi aș dori să arăt pe scurt cum să determin în indentare css deasupra sau pe orice altă parte pentru orice element.
Captuseala exterioara
Marja este setată folosind proprietatea margine. Cu acesta, puteți seta umplutura pe toate cele patru laturi simultan sau puteți utiliza alte proprietăți: margin-sus , margin-left , margin-right , margin-bottom , care vă permit să o faceți doar pe o singură parte.
Marja determină distanța la care marginea selectată a unui element va fi indentată față de alte elemente de pe pagină. De exemplu, intrarea:
P, div( Marja-top: 20px; )
Aceasta înseamnă că toate blocurile și paragrafele vor fi indentate de sus cu 20 de pixeli, adică marginea lor superioară va fi îndepărtată de elementele adiacente cu această distanță.
Marginile pot fi scrise pe fiecare parte cu o singură proprietate de marjă, care este scrisă 4 valori la rând:
Div( Marja: 20px 10px 20px 10px; )
Indentațiile vor fi date de la marginile de sus, din dreapta, de jos și respectiv din stânga. Deoarece în acest caz sunt egale pe laturi opuse, ar putea fi scrisă și astfel:
Div( Marja: 20px 10px; )
Prima valoare este umplutura din partea de sus și de jos, iar a doua este marginea laterală.
indentare
Căptușeala funcționează diferit - nu împinge cutia departe de alte elemente, ci adaugă acel spațiu în interiorul elementului, împingând conținutul cutiei departe de marginile sale. Este confortabil. Unde ați văzut un site unde textul începe în partea din stânga sus a ferestrei?
Nu am văzut asta deoarece dezvoltatorii web folosesc întotdeauna indentări și indentări pentru a face textul cât mai lizibil posibil. Indentări sunt scrise folosind proprietatea padding, în care pot fi enumerate 4 valori pentru toate marginile odată, separate de un spațiu, respectiv.
De asemenea, în mod similar cu marginea, puteți adăuga numele părții și puteți seta distanța doar pentru aceasta. De exemplu, top padding poate fi scris folosind padding-top . În general, proprietatea de umplutură funcționează exact la fel ca proprietatea marjei.
Un exemplu este următorul cod:
Bloc (Latime: 200px; Umplutura: 20px; )
Care credeți că va fi lățimea reală a elementului nostru? Aici puteți vedea că este de 200 de pixeli, dar căptușeala adaugă încă 20 de pixeli pe fiecare parte, pentru un total de 240 de pixeli. Luați în considerare acest lucru la redactare.
Aș dori, de asemenea, să remarc că umplutura este setată în mod normal numai elemente de bloc, litere mici este mai bine să nu-l dați. Marja funcționează bine cu orice element.
O zi buna! Setarea indentărilor pentru text și imagini este subiectul principal al publicației de astăzi. Să luăm în considerare mai detaliat ce abordări pot fi aplicate în practică.
Atunci când creează un site, un webmaster se ocupă cu blocurile de text și frazele plasate pe paginile proiectului. Rezolvarea problemelor individuale este asociată cu utilizarea Etichete HTML adăugat la editor. Există mai multe tipuri de atribute care vă permit să mutați fraze sau să schimbați locația fragmentelor în e-pagina.
Setarea indentărilor prin inserarea de spații
Să vedem cum să indentați textul în HTML folosind etichetă specială, care asigură formarea unui gol. Este necesar să introduceți codul de numărul necesar de ori pentru a obține abaterea dorită de la marginea paginii.
Codul de mai sus este procesat de toate tipurile de browsere, iar webmasterul va primi rezultat garantat. Dezavantajul metodei constă în posibilitățile limitate, deoarece pentru a crește distanța, trebuie să adăugați cantitate mare etichete, iar acest lucru aglomera documentul.
Aplicarea etichetei de citare
Studiind în detaliu cum să indentați textul în codul HTML, vă puteți împiedica metoda alternativa dând mai multe posibilitati.
Aici va trebui să utilizați blockquote, care vă permite să mutați fragmentul la stânga și la dreapta cu aproximativ 40 px. Este suficient să scrieți codul identic cu exemplul dat:
Metoda vă permite să manipulați fraze cu o valoare fixă de 40 px. De asemenea, este de remarcat faptul că în eticheta dată de obicei se încheie cu un citat.
Alternative
Dacă intenționați să vă deplasați la o distanță non-standard, va trebui să utilizați parametrul text-indent legat de stil Tabel CSS. Metoda luată în considerare asigură crearea unei abateri a primei linii pe distanta dorita. Următoarele modificări trebuie făcute editorului:
Când este necesar să se măsoare numărul necesar de pixeli dintr-o imagine, se preferă codurile simple, dar eficiente.
În primul caz, sunt setate doar valorile offset-ului față de marginile imaginii. Al doilea setează poziția imaginii de-a lungul marginii din stânga cu textul înfășurat în jurul dreptei, iar al treilea - invers.
Informația a ajuns la sfârșit. Spune-mi, ai găsit informațiile care te interesează? Răspunsul poate fi scris în comentarii.
În cele din urmă, voi menționa că blogul Workip este dedicat în principal opțiunilor monetare pentru a face bani online. Știți ce metode sunt cu adevărat promițătoare din punct de vedere financiar? Unele dintre ele au fost deja publicate.
Publicarea materialelor continuă. Aboneaza-te la e-mail pentru actualizări de proiect. Până la comunicare.
