CSS. Рамки и блоки (Урок 4)

На прошлом уроке мы работали с текстом и декорировали его. Следующее свойство, которое нам дает CSS это рамки и блоки. Они очень часто используются при создании и редактировании сайтов, поэтому разберите это урок очень внимательно, и обязательно дополнительно потренируйтесь.

Например, нам необходима рамка вокруг нашего заголовка Н1 с идентификатором id=»header».

css

Рамка состоит из 3х элементов: толщины, стиля и цвета. Давайте по порядку, для начала пропишем толщину:

#header{
border-width: 2px;
}

После чего нам нужно прописать стиль рамки, которые бывают следующими:

css

Давайте выберем сплошную рамку «solid» и пропишем ее в свойства.

#header{
border-width: 2px;
border-style: solid;
}

И последним пропишем цвет (произвольный):

#header{
border-width: 2px;
border-style: solid;
border-color: #faa21a;
}

Обновляем браузер и вуаля!

css

И теперь, как мы помним, можно сократить нашу запись и сделать ее немного красивее. Мы убираем виды свойства width, style и color, после чего указываем в таком же порядке в строчку значения всех свойств для общего «border»

#header{
border: 2px solid #faa21a;
}

БЛОЧНАЯ МОДЕЛЬ (ВАЖНО!)

Обратите внимание, что рамка у нас очерчивает не только сам текст, но занимает все свободное пространство, что дает ей браузер. В высоту наша рамка занимает пространство, равное высоте текста.  На самом деле для браузера каждый элемент это своего рода блок, который занимает ВСЮ ширину строки. Вот как отражает браузер несколько элементов, если им также задать рамки.

css

То есть браузер разбивает все на блоки, которые имеют свою структуру:

css

В центре блока находится содержимое (текст, картинка, таблица и т.д.) далее идет внутренний отступ «padding», затем сама рамка «border», потом внешний отступ или поле «margin». Величину  «padding»  и «margin»  браузер изначально задает по умолчанию и она зависит от вида браузера (обычно несколько пикселей) и их значения можно менять как в большую сторону так и в меньшую. Обратите внимание, что текст в данном уроке не вплотную прилипает к краю, а имеется некоторый зазор — это расстояние сформировано за счет внутреннего и внешнего отступов «padding» и «margin» текста и самого блока.

Например, давайте зададим величину внутреннего отступа «padding» нашему заголовку Н1 с id=»header»  в 40 px.

#header{
border: 2px solid #faa21a;
padding: 40px;
}

css

css

Мы видим, что внутренний отступ (фиолетовая часть) увеличился на 40px со всех сторон. Внешний отступ (желтая часть) мы пока не изменяли, поэтому он стоит по умолчанию установленному браузером.  Теперь давайте уберем внешний отступ (а можно и увеличить — попробуйте!)

#header{
border: 2px solid #faa21a;
padding: 40px;
margin: 0;
}

css

Но на этом еще не все. Внешний и внутренний отступ можно задавать как сразу, например, для всего «padding», так и для верха, низа, слева и справа. Аналогично и для «margin». Напомню: top это верх, bottom это низ, left — лево, right — право. Например

#header{
border: 2px solid #faa21a;
padding-left: 40px;
margin: 0;
}

css

#header{
border: 2px solid #faa21a;
padding-top: 40px;
margin: 0;
}

css

Таким образом можно менять внутренние и внешние отступы сверху снизу справа и слева, что ОЧЕНЬ часто используется в CSS.

На этом урок закончим и перейдем к углубленному изучению блоков в css.

Удачи вам! До скорых встреч на страницах блога VyacheslavDanilov.ru


Вам также понравится...

Смотри и удивляйся:
Десерт

*посмотреть еще ролик можно обновив страницу в браузере

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *