Buna ziua! Inițial am vrut să împart acest articol în 4 mici, dar apoi m-am gândit la el. Pentru ce? La urma urmei, este mai convenabil atunci când astfel de informații sunt colectate într-un singur material.
Așa că astăzi vom învăța cum să facem indentare CSS în stânga și în toate celelalte părți - dreapta, sus și jos. Ele pot fi realizate pentru imagini și texte. Ele vin în două tipuri:
- Extern;
- Intern.
Pentru prima, proprietatea cheie este marginea, pentru cea din urmă – padding. Pentru claritate, ți-am făcut un mic exemplu. Pentru a face o distincție vizuală convenabilă între spațiul interior și cel exterior, am adăugat o masă vizibilă. Să vedem ce s-a întâmplat?
Marjele
Scriindu-le într-un fișier de stil CSS, puteți seta orientarea blocului de informații pe pagină. De exemplu, îl voi muta la stânga și în jos. Permiteți-mi să vă demonstrez imediat cum va arăta.
În general, puteți utiliza următoarele opțiuni pentru a seta indentări.
Stânga (marja-stânga).
Pe dreapta (marja-dreapta).
De sus (margine-sus).
De jos (marja-de jos).
Acum vă voi arăta o altă nuanță grozavă.
După cum puteți vedea, puteți utiliza una dintre opțiuni - efectul este același. Numai în al doilea caz codul se dovedește a fi mai compact. De asemenea, rețineți că indentările sunt setate în sensul acelor de ceasornic. Totul începe de sus și se termină în stânga.
Captuseala
Procedura este similară aici. Abia acum voi adăuga noi proprietăți nu pentru întregul tabel, ci pentru conținutul coloanelor.
Să vedem ce a ieșit din asta.
Prin analogie cu marginile interne în CSS, cele externe pot fi scrise în cod prescurtat sau pentru laturi separat.
Acestea au fost punctele principale. În cele din urmă, vă voi arăta cum altfel puteți face ceva mai ușor.
Indentare la nivelul etichetei selectate
În cazurile văzute mai sus, acestea sunt setate pentru text și imagini în același timp. De fapt, puteți seta distanța față de elemente la nivelul unei anumite etichete. Îți voi arăta cum funcționează. Anulez ultimele modificări și specific codul special în fișierul de stil.
Să aruncăm o privire la ce s-a întâmplat după salvarea modificărilor.
Poza a rămas pe loc, doar textul inclus în .s-a mutat la stânga. Manipulari similare pot fi aplicate altor blocuri, de exemplu, tr, span.
Ca informații suplimentare, vă ofer o publicație despre sarcină pentru referință. Acolo sunt descrise și metode destul de interesante. Poate fi util pentru formarea unei linii roșii în text sau pentru efectuarea altor acțiuni.
În plus, vă puteți abona la un buletin informativ gratuit prin e-mail. Există un formular special pentru abonarea la blog. Ne vedem mai târziu.
Marginile și umplutura sunt stiluri foarte importante atunci când construiți o pagină HTML. Ele vă permit să poziționați mai precis elementele, să creați un cadru cu golurile necesare etc. Ambele stiluri sunt foarte asemănătoare și îndeplinesc funcții similare. Dar există încă diferențe.
Elementele pot fi imbricate sau amplasate unul lângă celălalt. Să ne uităm la următorul exemplu:
Avem două mese, lămâie și albastră, situate una sub cealaltă. Tabelele constau dintr-o celulă. Există un bloc roșu în prima celulă a tabelului. Folosind acest exemplu, să vedem cum funcționează marginile și indentările.
Câmpurile sunt stabilite după stil căptușeală. Acest stil se aplică doar elementelor container, care pot conține alte elemente. Stilul vă permite să setați marginea dintre marginile unui element și conținutul acestuia. Stil marginea vă permite să setați indentări 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; marginea: 3px;În acest caz, marginile și indentările vor fi aceleași pe toate cele patru laturi. Când specificați două argumente separate printr-un spațiu:
umplutură: 3px 5px; marjă: 3px 5px;primul va determina cantitatea de margini/indentări în partea de sus și de jos, al doilea - la stânga și la dreapta. Când se oferă trei argumente:
umplutură: 3px 5px 2px; margine: 3px 5px 2px;prima este marginea/indentația din partea de sus, a doua este atât stânga cât și dreapta, a treia este în partea de jos. Cu patru argumente:
umplutură: 3px 5px 2px 6px; marginea : 3px 5px 2px 6px ;primul este marginea/spațiul de sus, al doilea este în dreapta, al treilea este în jos, al patrulea este în stânga. Este ușor de reținut: primul este de sus, apoi în sensul acelor de ceasornic. În plus, puteți seta separat marginile și umplutura pentru o anumită margine, folosind stilurile adecvate: padding-top, 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 în interiorul celulei tabelului și adiacent marginilor acesteia, adică celula nu are margini. Să setăm marginile celulei folosind stilul:
umplutură: 5px;Ca urmare, pagina se va schimba în următoarele:
Să ne uităm acum la indentări. 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-sus: 5px;Vă rugăm să rețineți că am setat indentarea în mod special 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 limitele celulei părinte), același efect ar putea fi obținut prin setarea indentărilor blocului. În general, dacă ceva nu este clar, anunțați-ne î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ă = „fond: var” > <tr > <td style = "padding: 5px" > <stil div = "marja: 0px" ></div> </td> </tr> </table> <stil de masă = „fond: albastru cer; margine-sus: 5px”> <tr > <td ></td> </tr> </table> </corp> </html>Aspectul CSS a fost întotdeauna dreptunghiular. Orice linii netede sunt de competența dezvoltatorului. Regulile de stil oferă suficiente opțiuni pentru a da paginii o formă netedă în limitele rezoluției ecranului. Dar orice element de aspect este întotdeauna un dreptunghi în care aranjarea informațiilor este guvernată de regulile CSS.
Umplutura pe toate părțile este importantă pentru fiecare element de pagină atunci când este poziționat absolut, iar umplutura superioară CSS este definită în mod specific, deoarece contează pentru diferite elemente, în special pentru cele inline.
Reguli de bază de poziționare
Un element bloc are o regulă de marjă, o regulă de umplutură pentru elementele din interiorul său și o lățime a marginii care poate fi, de asemenea, utilizată.
Indentarea din partea de sus este de o importanță deosebită. CSS într-un bloc asociază regulile de umplutură cu reguli pentru elementele poziționate absolut și relativ în acel bloc.
O practică obișnuită pentru regulile CSS: puteți specifica umplutura pe toate părțile în mod egal, în perechi sus/jos și dreapta/stânga, sau pentru fiecare parte separat. De exemplu,
- marja: 10px;
- umplutură: 10px20px;
- umplutură: 10px20px30px40px.
În primul caz, indentarea elementului de pe părțile laterale ale containerului exterior în care se află este stabilită. În al doilea caz, marginile din partea de sus și de jos sunt 10px, în stânga și în dreapta - 20px. În al treilea caz, dimensiunea indentărilor este indicată pe toate părțile: sus, dreapta, jos și stânga.
În toate aceste cazuri, indentarea CSS de sus este de 10 px.
Reguli care schimbă poziția elementelor
Dacă un element de aspect nu este poziționat în mod absolut, acesta este poziționat în ordinea generală de formare a paginii.
Dacă definim umplutură pe CSS de sus în elementul scCurrInfo, obiectivul va fi atins, dar dacă la nivelul li nu va fi.
În acest exemplu, folosind regula de umplutură: 40px; necesită o reducere adecvată a regulilor de lățime și înălțime cu 80px. În caz contrar, dimensiunea blocului scCurrInfo va depăși limitele blocului exterior.
Dacă eliminăm regula de umplutură din descrierea scCurrInfo, dar o adăugăm cu o valoare de 20px la descrierea stilului articolului din listă, vom obține doar liniuță de sus. CSS nu va aplica această valoare altor părți.
Desigur, această utilizare a regulii de indentare se aplică fiecărui element li.
Practici generale de formatare a conținutului
Unii dezvoltatori ating perfecțiunea prin așezarea paginilor folosind elemente bloc. Aparent, aceasta este o practică clasică - să începi cu tabele și să închei propriul proces educațional cu blocuri.
Libertatea inerentă amenajării blocurilor este fascinantă, iar imaginația dezvoltatorului poate să nu fie limitată de reguli stricte ale tabelului: numai rânduri, doar celule, îmbinând doar orizontal și vertical. Nimic specific ideilor relaționale.
Între timp, tabelele, pe lângă dezavantajele evidente, au multe avantaje calitative. La crearea padding-ului în partea de sus, CSS ține cont de padding-ul din stânga, dreapta (jos este un moment special). Regulile pentru celulele tabelului vă permit să controlați atât alinierea verticală, cât și orizontală. Folosind stiluri de rând și combinându-le cu stiluri de celule, puteți crea vizualizări complexe ale conținutului.
Reprezentarea obișnuită a unei pagini sub formă de dreptunghiuri nu împiedică deloc să fie prezentată sub forma unui tabel. Acestea sunt și dreptunghiuri, dar sunt și celule de tabel, adică au propriile reguli care completează regulile blocurilor.
Poziționare absolută
Bloc cu regula POZIȚIA: absolută ; va fi situat într-o locație determinată de coordonatele sale relativ la blocul în care se află.
O trăsătură caracteristică a regulilor CSS este că „practica este cel mai bun criteriu al adevărului” în cele mai multe cazuri, mai ales atunci când este necesară compatibilitatea între browsere și aspectul se face manual, de preferat decât studierea manualelor cu drepturi depline pe foi de stil în cascadă.
Utilizarea tabelelor duce adesea la probleme de schimbare a conținutului celulei. Un decalaj similar în cadrul unui bloc nu afectează întotdeauna toate elementele. Experimentând, puteți obține rezultatul dorit. O sarcină banală: cum eliminarea umpluturii superioare nu este întotdeauna o soluție banală pentru CSS.
În unele cazuri, atunci când trebuie să așezați elemente de pagină în măruntaiele unui sistem popular de gestionare a conținutului site-ului web, trebuie să acordați atenție nu numai practicii experimentale, ci și să priviți experiența colegilor dvs.
– în procesul de creare a unui site web, trebuie să lucrăm mult cu blocuri de text, sau fraze de text. Într-o zi, a trebuit să adaug o frază text în așa fel încât înaintea acestei fraze text să fie ceva indentarea textului din edge html bloc în care a fost adăugat acest text.
Deci, prima metodă este cea mai naturală și cea mai simplă. Pentru a indenta textul, adăugați un cod de spațiu html înainte de text - Puteți adăuga un cod de spațiu html în orice editor html.
Iată un exemplu de cod de lucru pentru setarea indentării pentru text folosind codul de spațiu:
HTML indentarea textului din stânga, utilizați codul de spațiu
În acest exemplu, înainte de textul pe care l-am selectat, este 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ă, deoarece este garantat că va fi procesată de orice browser.
Dar această metodă are un dezavantaj semnificativ. Pentru a indenta textul suficient de lung în codul html, va trebui să adăugați un număr mare de caractere de spațiu înaintea textului, care poate să nu arate frumos, greoi și neprofesionist.
O soluție la această problemă este următoarea metodă de setare a indentării.
Indentarea textului HTML, metoda a doua - această metodă se bazează pe proprietățile etichetei blockquote. Această etichetă stabilește o indentare de aproximativ 40 de pixeli în stânga și dreapta pentru textul plasat în ea. În plus, indentarea este specificată în partea de sus și de jos. Un exemplu de cod html pentru utilizarea acestei metode este dat mai jos:
din stânga, utilizați eticheta blockquote
După cum puteți vedea, această metodă de setare a indentării pentru text este foarte ușor de utilizat, dar această metodă are și un dezavantaj semnificativ. Indentarea pe care o setează eticheta blockquote 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 text-indent a CSS Cascading Style Sheets.
Dacă deschidem cartea de referință CSS, pe pagina cu o descriere a proprietăților text-indent, vom vedea că folosind text-indent, putem seta valoarea de indentare a primului rând sau a primului paragraf, sau a oricărui bloc de text .
Luăm în considerare un exemplu cu un bloc scurt de text, așa că 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ă setând text-indent la diferite valori ale argumentului, putem schimba cantitatea de indentare a textului:
HTMLindentaretext, stilul CSS funcționează - text-indentare
După părerea mea, această metodă de setare a unei indentări pentru text este cea mai optimă, dar, totuși, să luăm în considerare o altă modalitate de a seta o indentație, folosind imagini.
Indentarea textului HTML, a patra metodă - aici vom folosi o imagine pentru a seta indentarea.
Ca exemplu de lucru, să ne uităm imediat la codul html care demonstrează cum funcționează această metodă:
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 a preveni ca imaginea pe care o folosim să fie vizibilă pe pagină, îi vom seta culoarea exact la fel ca fundalul paginii site-ului.
După părerea mea, metodele de mai sus pentru setarea indentărilor pentru text sunt destul de suficiente pentru a organiza indentarea de care aveți nevoie în orice situație atunci când adăugați conținut pe pagina site-urilor dvs.
O zi buna! Setarea indentărilor pentru text și imagini este subiectul principal al publicației de astăzi. Să aruncăm o privire mai atentă asupra abordărilor care pot fi aplicate în practică.
Atunci când creează un site web, un webmaster se ocupă cu blocurile de text și frazele plasate pe paginile proiectului. Rezolvarea problemelor individuale implică utilizarea etichetelor HTML adăugate în editor. Există mai multe tipuri de atribute care vă permit să mutați fraze sau să schimbați locația fragmentelor pe o pagină electronică.
Setarea indentărilor prin inserarea de spații
Să ne uităm la cum să indentați textul în HTML folosind o etichetă specială care creează un spațiu. 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 poate fi procesat de toate tipurile de browsere, iar webmasterul va primi un rezultat garantat. Dezavantajul metodei este capabilitățile sale limitate, deoarece pentru a crește distanța trebuie să adăugați mai multe etichete, iar acest lucru aglomera documentul.
Aplicarea unei etichete de citare
Studiind în detaliu cum să indentați textul în codul HTML, puteți da peste o metodă alternativă care oferă mai multe posibilități.
Aici va trebui să utilizați blockquote, care vă permite să mutați fragmentul din stânga și din dreapta cu aproximativ 40 px. Este suficient să scrieți cod identic cu exemplul dat:
Metoda vă permite să manipulați fraze cu o valoare fixă de 40 px. De asemenea, merită remarcat faptul că această etichetă include de obicei un citat.
Opțiuni alternative
Dacă intenționați să mutați o distanță non-standard, va trebui să utilizați parametrul text-indent legat de foaia de stil CSS. Metoda luată în considerare asigură crearea unei abateri a primei linii la distanța necesară. Următoarele modificări trebuie făcute editorului:
Atunci 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 de offset de la marginile imaginii. În al doilea, poziția imaginii este setată la marginea din stânga cu textul curgând spre dreapta, iar în a treia - invers.
Informația a ajuns la final. Spune-mi, ai găsit informațiile pe care le căutai? Răspunsul poate fi scris în comentarii.
În cele din urmă, voi menționa că blogul Workip este dedicat în primul rând opțiunilor monetare pentru a face bani online. Știți ce metode sunt cu adevărat promițătoare din punct de vedere financiar? Descrierile unora dintre ele au fost deja publicate.
Publicarea materialelor continuă. Abonați-vă la e-mail pentru actualizări de proiect. Ne vedem mai târziu.
