Лабораторна робота № 9 Блоки у css
Теоретична інформація
У мові HTML всі елементи можна розділити на два типи: блокові і рядкові. Блокові елементи створюють візуально самостійну структурну одиницю - блок.
Прикладом блокових елементів можуть бути елементи H1-H6, Р, DIV. Вони відокремлюються від інших абзацними відступами. Рядкові елементи не створюють візуальної самостійної структурної одиниці і виводяться лінійної рядком. Приклади: елементи I, B, U, S, ЕМ та ін.
1.1. Блоки.
Два блочних елемента не можуть розташовуватися в одному рядку, а два рядкових, відповідно, можуть.
Модель подання документів в CSS також використовує поняття блоків. Блоки в CSS являють собою самостійну структурну одиницю, що має форму прямокутника. Кожен елемент в дереві елементів документа є самостійним блоком. З цього випливає, що в CSS є блоки, які структурно відокремлені від інших, а є рядкові блоки, які можуть знаходитися всередині структурних блоків.
Кожен такий блок обов'язково має інформаційну частину, або вміст, яким може бути текст, зображення або інша інформація. Ця частина блоку називається його контентом або вмістом. Наприклад, для елемента р вмістом блоку є текст абзацу.
Навколо області контенту можуть бути порожні, не зайняті вмістом області, звані полями (padding). З точки зору дизайну, поля забезпечують для вмісту блоку естетично більш привабливий вигляд. При наявності полів певного розміру текст не примикає впритул до границь блоку. Можна провести аналогію з полями, встановлюваними при друку документів на папері. Якщо полів не було б, то текст починався б прямо біля краю аркуша. При наявності полів є не зайняті текстом області уздовж країв аркуша паперу, і текст, надрукований на аркуші, в цьому випадку читати приємніше і зручніше.
Безпосередньо за полями проходить межа блоку (border), яка може мати певну товщину і стиль ліній. Ширина блоку може бути довільною – від нульової (границя в цьому випадку не видна) до довільно заданої в одиницях вимірах довжини. Стиль ліній може бути різним, від простої лінії до об'ємних варіантів. Крім того, границя може мати довільний колір.
Також блок може мати відступи (margin), це додатковий вільний простір навколо границі блоку. Згідно специфікації CSS, поля, границі та відступи не входять в ширину блоку. Таким чином, вказуючи ширину блоку, ви задаєте ширину лише тієї частини блоку, яка відведена для вмісту. На малюнку наведена узагальнена структура блоку в CSS.
Мал.
1.Структура блока у
CSS
Всі поля, границі та відступи діляться відповідно на верхні, нижні, праві та ліві, для кожного з них можна задати значення незалежно від інших. Фон для різних областей блоку задається таким чином:
Область вмісту: фон задається атрибутом background елемента, що породжує даний блок.
Поля: фон задається атрибутом background елемента, що породжує даний блок.
Границі: вид границь визначається атрибутами границь елемента, що породжує блок. Фону вони не мають і найчастіше це лінії певного стилю (пунктирна, суцільна, тощо), кольору і товщини.
Відступи: область відступів завжди прозора, відповідно, крізь неї може просвічувати фон батьківських елементів. Таким чином, відступи як би успадковують фон від батьківського елементу.