Izrada prostora i fizičko odvajanje elemenata u HTML-u s CSS-om
Stvaranje prostora i fizičko razdvajanje elemenata u HTML-u može biti teško razumjeti za početak web dizajner. To je zato što HTML ima entitet poznat kao "razmak između razmaka". bez obzira na to upisujete li 1 prostor ili 100 u svom HTML kodu, web preglednik automatski raspada te prostore na samo jedan prostor. To se razlikuje od programa kao što je Microsoft Word , koji omogućuje stvarateljima dokumenata da dodaju više mjesta za odvajanje riječi i drugih elemenata tog dokumenta.
Ovo nije način funkcioniranja razmaka web stranica.
Dakle, kako dodati bijele prostore u HTML-u koji se prikazuju na web stranici ? Ovaj članak ispituje neke od različitih načina.
Prostori u HTML-u s CSS-om
Preferirani način dodavanja razmaka u HTML-u je s Cascading Style Sheets (CSS) . CSS treba upotrebljavati za dodavanje bilo kakvih vizualnih aspekata web stranice, a budući da je razmak dio vizualnog dizajna neke stranice, CSS je mjesto gdje želite da to bude učinjeno.
U CSS-u možete koristiti svojstva margine ili padanja kako biste dodali prostor oko elemenata. Dodatno, tekstualni entitet dodaje prostor prednji dio teksta, kao što je za uvlačenje odlomaka.
Evo primjera kako upotrebljavati CSS kako biste dodali prostor ispred svih vaših odlomaka. Dodajte sljedeći CSS na svoj vanjski ili unutarnji stilski list:
p {
tekst-uvod: 3em;
}
Prostori u HTML-u: Unutar vašeg teksta
Ako samo želite dodati dodatni prostor ili dva u svoj tekst, možete upotrijebiti neprestani prostor.
Taj lik djeluje baš kao standardni znak prostora, samo se ne sruši unutar preglednika.
Evo primjera kako dodati pet razmaka unutar retka teksta:
Ovaj tekst ima pet dodatnih prostora u njemu
Upotrebljava HTML:
Ovaj tekst ima & nbsp; & nbsp; & nbsp; & nbsp; pet dodatnih prostora u njemu
Također možete upotrijebiti oznaku
da biste dodali dodatne prekide retka.
Ova rečenica ima pet prekidnih linija na kraju nje
Zašto je razmještanje u HTML-u loša ideja
Iako te opcije funkcioniraju - element koji ne razbija elemente zaista će dodati razmak do vašeg teksta, a linije pauze dodaju razmak ispod gore navedenog odlomka - to nije najbolji način stvaranja razmaka na web stranici. Dodavanje tih elemenata u HTML dodaje vizualne podatke kodu umjesto da odvoji strukturu stranice (HTML) od vizualnih stilova (CSS). Najbolji postupci diktirati su da bi trebali biti zasebni iz više razloga, uključujući jednostavnost ažuriranja u budućnosti i ukupnu veličinu datoteke i izvedbu stranice.
Ako upotrebljavate vanjski stilski stil za diktiranje svih stilova i razmaka, možete jednostavno promijeniti te stilove za cijelu web-lokaciju jer jednostavno trebate ažurirati taj stilski list.
Uzmite u obzir gornji primjer rečenice sa pet oznaka na kraju. Ako želite taj iznos razmaka na dnu svakog odlomka, trebate dodati taj HTML kôd na svaki odlomak na cijeloj web-lokaciji. To je fer iznos dodatne markup koji će napuhati vaše stranice.
Osim toga, ako odlučite na cesti da je ovaj razmak previše ili premalo, a želite ga malo promijeniti, trebali biste urediti svaki odlomak na cijeloj web stranici. Ne hvala!
Umjesto da dodate ove elemente razmaka na svoj kôd, upotrijebite CSS.
p {
padding-bottom: 20px;
}
Ta jedna linija CSS-a dodala bi razmake ispod stavaka vaše stranice. Ako ste htjeli izmijeniti taj razmak u budućnosti, uredite ovaj redak (umjesto čitavog koda web mjesta) i dobro ste ići!
Sada, ako trebate dodati jedan prostor u jednom dijelu web-lokacije, upotreba oznake
ili jednog neprestanog prostora nije kraj svijeta, ali morate biti oprezni.
Korištenje ovih opcija razmaka unutar HTML-a može biti sklizak nagib. Iako jedan ili dva ne mogu naštetiti vašoj web-lokaciji, ako nastavite niz put, uvodit ćete probleme na svoje stranice. Na kraju, bolje ste se prebaciti na CSS za HTML razmak i sve druge vizualne potrebe web stranice.