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

Raisa Kravets -

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

  • Відділення стилю елементів від коду 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

See the Pen overflow by kravets (@raisa69) on CodePen.

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

В геометрії елемента є 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; }


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

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

See the Pen схлопування вертикальних відступів by kravets (@raisa69) on CodePen.

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

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


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

See the Pen випадання вертикальних відступів by kravets (@raisa69) on CodePen.


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

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

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

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

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

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

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

See the Pen border-box by kravets (@raisa69) on CodePen.

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

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

See the Pen lesson-05-border-radius by kravets (@raisa69) on CodePen.

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

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

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

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

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

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

See the Pen Block css by kravets (@raisa69) on CodePen.

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





Завдання 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 століття" можна обрати будь яке. Іконки  навичок можна не додавати поки




Tags:
Нові Старіші