Vytvorte medzery a fyzické oddelenie prvkov v jazyku HTML pomocou CSS
Vytváranie priestorov a fyzické oddeľovanie prvkov v jazyku HTML môže byť pre začínajúceho web dizajnéra ťažké pochopiť. Dôvodom je to, že kód HTML má vlastnosť známa ako "kolaps medzery". či napíšete 1 alebo 100 znakov vo vašom HTML kóde, webový prehliadač automaticky zničí tieto medzery len na jeden medzeru. To sa líši od programu, ako je program Microsoft Word , ktorý umožňuje tvorcom dokumentov pridávať viaceré medzery na oddeľovanie slov a ďalších prvkov daného dokumentu.
Nie je to tak, ako funguje rozmiestnenie webových stránok.
Takže, ako pridáte medzery v HTML, ktoré sa zobrazujú na webovej stránke ? Tento článok skúma niektoré z rôznych spôsobov.
Priestory v jazyku HTML s CSS
Uprednostňovaný spôsob pridávania medzipriest do HTML je s kaskádovými štýlmi (CSS) . CSS by sa malo použiť na pridanie akýchkoľvek vizuálnych aspektov webovej stránky a keďže medzery sú súčasťou vizuálnych dizajnových charakteristík stránky, CSS je miesto, kde to chcete robiť.
V systéme CSS môžete pomocou vlastností okraja alebo výplne pridať priestor okolo prvkov. Okrem toho vlastnosť text-odsadenie pridáva priestor do prednej časti textu, ako napríklad odsadenie odsekov.
Tu je príklad, ako používať CSS na pridanie priestoru pred všetky vaše odseky. Pridajte nasledujúci CSS do vášho externého alebo interného štýlu:
p {
textová zarážka: 3m;
}
Priestory v jazyku HTML: vo vnútri textu
Ak chcete len pridať ďalší priestor alebo dva do textu, môžete použiť nerozbitný priestor.
Táto postava funguje rovnako ako štandardný priestorový znak, ale v prehliadači sa nezhromažďuje.
Tu je príklad, ako pridať päť medzery do riadku textu:
Tento text má v sebe 5 ďalších priestorov
Používa HTML:
Tento text má & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; päť ďalších priestorov vo vnútri
Môžete tiež použiť značku
na pridanie ďalších zlomkov.
Táto veta má päť riadkov na konci
Prečo je medzery v HTML zlý nápad
Aj keď tieto možnosti fungujú, prvok nerozbitných medzipriestorov skutočne pridá medzery do vášho textu a prerušenia riadkov pridávajú medzery pod vyššie uvedeným odsekom - nie je to najlepší spôsob, ako vytvoriť medzery vo vašej webovej stránke. Pridanie týchto prvkov do kódu HTML pridáva vizuálne informácie do kódu namiesto oddelenia štruktúry stránky (HTML) od vizuálnych štýlov (CSS). Najlepšie postupy diktujú, že tieto postupy by mali byť oddelené z mnohých dôvodov, vrátane jednoduchosti aktualizácie v budúcnosti a celkovej veľkosti súborov a výkonnosti stránok.
Ak používate externý štýl štýlov, aby ste diktovali všetky svoje štýly a medzery, potom je možné tieto štýly pre celú stránku ľahko zmeniť, pretože jednoducho musíte aktualizovať ten štýl štýlu.
Zoberme si príklad vyššie uvedenej vety s piatimi tagmi na konci. Ak ste chceli, aby sa v spodnej časti každého odseku nachádzalo také množstvo medzery, budete musieť tento kód HTML pridať do každého odseku na celom vašom webe. To je spravodlivé množstvo extra značkovania, ktoré bude na vašich stránkach.
Navyše, ak sa rozhodnete, že táto vzdialenosť je príliš veľa alebo málo a chcete to trochu zmeniť, budete musieť upraviť každý odsek na celej vašej webovej stránke. Nie ďakujem!
Namiesto pridávania týchto oddeľovacích prvkov do kódu použite CSS.
p {
padding-bottom: 20px;
}
Ten istý riadok CSS by pridal oddeľovanie medzi odsekmi stránky. Ak ste chceli v budúcnosti zmeniť toto medzery, upravte tento riadok (namiesto celého kódu vašej lokality) a vy ste dobrý!
Teraz, ak potrebujete pridať jediný priestor do jednej časti vašej webovej stránky, používanie značky
alebo jedného nezlomného miesta nie je koniec sveta, ale musíte byť opatrný.
Použitie týchto vložených možností rozloženia HTML môže byť klzký. Zatiaľ čo jeden alebo dva nemusia poškodiť vašu stránku, ak budete pokračovať touto cestou, predstavíte problémy na svojich stránkach. Nakoniec je lepšie obrátiť sa na CSS pre medzery v HTML a všetky ostatné vizuálne potreby webových stránok.