Блокова верстка CSS

15

Від автора: вітаю вас на сторінках блогу webformyself. Блокова верстка – найпопулярніший сьогодні спосіб створити шаблон сайту. І таким він буде залишатися мабуть ще довгий час. У зв’язку з цим давайте розбиратися, як здійснюється блокова верстка css-властивості.

Де створюються блоки

Для початку потрібно зрозуміти, що css не створює блоки – він оформляє їх. Самі по собі вони формуються в HTML – мовою розмітки гіпертексту. За замовчуванням блок по висоті буде займати місце, рівну висоті його вмісту. По ширині ж він займе весь доступний простір, що є в батьків.

Для прикладу: якщо ширина батьківського контейнера становить 300 пікселів і в ньому створений блок, то він теж буде займати таку ширину (тільки якщо у батьків не задані відступи). Всі інші елементи, які будуть створюватися в контейнері, не можуть стояти на одній лінії з першим блоком і будуть перенесені далі.

Звичайний порожній блоковий елемент записується з допомогою парного тега — div. Сам по собі він нічого не робить. Наприклад, давайте згадаємо, що багато теги мають певний сенс: абзац є частиною якогось тексту, підзаголовки потрібні для поліпшення навігації і сприйняття і т. д. А ось тег div виступає просто контейнером.

Звична блокова модель

У своєму звичайному поведінці кілька створених блоків будуть йти зверху вниз один за одним. Тут відразу ж спостерігається серйозна проблема, чи не так? А як же зробити бічну колонку, як, зрештою, роблять сайти, на яких в одному рядку йде 3-5 анонсів новин, та ще й з картинками? Ось тут нам і приходить на допомогу css, за допомогою якого розставити елементи на сторінці можна абсолютно будь-яким чином.

Блокова верстка сайту за допомогою css: основні властивості

Як ми переконалися вище, за замовчуванням блоки дуже вперті. Не підпускають до себе інших, та ще й займають всю ширину. Звичайно ж, це потрібно іноді виправляти, тому що структура багатьох сайтів вимагає цього.

Давайте спочатку розберемося з розмірами. В css розміри елементів можна записувати з допомогою властивостей width і height. Найчастіше значення задають в пікселях, хоча іноді у відсотках або інших відносних одиницях.

Ось давайте уявимо, що є великий батьківський контейнер і в ньому є якийсь блоковий елемент. Щоб визначити для нього властивості через таблицю стилів, потрібно якось до нього звернутися. Якщо ми запишемо так:

div{
width: 250px;
}

Абсолютно все блоки отримають таку ширину, що нам явно не потрібно. Значить, потрібно додати до блоку стильової клас або ідентифікатор. Вони додаються за допомогою атрибутів class і id, а значенням виступає довільне ім’я, але починатися воно повинно з англійської літери. Дозволяється використовувати також цифри, дефіс і знак нижнього підкреслення. Зазвичай найважливіші елементи на сторінці отримують ідентифікатор (шапка, контент, підвал), а менш важливі (пункти меню, заголовки і т. д.) стильові класи.

Я б навіть сказав, що справа не в важливості, а в тому, унікальний це елемент. Зрозуміло, що двох шапок на сайті в принципі бути не може (я маю на увазі головну шапку вгорі сайту), а ось пунктів меню може бути скільки завгодно.

Найголовніше, це запам’ятати – ідентифікатор задається одному елементу, один раз і більше не може записуватися ні для якого іншого елемента. Це унікальна мітка. Стильовий клас можна записувати хоч сотні елементів, а одного блоку можна через пробіл задати скільки завгодно класів. Ось так:

Блок з трьома класами

;

І як ви думаєте, що тепер з ним станеться, коли ми запишемо такі властивості?

.width{
width: 250px;
}
.height{
height: 250px;
}
.border{
border: 10px solid green;
}

До блоку застосовуватися всі ці правила і тепер будь-якого елементу ви не поставили, наприклад, клас border, він отримає товсту зелену рамку 10 пікселів.

Блокова верстка CSS

Кілька блоків на одній лінії

Далі я коротко розповім про двох важливих властивості, які дозволять блокам розташовуватися в одну лінію. Відразу приклад: є контейнер шириною 1000 пікселів. Ваше завдання – впихнути в нього 3 блоки шириною по 300 пікселів, щоб вони розташовувалися на одній горизонтальній лінії. Як це зробити? Є два способи.

По-перше, кожному блоку потрібно задати клас. Взагалі деякі розробники додають блочних елементів загальні класи:

Таким чином, кожний елемент може бути оформлений по-своєму, але всі вони можуть отримати однакові вказівки, тому що всі містять клас inline. А в ньому ми можемо записати так:

.inline{
display: inline-block;
}

Або так:

.inline{
float: left;
}

Блокова верстка CSS

Перше властивість перетворює елементи терміново-блочні. Вони не втрачають своїх властивостей, але можуть розташовуватися в лінію, якщо їм вистачає ширини в батька.

Друга властивість притискає кожен елемент до лівого краю батьківського контейнера. Але оскільки другий і третій елементи не можуть притиснутися до самого краю, вони встануть за першим і теж утворюють лінію.

Відносні розміри

Як робиться в css блокова верстка гумового сайту? Такий шаблон має велику перевагу перед фіксованим, тому що може змінюватися в залежності від ширини вікна. Робиться він в основному за таким принципом: загальний елемент контейнер отримує фіксовану ширину, а вже в ньому містяться структурні частини, яким розмір пишеться у відсотках.

#wrapper{
max-width: 1000px;
}
#content{
width: 66%;
}
#sidebar{
width: 26%;
}

Ось так це все приблизно реалізовується. Решта 8% ширини залишимо на відступи, припустимо. Наш шаблон вже отримає певну адаптивність – він буде стискатися при зменшенні ширини вікна в браузері.

Звичайно, до адаптивної верстки тут далеко, але такі правила закладають основу для неї. Далі за допомогою медіа-запитів ви можете керувати тим, на який ширині перетворити шаблон у одноколонковий, де і коли зменшити ширину і т. д. і т. п.

На цьому на сьогодні я хотів би закінчити. Більше інформації про блокової верстки ви можете отримати з наших преміум-уроків, зокрема з підручника по css для початківців, де описуються основні властивості, які потрібно знати при роботі з блочними елементами.