Якщо ви знаєте теги HTML і трохи вивчили CSS, то можете потихеньку освоювати верстку, комбінуючи різні способи.
Наприклад, можете створити порожню заготовку і додавати в неї нові блоки, щоб подивитися, що вийшло.
Ви можете і далі додавати різні абзаци і картинки. Але у вас вийде лінійна структура, яка доречна при розміщенні якогось документа без оформлення. Сайти же мають певну верстку: шапка, підвал, бічні елементи і т.д. Дані елементи формуються блоками div. Спробуємо спочатку їх просто оголосити всередині body.
В результаті ми отримаємо звичайні чотири рядки один за одним. Але це оманливе враження. Насправді вони вже є блоками, але з настройками за замовчуванням.
Щоб блоки стали будівельним матеріалом, потрібно до них додати CSS. Зазвичай, властивості CSS прописуються в окремому файлі і підключаються до сторінки. Але для навчального прикладу ми будемо описувати стилі відразу в файлі в області head. Створювані стилі поміщаються в тег style.
Оновлення сторінку. Тепер ми отримали чотири прямокутники з чорної окантовкою. Всі блоки мають однакові настройки: колір, розміри, товщину обведення. У реальності кожен блок індивідуальний. Щоб їх розрізняти між собою, використовують ідентифікатори і класи. Почнемо з ідентифікаторів. Створимо нові правила за допомогою решітки #. А за потрібне блокам дамо ідентифікатори. Зараз код буде наступним.
Результат буде не дуже гарним, але загальне уявлення, як можна управляти блоками, ви вже отримали.
Щоб кордон не вилазила за блок можна дописати в стилі:
Тепер ширина рамки враховуватися в ширині всього блоку, а не додаватися до неї. У нас є шапка, бічна колонка і основна частина в одному рядку, а нижче розташовується підвал.
Щоб відцентрувати створений зразок, його потрібно оточити додатковим блоком.
Додайте новий блок div з ідентифікатором wrapper. який повинен оточувати всі інші блоки.
Ми задали контейнеру ширину і зовнішні відступи (margin). Перша цифра задає відступ знизу і зверху, а друга - зліва і справа. Відповідно, ключове слово auto створює такі відступи, щоб елемент був вирівняний прямо по центру.
Ми задавали стиль для всіх елементів div на самому початку верстки. Він таким чином, застосовується і до wrapper. що зовсім не бажали. Тому за допомогою псевдокласу: not вказуємо, що правила слід застосовувати до всіх блоків, крім блоку з ідентифікатором wrapper.
Зазвичай в боковій колонці, шапці і підвалі кількість інформації не змінюється, тому там можна виставити фіксовану висоту. Основне вміст залежить від кількості тексту і може бути різним. Тому цього блоку краще поставити мінімальну висоту за допомогою min-height.
Підготовлений макет має певні недоліки, які ви зможете усунути, набравшись досвіду. Далі можна налаштувати у них колір, шрифт і т.д.
Остаточний варіант, який далекий від ідеалу.