Како да се користи HTML и CSS за создавање на јазичиња и растојание

Погледнете како белиот простор во HTML е третиран од прелистувачите

Ако сте почетен веб-дизајнер, една од многуте работи што ќе треба да ја разберете рано, е начинот на кој белиот простор во кодот на страницата се ракува со веб-прелистувачи.

За жал, начинот на кој прелистувачите управуваа со белиот простор, прво не е многу интуитивен, особено ако влезете во HTML и споредете го со тоа како се обработува бел простор во програмите за обработка на текст, за кои можеби сте запознаени.

Во софтверот за обработка на текст, можете да додадете многу проред или јазичиња во документот и тој простор ќе се рефлектира во приказот на содржината на документот. Ова не е случај со HTML или со веб страници. Како таква, учењето како бел простор е, навистина, управувани од веб прелистувачи е многу важно.

Растојание во печатење

Во софтверот за обработка на текст, трите примарни белетриски знаци се просторот, јазичето и враќањето на превозот. Секој од овие дејствува на посебен начин, но во HTML, прелистувачите ги прават сите суштински исти. Без разлика дали ќе поставите еден простор или 100 празни места во HTML означувањето, или ќе го помешате растојанието со табулаторот и враќањето на превозот, сите овие ќе бидат кондензирани до еден простор кога страната ќе биде прикажана од страна на прелистувачот. Во терминологијата за веб дизајн, ова е познато како колапс на белиот простор. Не можете да ги користите овие типични проредски клучеви за да додадете празни места во веб-страница, бидејќи прелистувачот паѓа повеќе простори во само еден простор кога е преведен во прелистувачот,

Зошто некој користи јазичиња?

Типично, кога луѓето користат јазичиња во текстуален документ, ги користат за причини за изгледот или за да го пренесат текстот на одредено место или да биде одредено растојание од друг елемент. Во веб-дизајнот, не можете да ги користите овие горенаведени просторни знаци за да ги постигнете тие визуелни стилови или потребите за изгледот.

Во веб-дизајнот, користењето на дополнителни знаци за проред во кодот би било чисто за лесно читање на тој код. Веб-дизајнерите и програмерите честопати ги користат јазичињата за кодирање, за да можат да видат кои елементи се деца на други елементи - но тие алишта не влијаат на визуелниот распоред на самата страница. За оние потребни визуелни изгледи промени, ќе треба да се свртиме кон CSS (каскадни стилски листови).

Користење на CSS за создавање на HTML јазичиња и проред

Веб-страниците денес се изградени со поделба на структурата и стилот. Структурата на страницата ја обработува HTML, додека стилот е диктиран од CSS. Ова значи дека за да создадете празно место или да постигнете одреден изглед, треба да се свртувате кон CSS и да не се обидувате едноставно да додавате проред карактери во HTML кодот.

Ако се обидувате да користите јазичиња за да креирате колони со текст, наместо тоа, можете да користите

елементи кои се позиционирани со CSS за да го добиете распоредот на колоната. Ова позиционирање може да се направи преку CSS плови, апсолутно и релативно позиционирање или нови техники на CSS распоред како Flexbox или CSS Grid.

Ако податоците што ги изложувате се табеларни податоци, можете да користите табели за да ги усогласите тие податоци онака како што сакате. Табелите често добиваат лош рап во веб-дизајнот бидејќи тие биле злоупотребени како чисти распоредни алатки за толку многу години, но табелите се сеуште совршено валидни ако вашата содржина ги содржи горенаведените табеларни податоци.

Маргини, обложувања и текстура

Најчестите начини да се создаде празно место со CSS е со користење на еден од следните стилови на CSS:

  • маргина
  • бања
  • текст-алинеја

На пример, можете да ја одредите првата линија од став како таб со следните CSS (забележете дека ова претпоставува дека вашиот став има атрибут на класа на "прв" приложен кон него):

p.first {
текст-алинеја: 5em;
}

Овој параграф сега ќе биде вовлечен околу 5 карактери.

Можете да ги користите и маргините или опциите за пополнување во CSS за да додадете празно место на горниот, долниот, левиот или десниот (или комбинациите од тие страни) на елементот. На крајот на краиштата, може да постигнете било каков простор што е потребен со вртење до CSS.

Преместување текст повеќе од еден простор без CSS

Ако сакате да го преместите вашиот текст повеќе од еден простор подалеку од претходната ставка, можете да го користите просторот што не се крши.

За да го користите просторот што не се крши, едноставно додадете & nbsp; онолку пати колку што ви треба во вашиот HTML ознака.

На пример, ако сакате да го преместите зборот пет простори, може да го додадете следново пред зборот.

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

HTML ги почитува овие и нема да ги сруши на еден простор. Сепак, ова се смета за многу лоша практика, бидејќи додава дополнителна HTML-ознака до документ само за да се постигне распоред потреби. Осврнувајќи се на таа поделба на структурата и стилот, треба да избегнувате додавање простори кои не се кршат едноставно за да се постигне саканиот распореден ефект и да користи CSS маргини и пропагирање наместо тоа.