O privire asupra modului în care spațiul alb în HTML este tratat de browsere
Dacă sunteți un începător de web designer, unul dintre multe lucruri pe care trebuie să le înțelegeți devreme este modul în care spațiul alb din codul unui site este gestionat de browserele web.
Din păcate, modul în care browserele au manipulat spațiul alb nu este foarte intuitiv la început, mai ales dacă veniți în HTML și comparați-l cu modul în care spațiul alb este tratat în programele de procesare a textului, cu care vă puteți familiariza.
În software-ul de procesare a textului, puteți adăuga o mulțime de spații sau file în document și distanțele vor fi reflectate în afișarea conținutului documentului. Nu este cazul cu HTML sau cu paginile web. Ca atare, învățarea modului în care spațiul alb este, într-adevăr, gestionat de browserele web este foarte important.
Distanta în Print
În software-ul de procesare a textului, cele trei caractere primare de spațiu alb sunt spațiul, tab-ul și returul carului. Fiecare dintre acestea acționează într-un mod distinct, dar în HTML, browserele le fac în esență aceleași. Indiferent dacă plasați un spațiu sau 100 de spații în marcajele dvs. HTML sau amestecați distanța între ele cu filele și cardurile, toate acestea vor fi condensate în jos într-un spațiu atunci când pagina este redată de browser. În terminologia de design web, acest lucru este cunoscut sub numele de colaps spațiu alb. Nu puteți utiliza aceste chei de spațiere tipice pentru a adăuga spații libere într-o pagină web deoarece browserul restrânge mai multe spații în jos într-un singur spațiu atunci când este redat în browser,
De ce folosește cineva filele?
În mod obișnuit, când utilizatorii utilizează filele într-un document text, le folosesc pentru motive de aspect sau pentru a obține textul să se mute într-un anumit loc sau să fie o anumită distanță de alt element. În designul de web, nu puteți folosi acele caractere spațiale menționate mai sus pentru a obține acele stiluri vizuale sau nevoi de aspect.
În designul web, folosirea de caractere suplimentare de spațiere în cod ar fi pur și simplu pentru a ușura citirea acelui cod. Designerii web și dezvoltatorii folosesc adesea file pentru a introduce linii de cod, astfel încât să poată vedea elementele care sunt copii ai altor elemente - dar aceste liniuțe nu afectează aspectul vizual al paginii în sine. Pentru acele modificări de aspect vizual necesare, va trebui să vă întoarceți la CSS (foi de stil cascadă).
Utilizarea CSS pentru a crea filele HTML și Spacing
Site-urile de astăzi sunt construite cu o separare a structurii și a stilului. Structura unei pagini este tratată de HTML, în timp ce stilul este dictat de CSS. Aceasta înseamnă că pentru a crea distanțe sau pentru a obține un anumit aspect, ar trebui să vă întoarceți la CSS și să nu încercați să adăugați pur și simplu caractere de spațiere la codul HTML.
Dacă încercați să utilizați file pentru a crea coloane de text, puteți utiliza în schimb
Dacă datele pe care le stabiliți sunt date tabulare, puteți utiliza tabelele pentru a alinia aceste date după cum doriți. Tabelele au adesea un rau rău în designul web pentru că au fost abuzate ca instrumente de aspect pur pentru atât de mulți ani, dar tabelele sunt încă perfect valide dacă conținutul dvs. conține datele tabulare menționate anterior.
Margini, blocaj și text-indent
Cea mai obișnuită metodă de a crea spațierea cu CSS este prin utilizarea unuia dintre următoarele stiluri CSS:
- margine
- umplutură
- text-liniuță
De exemplu, aveți posibilitatea să indentați prima linie a unui paragraf ca o filă cu următorul CSS (rețineți că acest paragraf are un atribut de clasă "primul" atașat la acesta):
p.first {
text-liniuță: 5em;
}
Acest paragraf ar fi acum indentat în jurul a 5 caractere.
De asemenea, puteți utiliza proprietățile margini sau de umplutură în CSS pentru a adăuga distanțe la partea superioară, inferioară, stângă sau dreaptă (sau combinații ale acelor laturi) ale unui element. În cele din urmă, puteți realiza orice fel de spațiere necesară prin accesarea CSS.
Mutarea textului mai mult decât un spațiu fără CSS
Dacă tot ce doriți este ca textul dvs. să fie mutat la mai mult de un spațiu distanță de elementul precedent, puteți utiliza spațiul care nu se rupe.
Pentru a utiliza spațiul fără rupere, adăugați pur și simplu & nbsp; de câte ori aveți nevoie în marcajul HTML.
De exemplu, dacă doriți să vă mutați cuvântul pe cinci spații, puteți adăuga următoarele înaintea cuvântului.
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp;HTML respectă acestea și nu le va prăbuși în jos într-un singur spațiu. Cu toate acestea, aceasta este considerată o practică foarte slabă, deoarece adaugă un marcaj HTML suplimentar la un document numai pentru a realiza nevoile de aspect. Referindu-se la acea separare a structurii și a stilului, ar trebui să evitați adăugarea spațiilor fără rupere doar pentru a obține un efect de aspect dorit și ar trebui să folosească în schimb margini CSS și umplutură.