Моят откровение

Къде сме

В предишната си статия, посветена на CSS Говоря за основните принципи на CSS и типичните случаи на използването му. Имаше основите на CSS, възможните видове селектори, HTML структура от гледна точка на CSS. Имам изброени най-често срещаните CSS свойства и показа как те могат да бъдат настроени за елементи на страницата. Платих достатъчно внимание на CSS свойства са отговорни за запълване и граничен оказване на текст, изображения, линкове и списъци. Най-накрая той се установява в имоти, които са специфични за стил маси.







Всичко е добре, но все още остава открит въпросът за използването на CSS стилове за формирането на структурата и оформлението на страницата. По-рано, когато за CSS, малко хора знаеха, той образува само като ефективна технология за тази цел почти винаги се използва в таблицата. Те обикновено заемат цялото пространство на страницата, и да използват клетките на таблицата зададен районите за настаняване на отделните участъци. Наличието на такива свойства като ColSpan и rowspan. които съответно позволяват на лепило линия на множество колони и множество редове в колона, се получава още по-голяма гъвкавост за маркиране предварително определен начин. Много често, тъй като съдържанието на клетка, за да се използват вложени таблици, които от своя страна могат да имат своите вложени таблици. Тази страница структура в случай на големи обеми нарасна тежък, trudnopodderzhivaemoy и не гъвкава. Да кажем, че за да се премине от една точка до друга част на страницата в някои sluagh трябваше да седя с часове и ръчно да пренапише оформлението отново.

Сега, с използването на CSS всичко става много по-лесно. Достатъчно е да се разделят на съдържанието на желаната част в отделен слой с помощта на DIV тагове и просто питам за него правилата за позициониране на една страница с помощта на CSS свойства. Ако по-късно ще бъде необходимо да се движи този раздел на противоположната страна на страницата - просто да промените CSS свойства не се докосват в същото време повечето от кода на страницата. Той е много лесен и удобен начин. Въпреки това, за онова, което се оказа, че простота Имам нужда от малко по-дълбоко запознати с възможностите на данни.

В тази статия ще говорим за някои методи за оформление на страницата, как да ги използва и как да ги създаде. Но нека започнем с просто един ред.

Опции за оформлението на страницата.

Страница с фиксирана ширина. Тези страници са ogranitsenie от ширината на неговите елементи, и независимо от това какъв размер на прозореца на браузъра - ширината на региона се използва е фиксирана и не се променя модела по време на работата с страницата. Тези страници се използват в тези места, където ustanvleny строги изисквания за елементите на дисплея на страницата и какво nekontrolliruemoe разтегнат елементи просто неприемливо. В такива случаи обикновено се определя фиксирана ширина на тялото маркер и центъра на ширината на страницата на прозореца на браузъра. Най-често срещаната стойност за ширината на страницата с фиксирана ширина: 960 пкс - размера на страницата, като позволява на добра разделителна способност на екрана като се започне от 1024x768.

Страници плаващи ширина. - При този вид ширина страница на неговите елементи не са определени, и те са свободни да променят своите размери, разпространява по раздел екран или родител и като цялото налично пространство. Този подход е най-подходящо да се прилагат, ако основната цел е да се покаже страницата на текст. В други случаи, прилагането на тези подходи може да се направи Дон Кихот, безсмислено борба с вятърни мелници е, който и да е начин във вашия случай е браузъра.

"Гъвкав страница." Тези страници се комбинират двата подхода. Елементите на тези страници са с фиксирана ширина, но могат да се разтягат или свиват в зависимост от ширината на прозореца на браузъра в предварително зададените граници. За тази цел можете да използвате свойствата на мин височина. мин ширина. макс височина и макс ширина. Споменах в първата част.

За да се постигне най-добри резултати, като често има смисъл да се обединят трите подхода към оформлението на страницата: например всички от раздела за поддръжка и навигация - което е недопустимо неконтролирано разпространение elemetnov - направи фиксирана ширина, а централната панел за "гъвкав" или дори да може да заеме всички, които остават след фиксирани раздели на прозореца на браузъра на пространството.







Методи за оформление на страницата

CSS ви позволява ефективно да реализира оформление с помощта на различни методи и техники. Най-често срещаните методи включват плаващи слоеве (в англоезичните източници, тази техника може да се нарече поплавък оформление) и абсолютно позициониране (абсолютно позициониране). Освен това, субективното маркировка абсолютно мнозинство от сайтове, използвайки imennno плаващи слоеве. Следваща аз ще се опитам да се разгледа всеки един от тези методи, по-подробно.

плаващ слоеве

Плаващи слоеве се реализират чрез манипулация с имота да плаваш eementov страница. С този слой свойства, параграфи, и други елементи могат да бъдат разположени от лявата или дясната страница или дясната страна на външния контейнер. За да направите това, трябва да настроите плувка собственост на съответните стойности: поплавъка: ляво, дясно, нито един. Останалите съдържанието на страницата ще "заобикалят" елемент се притиска към една от страните. Много важен момент, който трябва да се отбележи, че съдържанието ще заобикалят elemetn да плува само когато се установи по-долу този маркер в кода на страницата и ширината му е не повече от остатъка от ширината на страницата или външния съд. Ето защо, в този случай е много важно да се определи последователността на страницата с описание на elemetnov като HTML файл.

Понякога има ситуации, когато е необходимо да се направи, така че ще бъде това, което, че съдържанието не е заобиколен от елемент на поплавъка и се изтегля по-долу тази позиция. Пример за такава ситуация може да бъде панел фута, което въпреки всичко винаги трябва да е в долната част на страницата. Може да дойде на помощ на ясно имот, който приема следните стойности: ясен: ляво; надясно; и двете; няма. Тази функция принуждава съдържанието изготвени под поплавък-елемент. И с помощта на този прекрасен хотел може да се настрои да е флоат елемент принадлежи: с левия vyravnimaniem, нали и така и така или нито на едното, нито другото. Така че, ако имате устройство с плаваща запетая: ляво. защото това би се задоволим показани по-долу и да не му позволи да заобикалят този елемент трябва също така да се използва ясен: ляво.

Въпреки това, описаната функционалност разбира се не е достатъчно за ефективното прилагане на оформлението на страницата. Сега е времето да се справят с методи за фина настройка на маркирането. В sulchae плаващи елементи слоеве позиция страница хоризонтално Като правило определя с помощта на CSS свойства марж, който, както вече знаем, се използва за определяне на разстоянието от ръба на един елемент към друг елемент. На пръв поглед това може да изглежда малко странно и не е практично. Все пак, това е само на пръв поглед. Уникалното в този имот е, че е възможно да се определи отрицателна стойност, като по този начин измества елемент към лявата спрямо първоначалната си позиция за него. Ами и съответно положителна стойност измества елемент в дясно (в действителност, разбира се елемент остава на мястото си, просто добавяне свойства марж за elemetna визуално тя се движи с предварително определена стойност).

Така, че е възможно да elemetnov определено фиксирано ширина и височина от ширината и височината, съответно, посочи изискваните стойности и марж флоута и се насладете на резултата. По-нататъшни действия са ограничени само от вашето въображение и изобретателност. Като пример, искам да се покаже как могат да отбележат страницата. По-долу е дадена страница razbyty проба на секции и CSS-файл код и HTML-страници.

абсолютно позициониране

Абсолютно позициониране. както вече казах, че не се използва толкова често, колкото плаващите слоеве, но също заслужава внимание. Понякога това се случва, че допускането на плаващите слоеве е неприемливо поради някаква причина, и така всичко, което остава за нас в тази ситуация - това е абсолютно позициониране. Въпреки това, повечето абсолютно позициониране се използва за позицията примес - определяне разположението на един елемент спрямо друга позиция. Както и да се знае за се изисква допускането.

В основата на тази техника е позицията на работа свойства. който може да се следните стойности: позиции: абсолютен, относителен, определен статично. Значение абсолютен - определя позицията на елемент в координати екран, или майка елемент, както ще бъде показано по-долу. роднина - определя позиция по отношение на местоположението по подразбиране. При задаване на отместването помощта на тази стойност, страницата е "дупка", така че са склонни да го използвате, така че не е необходимо, тъй като можете да - малко по-късно. фиксиран - Определя позицията на екрана, независимо от превъртане, че е без значение колко не превъртете до лентата за превъртане - елемент ще остане в своята позиция. Стойността на статично - нормално позициониране, ако не е определено класиране elemetna тип, тази стойност се отнася за umlochaniyu.

След като имотът на позиция е определена за даден елемент, че има смисъл да се уточни свойствата, които определят координатите на елемента: горе, долу, ляво и дясно. Например, определяне на позицията на всеки елемент: абсолютна. Можете да го настроите с помощта на посочените по-горе свойства по отношение на една или друга граница на прозореца на браузъра. Въпреки това, ако говорим за това, което клетка, която, например, е в рамките на слоя, абсолютната позиция на елемента се извършва по отношение на границите на самия слой.

За да се изясни по-горе, помислете за един прост пример. Да кажем, че имаме заглавие и задаване на снимката в заглавната част. Тогава позицията си по отношение на същия този дял може да бъде настроен, както следва: