Здравствуйте, уважаемые читатели сайта Uspei.com. На прошлом уроке мы успели поработать с текстом и декорировали его. Следующее свойство, которое нам дает CSS это рамки и блоки. Они очень часто используются при создании и редактировании сайтов, поэтому разберите это урок очень внимательно, и обязательно дополнительно потренируйтесь.
Рамки в CSS
Например, нам необходима рамка вокруг нашего заголовка Н1 с идентификатором id=”header”.
Рамка состоит из 3-х элементов: толщины, стиля и цвета. Давайте по порядку, для начала пропишем толщину:
#header{
border-width: 2px;
}
После чего нам нужно прописать стиль рамки, которые бывают следующими:
Давайте выберем сплошную рамку “solid” и пропишем ее в свойства.
#header{
border-width: 2px;
border-style: solid;
}
И последним пропишем цвет (произвольный):
#header{
border-width: 2px;
border-style: solid;
border-color: #faa21a;
}
Обновляем браузер и вуаля!
И теперь, как мы помним, можно сократить нашу запись и сделать ее немного красивее. Мы убираем виды свойства width, style и color, после чего указываем в таком же порядке в строчку значения всех свойств для общего “border”.
#header{
border: 2px solid #faa21a;
}
БЛОЧНАЯ МОДЕЛЬ (ВАЖНО!)
Обратите внимание, что рамка у нас очерчивает не только сам текст, но занимает все свободное пространство, что дает ей браузер. В высоту наша рамка занимает пространство, равное высоте текста. На самом деле для браузера каждый элемент это своего рода блок, который занимает ВСЮ ширину строки. Вот как отражает браузер несколько элементов, если им также задать рамки.
То есть браузер разбивает все на блоки, которые имеют свою структуру:
В центре блока находится содержимое (текст, картинка, таблица и т.д.) далее идет внутренний отступ “padding”, затем сама рамка “border”, потом внешний отступ или поле “margin”. Величину “padding” и “margin” браузер изначально задает по умолчанию и она зависит от вида браузера (обычно несколько пикселей) и их значения можно менять как в большую сторону так и в меньшую. Обратите внимание, что текст в данном уроке не вплотную прилипает к краю, а имеется некоторый зазор – это расстояние сформировано за счет внутреннего и внешнего отступов “padding” и “margin” текста и самого блока.
Например, давайте зададим величину внутреннего отступа “padding” нашему заголовку h1 с id=”header” в 40 px.
#header{
border: 2px solid #faa21a;
padding: 40px;
}
Мы видим, что внутренний отступ (фиолетовая часть) увеличился на 40px со всех сторон. Внешний отступ (желтая часть) мы пока не изменяли, поэтому он стоит по умолчанию установленному браузером. Теперь давайте уберем внешний отступ (а можно и увеличить – попробуйте!)
#header{
border: 2px solid #faa21a;
padding: 40px;
margin: 0;
}
Но на этом еще не все. Внешний и внутренний отступ можно задавать как сразу, например, для всего “padding”, так и для верха, низа, слева и справа. Аналогично и для “margin”. Напомню: top это верх, bottom это низ, left – лево, right – право. Например:
#header{
border: 2px solid #faa21a;
padding-left: 40px;
margin: 0;
}
#header{
border: 2px solid #faa21a;
padding-top: 40px;
margin: 0;
}
Таким образом можно менять внутренние и внешние отступы сверху снизу справа и слева, что ОЧЕНЬ часто используется в CSS.