Поглед към това как бялото пространство в HTML се обработва от браузърите
Ако сте началник на уеб дизайнер, едно от многото неща, които ще трябва да разберете по-рано, е начинът, по който бялото пространство в кода на сайта се обработва от уеб браузърите.
За съжаление, начина, по който браузърите се занимават с бяло пространство, не е много интуитивен на първо място, особено ако влезете в HTML и го сравните с това как се обработва бялото пространство в програмите за текстообработка, които може да сте по-запознати.
В софтуера за текстообработка можете да добавите много раздели или раздели в документа и това разстояние да бъде отразено в дисплея на съдържанието на документа. Това не е случаят с HTML или с уеб страници. По този начин научаването как бялото пространство наистина се обработва от уеб браузърите е много важно.
Разстояние в печат
В софтуера за текстообработка трите основни знака за бяло пространство са пространството, табът и връщането на каретата. Всяко от тях действа по различен начин, но в HTML, браузърите ги правят по същество еднакви. Независимо дали поставяте едно интервал или 100 интервала в HTML кода си или смесвате разстоянието си с раздели и карета, всички те ще бъдат кондензирани на едно място, когато страницата бъде изобразена от браузъра. В терминологията на уеб дизайна това се нарича "колапс на бялото пространство". Не можете да използвате тези типични интервални клавиши, за да добавите празно пространство в уеб страница, защото браузърът свива няколко пространства надолу само в едно пространство, когато се изобрази в браузъра,
Защо някой използва раздели?
Обикновено, когато хората използват раздели в текстов документ, те ги използват за оформление или да накарат текста да се премести на определено място или да бъде на известно разстояние от друг елемент. В уеб дизайна не можете да използвате тези гореспоменати космически знаци, за да постигнете тези визуални стилове или оформление.
В уеб дизайна, използването на допълнителни знаци за разстояние в кода ще бъде само за по-лесно четене на този код. Уеб дизайнерите и разработчиците често използват раздели, за да отрежат кода, така че да могат да видят кои елементи са деца на други елементи - но тези тирета не засягат визуалното оформление на самата страница. За тези необходими промени в визуалното оформление, ще трябва да се обърнете към CSS (cascading style sheets).
Използване на CSS за създаване на раздели в HTML и разстояние
Уеб сайтовете днес са изградени с отделяне на структура и стил. Структурата на страницата се обработва от HTML, докато стила се диктува от CSS. Това означава, че за да създадете разстояние или да постигнете определено оформление, трябва да се обърнете към CSS и да не се опитвате просто да добавяте разделителни знаци към HTML кода.
Ако се опитвате да използвате раздели, за да създавате колони с текст, вместо това можете да използвате
Ако данните, които излагате, са таблични данни, можете да използвате таблици, за да ги подредите така, както искате. Таблиците често получават лош рап в уеб дизайна, тъй като те са били злоупотребявали с инструменти с чисто оформление за толкова много години, но таблиците все още са напълно валидни, ако съдържанието ви съдържа посочените по-горе таблични данни.
Маргини, подложки и текст-отстъп
Най-често срещаните начини за създаване на разстояние с CSS е чрез използване на един от следните стилове на CSS:
- марж
- подложка
- текст-тире
Например, можете да вмъкнете първия ред на параграф като раздел със следното CSS (забележете, че това означава, че вашият абзац има атрибут клас на "first", прикачен към него):
p.first {
текст-тире: 5em;
}
Този параграф сега ще бъде с вдлъбнатина около 5 знака.
Можете също така да използвате свойствата на маркера или напасването в CSS, за да добавите разстояние към горната, долната, лявата или дясната (или комбинация от тези страни) на елемент. В крайна сметка, можете да постигнете каквато и да е разстояние, необходимо, като се обърнете към CSS.
Преместване на текст повече от едно пространство без CSS
Ако всичко, което искате, е текстът Ви да бъде преместен на повече от едно интервал от предходния елемент, можете да използвате пространството без скъсване.
За да използвате безразборното пространство, просто добавете & nbsp; колкото пъти се нуждаете от него в HTML кода си.
Например, ако искате да преместите думата си пет интервала, можете да добавите следното преди думата.
& Nbsp; & Nbsp; & Nbsp; & Nbsp; & Nbsp;HTML ги уважава и няма да ги срутва в едно пространство. Това обаче се счита за много лоша практика, тъй като добавя допълнителна HTML маркировка към документ само за постигане на нуждите от оформление. Като се обръщате към това разделение на структурата и стила, трябва да избягвате добавянето на непробиваеми пространства само за постигане на желания ефект на оформление и вместо това трябва да използвате CSS маржове и подложки.