CSS език
CSS език Блокове за позициониране.
В HTML използвахме таблици за позициониране на елементи на страницата. Таблиците имат както предимства (лекота на използване, еднакво показване от браузърите), така и недостатъци (обемен, нечетлив код, нелогично оформление и др.). В CSSблокове(div) се използват за позициониране на елементи. Кодът в същото време става компактен, логичен и лесно променлив. Недостатъците на блоковото оформление включват нееднаква поддръжка от браузърите, така че трябва да пишете код за различни браузъри (т.е. код, който се показва почти еднакво от различни браузъри).
Спомнете си следния шаблон на html документ, който беше създаден с помощта на таблица:
Сега нека видим как можем да оформим такава страница с помощта на CSS. Ако визуално разделим нашата страница на правоъгълни блокове, ще получим четири блока: заглавката на сайта, менюто, съдържанието и долната част на сайта. Така че имаме четири div.
Нека напишем html кода на страницата с четири div (и съответното съдържание) и да дадем на всеки подходящ идентификатор (id): "header", "menu", "content", "bottom" (задайте подходящия шрифт и размер на шрифта).
Сега, в страницата style.css, нека зададем ширината, височината, цвета на фона и текста на всеки блок. Сега нашата страница в браузъра (в намалена версия) изглежда така:
Това позициониране на елементи се наричапозициониране в нормален поток. Това означава, че всички елементи се показват в прозореца на браузъра отгоре надолу, вертикално, в реда, в който следват един след друг в html кода. В основата си нормалният поток не се различава от позиционирането на елементи в HTML. И за да изобразим такава страница без CSS, ще трябва да използвамемаса, поради липса на други възможности. CSS ни предоставя други схеми за позициониране:
модел на плаващ блок.
Свойствотоpositionсе използва за дефиниране на схемата за позициониране; то може да приеме четири стойности, съответстващи на избраната схема за позициониране:
статичен- блокът е позициониран в нормалния поток. Това е по подразбиране;
relative- относително позициониране (спрямо нормалния поток);
absolute- абсолютно позициониране;
Днес ще разгледаме абсолютното позициониране, останалите схеми ще разгледаме в следващите уроци.
При тази схема на позициониране местоположението на блока на страницата не зависи от това къде в html кода се намира този блок. Местоположението на всеки блок се задава, като се посочи къде на екрана да се покаже този блок. Има четири свойства за това:
left- показва колко да се измести блокът спрямо левия край на прозореца;
right- показва колко да се премести блокът спрямо десния край на прозореца;
top- показва колко да се премести блокът спрямо горния край на прозореца;
bottom- показва колко да преместите блока спрямо долния край на прозореца.
Да се върнем към нашия пример. Нашите заглавка, меню и долни блокове са позиционирани в нормалния поток, така че не е необходимо да задаваме свойството за позиция за тях. Но блокът със съдържание трябва да бъде поставен на друго място, така че ще посочим свойството position:absolute за него и ще зададем отместването: от левия ръб на прозореца до ширината на блока с менюта и от горния ръб на прозореца до височината на заглавния блок:
| позиция: абсолютна; ляво:450px; горе:100px; |
Нашият блок се намирасъвсем според очакванията. Това се дължи на факта, че не взехме предвид един нюанс: браузърите имат свои собствени, вградени таблици със стилове. И ако не сме задали никакви свойства, тогава се използва свойството по подразбиране. Напримерполетаса дефинирани за елемента body по подразбиране и ние не ги взехме под внимание, когато задавахме свойствата на отместването. За да разрешите този проблем, достатъчно е да зададете свойство margin:0px върху тялото, т.е. изрично посочете размера на полетата (в нашия пример - тяхната липса). Добавете това към листа със стилове:
и също така ще вземем предвид размерите на отстъпите и рамките в блокове.
Сега нашата страница изглежда така, както очаквахме. По принцип размерът на отместването може да се задава за всеки блок, понякога е необходимо. Основното нещо, което трябва да запомните:при абсолютно позициониране трябва да зададете свойството position:absolute за блока и свойството отместване спрямо „родителския“ елемент. В нашия пример родителският елемент за divs беше прозорецът на браузъра, но може да е различно.
| Практическа задача:добавете новинарски блок към нашата страница и го поставете в блока със съдържание. След това в таблицата със стилове отместването трябва да бъде посочено спрямо съдържанието.блок. |
Резултат в браузъра:
При абсолютно позициониране, за да избегнете объркване със стойностите на отместване, първо дефинирайте "родителя" и не забравяйте, чеотместването е относително към "родителя".
Следващият път ще проучим други схеми за позициониране.