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

Блокова верстка - в даний момент є основним способом верстки. На відміну від табличної блокова верстка має ряд переваг:

Відділення стилю елементів від коду html;
Можливість накладення одного шару на інший - така можливість багато в чому полегшує позиціонування елементів.
Краща індексація пошуковими системами;
Висока швидкість завантаження сторінки, складається від взаємно незалежних елементів;
Легкість створення візуальних ефектів (випадають меню, списків, спливаючих підказок).

Основним елементом, що застосовується в блоковій верстці, є тег <div>. Частина коду, відокремлена цим тегом, називається шаром. Тег <div> - це так званий контейнер (блок), який може містити форматований текст, зображення та ін

Приклад блочної верстки:

Все, що позначено рожевими прямокутниками, прив'язано за допомогою блоків div. Самі блоки, можуть не відображатися на сторінці, а служити тільки як контейнери для інших елементів. Отже, блоки div:

Блокові елементи які розтягуються на всю ширину екрану
Якщо всередині блоку не міститься елементів, або блоку не задана висота - то висота блоку складає 0px. Тобто блоку не видно на сторінці
Не має кольору фону, не має обведення. Щоб побачити блок, потрібно надайти йому колір фону

Структура блоку

Кожен блок складається:

· з вмісту елементу,

· відступу між вмістом і кордоном блоку (padding-right, padding-left, padding-top, padding-bottom)

· самого кордону блоку (border-left, border- right, border- top, border- bottom)

· а також поля (відстань від кордону блоку до іншого елементу) блоку (margin- left, margin- right, margin- top, margin- bottom)

Параметри відступів у блоці встановлюються по часовій стрілці!

Властивості блоку

Висота і ширина

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

Кілька порад для використання цих властивостей.

Не ставте елементам фіксовану висоту, нехай вона визначається контентом. Точно встановлена висота призводить до проблеми переповнення, коли контенту більше, ніж елемент може вмістити.
Більшості елементів задається тільки ширина. Вказувати одночасно width і height варто тільки декоративним елементам з фіксованим розміром, наприклад іконкам.
Ширину можна задавати не тільки в px, em або rem, але й у відсотках. У такому разі ширина блоку буде розрахована як відсоток від ширини батька.

*Властивість*	*Опис*	*Приклад* *CSS*
height	Властивість height визначає висоту елементу. *Синтаксис:* height: значення \| відсотки \| auto \| inherit *Значення: Значення* - пікселі (px), дюйми (in), пункти (pt). % - висота елемента обчислюється залежно від висоти батьківського елементу. Якщо батьківський явно не вказано, то в його якості виступає вікно браузера. auto - встановлює висоту виходячи з вмісту елемента	div{ color: blue; width: 200px; height: 50%; }
max-height	Вказує максимальну фіксовану висоту. *Синтаксис:* max-height: значення \| відсотки \| none \| inherit *Значення:* значення - пікселі (px), відсотки (%). Негативні значення не допускаються. None - Скасовує дію цієї властивості. Inherit - Успадковує значення батьківське.	div {max-height: 300px}
max-width	Вказує максимальну фіксовану ширину. *синтаксис* max-width: значення \| відсотки \| none \| inherit значення- пікселі (px), відсотки (%). Негативні значення не допускаються. None - Скасовує дію цього властивості. Inherit - Успадковує значення батьківські.	div{ width: 70%; max-width: 900px; height: 100px; }
min-height	Вказує мінімальну фіксовану висоту. *синтаксис* min-height: значення \| відсотки \| inherit значення - пікселі (px), відсотки. Негативні значення не допускаються. inherit - успадковує значення батьківські	div{height: 80%; min-height: 200px; width: 700px; }
min-width	Вказує мінімальну фіксовану ширину. *синтаксис* min-width: значення \| відсотки \| inherit значення - пікселі (px), відсотки. Негативні значення не допускаються. inherit - успадковує значення батьківські	div{width: 70%; min-width: 400px; height: 100px; }
overflow	Визначає, що робити, якщо вміст елемента перевершує розмір області елемента. *Синтаксис* overflow: auto \| hidden \| scroll \| visible \| inherit *Значення: Visible* - Відображається весь зміст елемента, навіть за межами встановленої висоти і ширини. Hidden - Відображається лише область всередині елемента, інше буде закрито. Scroll - Завжди додаються смуги прокрутки. Auto - Смуги прокрутки додаються тільки при необхідності. Inherit - Наслідує батьківське значення.	div {width: 150px; height: 150px; overflow: scroll;}
overflow-x	Вказує, обрізати чи ні лівий/правий край вмісту - якщо воно переповнює доступну область елемента для його змісту.	div {overflow-x: hidden;}
overflow-y	Вказує, обрізати чи ні верхній/нижній край вмісту - якщо воно переповнює доступну область елемента для його змісту.	div {overflow-y: scroll;}
resize	Вказує, чи може розмір елемента змінюватися користувачем. Cинтаксис resize: none\|both\|horizontal\|vertical\|initial\|inherit; *Значення: None -* Розміри елемента не змінюються. Both - Можна змінювати розміри елемента по горизонталі та вертикалі. Horizontal - Можна змінювати розміри елемента тільки по горизонталі. Vertical - Можна змінювати розміри елемента тільки по вертикалі. Initial - Встановлює цю властивість в значення за замовчуванням. inherit Успадкує значення від свого батьківського елемента.	div { resize: both; overflow: auto; }
width	Властивість width визначає ширину елементу. Висота цього елементу буде залежною від змісту елементу.	div{color: blue; width: 200px;}

Властивість overflow

Відступи, поля

В геометрії елемента є 4 сторони: верх (top), право (right), низ (bottom) і ліво (left). Саме в такому порядку за годинниковою стрілкою, починаючи зверху, задаються значення збірних властивостей padding, margin і border.

Зовнішні відступи використовуються для створення проміжку між двома сусідніми елементами.

*Властивість*	*Опис*	*Приклад CSS*
margin-left	Визначення величини зовнішнього поля ліворуч від елементу. *Синтаксис* margin-left: значення \| auto \| inherit Значення: значення: в пікселях (px), відсотках (%). Значення може бути як позитивним, так і негативним числом. Auto - Вказує, що розмір відступів буде автоматично розрахований браузером. Inherit - Успадковує значення батьківське.	h2 {margin-left: 20px} img { margin-right: 20pt} p { margin-left: 2cm}
margin-right	Задання величини зовнішнього поля праворуч від елементу.	h2 {margin-right: 20px} img { margin-right: 20pt} p { margin-left: 2cm}
margin-top	Визначення величини зовнішнього поля зверху від елементу.	h2 {margin-top: 10px} p{margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px;}
margin-bottom	Задання величини зовнішнього поля знизу від елементу.	h2 {margin-bottom: 10px}.
padding-left	Визначення ширини внутрішнього відступу від елементу до бордюру ліворуч.	h2 {padding-left: 5px} h1 {background: green; padding: 10px 10px 10px 60px;} img {padding-left: 120px;}
padding-right	Задання ширини внутрішнього відступу від елементу до бордюру праворуч.	h2 {padding-right: 5px}.
padding-top	Визначення ширини внутрішнього відступу від елементу до бордюру зверху.	h2 {padding-top: 10px}.
padding-bottom	Задання ширини внутріш нього відступу від елементу до бордюру знизу.	h2 {padding-bottom: 5px}.

Рамка і контур

*Властивість*	*Опис*	*Приклад* *CSS*
border	Універсальна властивість border дозволяє одночасно встановити товщину, стиль і колір лінії навколо елемента.. *синтаксис* border: [border-width \|\| border-style \|\| border-color] \| inherit *значення* border-width - визначає товщину лінії. border-style - керування типом лінії border-color встановлює колір лінії inherit успадковує значення батьківське.	border: 4px
border-bottom	Дозволяє використовувати значення основних властивостей для нижньої межі рамки в одному оголошенні. *синтаксис* border-bottom: [border-width \|\| border-style \|\| border-color] \| inherit	{border-bottom-width: 2px; }
border-bottom-color	Задає колір для нижньої межі рамки. Синтаксис border-bottom-color: колір \| transparent \| inherit Значення Transparent - встановлює прозорий колір. Inherit - Наслідує батьківське значение	{border-bottom-color: white;}
border-bottom-left-radius	Встановлює радіус округлення лівого нижнього кутка рамки. Якщо рамка не задана, то округлення також відбувається і з фоном *Синтаксис:* border-bottom-left-radius: [значення \| відсотки] [значення \| відсотки] *значення:* значення - px, cm, in, em і відсотки,	{border-bottom-left-radius: 20px}
border -bottom-right-radius	Дозволяє зробити округлий кордон нижнього правого кута.	{border-bottom-right-radius: 20px}
border-bottom-style	Визначає стиль для нижньої межі рамки.	{border-bottom-style: solid; }
border-bottom-width	Визначає ширину для нижньої межі рамки.	{border-bottom-width: 7px; }
border-color	Визначення кольору рамки, яке впливає на всі її сторони. Варіанти задання і застосування значень до сторін рамки (для вказаного одного значення, двох і т.д.) аналогічні двом попереднім властивостям: border-width і border-style.	h2 {border-color: blue}, h2 {border-style: blue red}, h2 {border-style: black #f2f2f2 yellow}, h2 {border-style: green #f2f2f2 blue yellow}.
border-image	Дозволяє використовувати зображення в якості рамки.	{border-image: url(images/image.png) }
border-left	Дозволяє використовувати значення основних властивостей для лівої межі рамки в одному оголошенні.	{border-left: 2px dotted green; }
border-left-color	Задає колір для лівої межі рамки.	border-left-color: #fc0;
border-left-style	Визначає стиль для лівої межі рамки.	border-left-style: double;
border-left-width	Визначає ширину для лівої межі рамки.	border-left-width: thick;
border-radius	Дозволяє змінити форму кутів.	{border-radius: 40px 10px}
border-right	Змінює зовнішній вигляд правої межі рамки.	{border-right: 1px solid red; }
border-right-color	Задає колір для правої межі рамки.	{border-right-color: navy; }
border-right-style	Визначає стиль для правої межі рамки.	{border-right-style: dotted; }
border-right-width	Задає ширину для правої межі рамки.	{border-right-width: 2px; }
border-style	Встановлює стиль кордону навколо елемента *Синтаксис* border-style: [none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset] {1,4} \| inherit	h2 {border-style: solid}, h2 {border-style: solid }, h2 {border-style: dotted}, h2 {border-style: outset}.
border-top	Змінює зовнішній вигляд верхньої межі рамки.	{border-top: 1px solid red; }
border-top-color	Задає колір для верхньої межі рамки.	{border-top-color: #ccc; }
border-top-left-radius	Дозволяє зробити округлу кордон верхнього лівого кута.	{border-top-left-radius: 10px; }
border-top-right-radius	Дозволяє зробити округлу кордон верхнього правого кута.	{border-top-right-radius: 10px; }
border-top-style	Визначає стиль для верхньої межі рамки.	{border-top-style: double; }
border-top-width	Визначає ширину для верхньої межі рамки.	{border-top-width: 7px; }
border-width	Означення товщини рамки навколо елементу *Синтаксис* border-width: [значення \| thin \| medium \| thick] {1,4} \| inherit *Значення: thin* (2 пікселя), medium (4 пікселі) і thick (6 пікселів) задають товщину лінії.	h2 {border -width: 4px}; h2 {border-width: 4px 3px}; h2 {border-width: 4px 3px 2px}; h2 {border-width: 4px 3px 2px 1px}
outline	Утворює певну межу навколо елементу.	{outline: 1px solid #666; }
outline-color	Визначає колір зовнішнього кордону.	{outline-color: #be8b5e; }
outline-offset	Зрушує зовнішній кордон на задану відстань від краю елемента.	{outline-offset: -10px; }
outline-style	Вказує стиль для зовнішнього кордону.	{outline-style: none; }
outline-width	Вказує ширину для зовнішнього кордону.	{outline-width: 3px; }

Схлопування вертикальних відступів

Вертикальні відступи сусідніх блокових елементів не додаються, а вибирається найбільший з двох. Схлопування відступів виконується тільки для блокових елементів у нормальному потоці документа.

Випадання вертикальних відступів

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

У прикладі задано верхній відступ 40px для div.inner-box, а в результаті відсунеться не він сам від верху div.outer-box, а весь div.outer-box - від краю екрану.

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

Властивість border

Збірна властивість контролює ширину, стиль і колір рамки (межі) елемента.

border: ширина стиль колір;

Також існують властивості для того, щоб задати ці значення окремо.

border-width: ширина;
border-style: стиль;
border-color: колір;

Існує багато стилів рамок, найпопулярніші значення - це solid, dashed і dotted.

Закруглена рамка

Для того щоб закруглити всі кути рамки, існує збірна властивість border-radius. Значенням можуть бути як абсолютні, так і відносні одиниці.

Наступні властивості дозволяють закруглити кожен кут рамки окремо.

/* верхній лівий кут */
border-top-left-radius: значення;

/* верхній правий кут */
border-top-right-radius: значення;

/* нижній правий кут */
border-bottom-right-radius: значення;

/* нижній лівий кут */
border-bottom-left-radius: значення;

Приклад реалізації блоку на веб-сторінці

Рекомендовані відео по темі:

Завдання 1

Створити файл з таким кодом:

<html>
<head>
<meta charset="utf-8">
<title>width-height</title>
</head>
<body>
<div class="layer1">
<p><strong>Властивість: height</strong> встановлює висоту блокових або замінних елементів. Висота не включає товщину кордонів навколо елемента, значення відступів і полів.</p>
</div>
<div class="layer2">
<p><strong>Властивість: width</strong> встановлює ширину блокових або замінних елементів. Ширина не включає товщину кордонів навколо елемента, значення відступів і полів. Висота цього елементу буде залежною від вмісту елементу.
</p>
</div>
</body>

</html>

У файлі css вказати такі властивості для 1 блоку:

кордон: товщина - 1px, пряма лінія, колір - #ccc;
висота блоку: 200px;
ширина блоку: 500px;
додати смуги прокрутки для блоку;
колір фону блоку: #fc0;
ширина внутрішнього відступу від вмісту блоку до кордону: 7px;

для 2 блоку:

ширина блоку: 50%;
колір фону: #ff0;
ширина внутрішнього відступу від вмісту блоку до кордону: 5px;

Завдання 2

Створити div розміром 50х50px. Задати йому кордон товщиною 3px. Колір кордону - синій. Застосувати до елементу в якості кордону суцільну лінію, потім лінію з точок, і потім пунктир. Спостерігати зміни виду кордону.

Завдання 3

Створеному div округлити всі кути на 15px.

Завдання 4

Створеному div округлити верхні кути на 20px, а всі інші на 5px.

Завдання 5

Створеному div скруглити кути на 100px. Звернути увагу як зміниться зовнішній вигляд блоків. Даним способом створюють круглі елементи.

Завдання 6

Додайте до запропонованого HTML коду оформлення, щоб отримати малюнок мішеней представлений нижче (товщина ліній 10px, радіус заокруглення 200 px, відстань між блоками 15 px, найменший блок має розмір 50 на 50 px, найбільший блок: 150 на 150 px.

Завдання 7

Створити вертикальне меню такого зразка:

ширина меню - 200 рх
зовнішній відступ знизу - 5рх
колір- синій
розмір шрифта - 13рх, Arial
Рамка - 1 рх, суцільна лінія, колір - синій
Елементи виводяться на сторінці як блочні
міжрядковий інтервал - 30 рх
При наведенні курсору на посиланні - товщина ліній шрифту змінюється на жирний

Завдання 8

Створити веб-сторінку базових навичок 21 століття без розташування блоків у один рядок, але з урахуванням кольору фону блоків, заокруглень, кольору шрифту, рівнів заголовків, відступів, обрамлення згідно малюнку. Зображення, яке ілюструє "навички 21 століття" можна обрати будь яке. Іконки навичок можна не додавати поки