Pozrite sa, ako biely priestor v HTML spracováva prehliadače
Ak ste začiatočníkom webového dizajnéra, jednou z mnohých vecí, ktoré budete musieť skoro pochopiť, je spôsob, akým biele miesta v kóde stránky spravujú webové prehliadače.
Bohužiaľ, spôsob, akým prehliadače zaobchádzali s bielym priestorom, nie je na začiatku veľmi intuitívne, najmä ak prichádzate do HTML a porovnáte to s tým, ako sa zaobchádza s bielym priestorom v programoch na spracovanie textu, s ktorými môžete byť viac oboznámení.
V programe na spracovanie textu môžete v dokumente pridať veľa medzerníkov alebo kariet a rozmiestnenie sa odrazí na zobrazení obsahu dokumentu. To nie je prípad HTML alebo webových stránok. Preto je veľmi dôležité poznať, ako je biely priestor skutočne ovládaný webovými prehliadačmi.
Rozstup v tlači
V softvéri na spracovanie textu sú tri primárne znaky v bielom priestore miesto, tabuľka a návrat vozíka. Každá z nich pôsobí zreteľne, ale v prehliadači HTML ich prehliadače v podstate robia v podstate rovnaké. Bez ohľadu na to, či umiestnite vo svojom HTML značkovaní jeden medzerový priestor alebo sto mezerov, alebo zmiešate medzery s kartami a návratmi kariet, všetky tieto budú skrátené do jedného priestoru, keď je stránka vykreslená prehliadačom. V terminológii webového dizajnu je to známe ako kolaps bieleho priestoru. Tieto typické medzery nesmiete používať na pridanie medzery na webovej stránke, pretože prehliadač zbalí viac priestoru do jedného priestoru pri vykreslení v prehliadači,
Prečo niekto používa záložky?
Keď používatelia používajú karty v textovom dokumente, zvyčajne ich používajú na účely usporiadania alebo dostanú text na presun na určité miesto alebo na určitú vzdialenosť od iného prvku. Pri návrhu webových stránok nemôžete použiť vyššie uvedené medzery, aby ste dosiahli tieto vizuálne štýly alebo rozloženie potrieb.
Pri webovom návrhu by používanie znakov navyše v kóde bolo čisto jednoduché na čítanie tohto kódu. Weboví dizajnéri a vývojári často používajú na zarovnanie kódu kódy, aby mohli vidieť, ktoré prvky sú deťmi iných prvkov - ale tieto odseky nemajú vplyv na vizuálne rozloženie samotnej stránky. Pre tie potrebné vizuálne usporiadanie zmeny, budete musieť obrátiť na CSS (kaskádové štýly).
Použitie CSS na vytvorenie kariet HTML a medzery
Webové stránky sú dnes postavené s oddelením štruktúry a štýlu. Štruktúru stránky spracováva HTML, zatiaľ čo štýl je diktovaný CSS. To znamená, že k vytvoreniu medzery alebo dosiahnutiu určitého rozloženia by ste sa mali obrátiť na CSS a nepokúšať sa jednoducho pridať medzery do HTML kódu.
Ak sa pokúšate použiť karty na vytvorenie stĺpcov textu, namiesto toho môžete použiť prvky
Ak sú údaje, ktoré uvádzate, sú tabuľkové údaje, môžete tabuľky prispôsobiť tieto údaje tak, ako by ste chceli. Tabuľky sa v webovom dizajne často stávajú špatným rapom, pretože boli používané ako nástroje čistého rozloženia už toľko rokov, ale tabuľky sú stále dokonale platné, ak váš obsah obsahuje vyššie uvedené tabuľkové údaje.
Okraje, polstrovanie a odsadenie textu
Najbežnejšie spôsoby, ako vytvoriť medzery s CSS, je použiť jeden z nasledujúcich štýlov CSS:
- okraj
- vypchávka
- text-zarážka
Napríklad môžete odsadiť prvý riadok odseku ako záložka s nasledujúcim CSS (poznamenajte, že to predpokladá, že váš odsek má k nej priradený atribút triedy "first"):
p.first {
textová zarážka: 5m;
}
Tento odsek by teraz bol odsadený asi 5 znakmi.
Môžete tiež použiť vlastnosti okrajov alebo políčok v CSS, ak chcete pridať medzery k hornej, spodnej, ľavej alebo pravej strane (alebo kombináciám týchto strán) prvku. V konečnom dôsledku môžete dosiahnuť akýkoľvek rozstup potrebný pri obracaní na CSS.
Presunutie textu viac ako jeden priestor bez CSS
Ak chcete, aby text bol presunutý o viac ako jedno miesto od predchádzajúcej položky, môžete použiť len nepriehľadný priestor.
Ak chcete použiť nerozbitný priestor, jednoducho pridajte & nbsp; toľkokrát, koľkokrát to potrebujete v značke HTML.
Napríklad, ak ste chceli presunúť svoje slovo na päť medzery, môžete pred slovom pridať nasledujúce.
& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp;HTML ich rešpektuje a nebude ich zbaliť do jedného priestoru. Toto sa však považuje za veľmi zlú prax, pretože pridáva ďalšiu HTML značku do dokumentu len na dosiahnutie rozloženia potrieb. S odkazom na toto oddelenie štruktúry a štýlu by ste sa mali vyhnúť pridaniu nepriehľadných priestorov jednoducho, aby ste dosiahli požadovaný efekt usporiadania a mali by ste namiesto toho používať okraje CSS a polstrovanie.