Ustvarite presledke in fizično ločevanje elementov v HTML s CSS
Ustvarjanje prostorov in fizično ločevanje elementov v HTML je za začetnega spletnega oblikovalca težko razumljivo. To je zato, ker ima HTML lastnost, znana kot "zlom v presledku". ali v svoji kodi HTML vnesete 1 prostor ali 100, spletni brskalnik samodejno uniči te prostore do enega samega prostora. To se razlikuje od programa, kot je Microsoft Word , ki avtorjem dokumentov omogoča dodajanje več presledkov za ločevanje besed in drugih elementov tega dokumenta.
To ne pomeni, kako deluje spletna stran.
Torej, kako dodate presledke v HTML, ki se pojavijo na spletni strani ? Ta članek obravnava nekaj različnih načinov.
Prostori v HTML s CSS
Najprimernejši način dodajanja presledkov v HTML je s Cascading Style Sheets (CSS) . CSS je treba uporabiti za dodajanje vizualnih vidikov spletne strani in ker je razmik del grafičnih značilnosti strani, je CSS, če želite, da se to naredi.
V CSS lahko uporabite robove ali oblike za dodajanje prostora okrog elementov. Poleg tega lastnost besedilne razlike dodaja presledek besedila, na primer za odstavljanje odstavkov.
Tukaj je primer uporabe CSS-a, da dodate prostor pred vsemi vašimi odstavki. Dodajte ta CSS na svoj zunanji ali notranji slogovni list:
p {
besedilna alinea: 3em;
}
Prostori v HTML-ju: znotraj vašega besedila
Če želite samo svojemu besedilu dodati dodaten prostor ali dva, lahko uporabite neomejen prostor.
Ta znak deluje tako kot standardni prostorski znak, le da se v brskalniku ne zlomi.
Tukaj je primer, kako dodati pet presledkov znotraj vrstice besedila:
To besedilo vsebuje pet dodatnih presledkov v njem
Uporablja HTML:
To besedilo ima & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; pet dodatnih prostorov znotraj njega
Oznako
lahko dodate tudi dodatne prelome vrstic.
Ta stavek ima pet vrstic na koncu,
Zakaj razmik v HTML je slaba ideja
Medtem ko te možnosti delujejo - element neomejenega presledka bo dejansko dodal razmik med besedilom in prelomi vrstic bodo dodali razmik pod zgornjim odstavkom - to ni najboljši način za ustvarjanje razmika na svoji spletni strani. Dodajanje teh elementov v HTML dodaja vizualne podatke k kodi namesto ločevanja strukture strani (HTML) iz vizualnih stilov (CSS). Najboljše prakse narekujejo, da bi morale biti ti ločeni zaradi več razlogov, vključno z lahkoto posodobitve v prihodnosti ter celotne velikosti in učinkovitosti strani.
Če uporabljate zunanjo slogovno ploščo, ki narekuje vse svoje sloge in razmik, je zamenjava teh stilov za celotno spletno stran enostavna, saj morate preprosto posodobiti ta slogovni slog.
Upoštevajte zgornji primer stavka s petimi oznakami na koncu. Če bi želeli to količino razmika na dnu vsakega odstavka, bi morali dodati to kodo HTML vsakemu odstavku na celotnem spletnem mestu. To je poštena količina dodatne oznake, ki bo napihnila vaše strani.
Poleg tega, če se odločite za cesto, da je ta razmik preveč ali premalo, in ga želite malo spremeniti, bi morali urediti vsak posamezen odstavek na celotnem spletnem mestu. Ne, hvala!
Namesto da dodate te elemente razmika v svojo kodo, uporabite CSS.
p {
padding-bottom: 20px;
}
Ta vrstica CSS bi dodala razmik v odstavkih vaše strani. Če bi želeli v prihodnosti spremeniti to razmikanje, uredite to eno vrstico (namesto vaše celotne kode spletnega mesta) in dobro je iti!
Zdaj, če morate dodati en prostor na enem delu spletnega mesta, z oznako
ali enim neomejenim prostorom ni konec sveta, vendar morate biti previdni.
Uporaba teh vrstic vmesnika HTML je lahko spolzka pobočja. Medtem ko eden ali dva morda ne škodita vaši strani, če nadaljujete po tej poti, boste na svoje strani predstavili težave. Na koncu je bolje, če se obračate na CSS za razmik med HTML-ji in vse ostale vizualne potrebe spletne strani.