Креирај простори и физичко одвојување на елементите во HTML со CSS
Креирањето на простори и физичкото одвојување на елементите во HTML може да биде тешко да се разбере за почетокот на веб дизајнер. Ова е затоа што HTML има својство познато како "колапс на празен простор". без разлика дали внесувате 1 празно место или 100 во вашиот HTML код, веб-прелистувачот автоматски ги урива овие простори до еден единствен простор. Ова е различно од програма како Microsoft Word , која им овозможува на создавачите на документи да додаваат повеќе простори за да ги одделат зборовите и другите елементи на тој документ.
Ова не е како растојанието на веб-дизајнот функционира.
Значи, како додавате празни места во HTML кои се појавуваат на веб-страницата ? Оваа статија испитува некои од различните начини.
Простори во HTML со CSS
Преферираниот начин за додавање празни места во HTML е со Каскадни стилски листови (CSS) . CSS треба да се користи за додавање на визуелни аспекти на веб страница, и бидејќи проредот е дел од визуелниот дизајн на страницата, CSS е местото каде што сакате да го направите тоа.
Во CSS, можете да ги користите или маргините или опциите за дополнување за да додадете простор околу елементите. Освен тоа, својството на текст-вметнувањето додава простор кон предниот дел од текстот, како на пример за внесување на ставовите.
Еве пример за тоа како да се користи CSS за да додадете простор пред сите ваши ставови. Додајте го следниов CSS на вашиот надворешен или внатрешен стилски лист:
p {
текст-алинеја: 3em;
}
Простори во HTML: Внатре во вашиот текст
Ако само сакате да додадете дополнителен простор или два во вашиот текст, можете да го користите просторот што не се крши.
Овој лик делува исто како стандарден просторен карактер, но не се колабира во прелистувачот.
Еве пример за тоа како да додадете пет празни места во линија на текст:
Овој текст има пет дополнителни простори во неа
Користи HTML:
Овој текст има & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; пет дополнителни места во неа
Исто така можете да ја користите таг на
за да додадете дополнителни паузи на линии.
Оваа реченица има пет линии паузи на крајот од неа
Зошто растојанието во HTML е лоша идеја
Додека овие опции функционираат, елементот кој не се распаѓа ќе го додаде растојанието до вашиот текст, а паузите од линијата ќе додадат празно место под горниот параграф што е прикажано погоре - ова не е најдобриот начин за создавање на празно место на вашата веб страница. Додавањето на овие елементи во вашиот HTML додава визуелни информации во кодот, наместо да ја одделува структурата на страница (HTML) од визуелните стилови (CSS). Најдобрите практики диктираат дека овие треба да бидат одделени од повеќе причини, вклучувајќи ја и олеснувањето на ажурирањето во иднина и целокупната големина на датотеката и перформансите на страницата.
Ако користите надворешен стилски лист за да ги диктирате сите ваши стилови и проред, тогаш промената на тие стилови за целата страница е лесно да се направи, бидејќи едноставно мора да го ажурирате тој стил.
Размислете за примерот погоре на реченицата со пет тагови на крајот од неа. Ако сакате таа сума на растојание на дното од секој став, ќе треба да го додадете тој HTML код на секој став во целата своја страница. Тоа е фер износ на дополнителна марка која ќе ги разгори вашите страници.
Дополнително, ако одлучите дека патот е премногу или премногу мал, и ако сакате малку да го промените, ќе треба да го уредите секој став на целата своја веб-страница. Не благодарам!
Наместо додавање на овие проред елементи на вашиот код, користете CSS.
p {
пролетен долен: 20px;
}
Една линија на CSS ќе додаде празно место под ставовите на вашата страница. Ако сакате во иднина да го промените тоа растојание, уредувајте ја оваа една линија (наместо кодот на целиот сајт) и добро сте да одите!
Сега, ако треба да додадете единствен простор во еден дел од вашиот веб-сајт, со користење на
ознака или еден не-кршење простор не е крај на светот, но треба да бидете внимателни.
Користењето на овие внатрешни опции за растојание на HTML може да биде лизгава падина. Додека еден или двајца не можат да му наштетат на вашата страница, ако продолжите по таа патека, ќе воведат проблеми во вашите страници. На крајот, подобро е да се свртите кон CSS за проред на HTML и сите други веб-страници за визуелни потреби.