Vytvořte mezery a fyzické oddělení prvků v jazyce HTML pomocí CSS
Vytváření mezer a fyzické oddělení prvků v HTML může být pro začátečníka webu obtížné pochopit. Důvodem je to, že kód HTML má vlastnost známou jako "sbalení mezery". ať už zadejte 1 nebo 100 znaků v kódu HTML, webový prohlížeč automaticky sbalí tyto mezery pouze na jediný prostor. To se liší od programu, jako je Microsoft Word , který umožňuje tvůrcům dokumentů přidávat více míst k odděleným slovům a dalším prvkům daného dokumentu.
Tímto způsobem funguje rozložení návrhů webových stránek.
Takže, jak přidáte mezery ve formátu HTML, které se zobrazí na webové stránce ? Tento článek zkoumá některé z různých způsobů.
Prostor ve formátu HTML s CSS
Upřednostňovaný způsob přidávání mezer ve vašem kódu HTML je s kaskádovými styly (CSS) . CSS by mělo být použito k přidání jakýchkoli vizuálních aspektů webové stránky a vzhledem k tomu, že rozteč je součástí vizuálních designových vlastností stránky, CSS je místo, kde to chcete udělat.
V CSS můžete použít buď okrajové nebo polstrování vlastnosti přidat prostor kolem prvků. Navíc vlastnost text-odsazení přidává prostor do přední části textu, například pro odsazení odstavců.
Zde je příklad, jak pomocí CSS přidat prostor před všechny vaše odstavce. Přidejte následující CSS do vašeho externího nebo interního stylu:
p {
textová odrážka: 3em;
}}
Prostory v HTML: uvnitř textu
Pokud chcete přidat pouze další prostor nebo dva text, můžete použít neporušený prostor.
Tato postava funguje stejně jako standardní prostorová charakteristika, ale v prohlížeči se nezhromažďuje.
Zde je příklad, jak přidat pět mezery uvnitř řádku textu:
Tento text má pět dalších prostorů uvnitř
Používá HTML:
Tento text má & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; pět dalších prostorů uvnitř
Můžete také použít značku
přidat přerušení dalšího řádku.
Tato věta má pět řádkových přestávek na konci toho
Proč je rozložení ve formátu HTML špatným nápadem
Zatímco tyto možnosti fungují, element nerozbitných prostorů skutečně přidá odstup k textu a přerušení řádku přidá odstup pod výše uvedeným odstavcem - nejedná se o nejlepší způsob, jak vytvořit prostor na vaší webové stránce. Přidáním těchto prvků do kódu HTML se do kódu přidávají vizuální informace namísto oddělení struktury stránky (HTML) od vizuálních stylů (CSS). Nejlepší postupy diktují, že by měly být odděleny z mnoha důvodů, včetně snadné aktualizace v budoucnu a celkové velikosti a výkonnosti stránky.
Používáte-li externí stylový štítek, abyste diktovali všechny styly a rozestupy, pak je snadné změnit tyto styly pro celý web, protože jednoduše musíte aktualizovat ten stylový list.
Uvažujme výše uvedený příklad věty s pěti značkami na konci. Pokud byste chtěli, aby to bylo v dolní části každého odstavce, musíte přidat tento kód HTML do každého odstavce na vašem webu. To je spousta dalších značek, které vám naplní vaše stránky.
Dále, pokud se rozhodnete, že tato vzdálenost je příliš nebo příliš málo a chcete ji trochu změnit, budete muset upravit celý odstavec na celé své webové stránce. Ne, děkuji!
Namísto přidání prvků odstupu do kódu použijte CSS.
p {
padding-bottom: 20px;
}}
Ten řádek CSS by přidal odstup pod odstavce stránky. Pokud jste chtěli v budoucnu změnit toto rozložení, upravte tento jeden řádek (místo celého kódu vašeho webu) a vy byste měli jít!
Nyní, pokud potřebujete přidat jednu oblast do jedné části vašeho webu, použijte značku
nebo jediný nerozbitný prostor není konec světa, ale musíte být opatrní.
Pomocí těchto vložených možností rozestupu HTML může být kluzká sklon. Zatímco jeden nebo dva nemusí škodit vašemu webu, pokud pokračujete touto cestou, představíte problémy na svých stránkách. Nakonec je lepší se obrátit na CSS pro rozestup HTML a všechny další vizuální potřeby webových stránek.