Наука + Бизнес = $$$

Карта Сайта

Суббота, 21.10.2017, 11:29
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139

Урок №11: Блочные элементы и их свойства

Блочные элементы и их свойства

Сегодня блочная структура сайта самая популярная и эффективная среди веб-мастеров. Табличная структура сайта также еще встречается, однако несколько реже. Фреймовая структура имеет ряд недостатков, поэтому ее можно встретить довольно редко и в исключительных случаях.

Элементы HTML-кода делятся на два типа - блочные и строчные. К блочным относятся элементы, такие как P, Div, H, которые имеют абзацные отступы. К строчным относятся - strong, em, ins и много других, которые выводятся линейной строкой. На рисунке справа изображен блок (зеленым), он имеет прямоугольную форму.

Width - ширина блока и height - высота, определяется его содержимым, при этом, отступы и поля не учитываются в размере блока.

Padding - внутренние отступы (от рамки до содержимого блока), необходимо задавать, чтобы содержимое блока не находилось вплотную к его рамке.

Border - рамка и граница блока, по умолчанию она невидимая (значение - 0).

Margin - внешние отступы, создают определенное пространство вокруг блока.

Создадим два блока абзацев и зададим в таблице стилей такие параметры:

p{
border:1px solid blue;
padding:10px;
margin:50px;
width:100px;
height:50px;
}

Пример блока параграфа

Пример блока параграфа

В результате: содержимое абзацев имеет синюю рамку толщиной в 1 пиксел, ширину - 100 пикселей, высоту - 50 пикселей, внутрений отступ от рамки до содержимого блока - 10 пикселей, внешний отступ - 50 пикслей (видно по расстояниею между двумя блоками).

Как правило, для работы с блоками используют элементы div и span. Div - создает блок с абзацными отступами, а span - создает строчный блок. Ниже рассмотрим свойства и значение блоков более подробно.


Рамка блока

Границу можно задать для каждой из четырех сторон содержимого, для этого используются такие свойства:

  • border-top - отвечает за верхнюю границу
  • border-right - отвечает за правую границу
  • border-bottom - отвечает за нижнюю границу
  • border-left - отвечает за левую границу

Каждой стороне рамке можно задать свои характеристики(цвет, стиль, толщину), для этого в свойство необходимо через дефис написать соответствующие ключи. Например: border-top-color - задаст цвет верхней стороне рамки. Если задать характеристики всей рамки, то можно использовать сокращенную запись:

  • border-color - цвет всех четырех сторон рамки. В значении можно указать любой цвет или его код из Таблицы цветов
  • border-width - толщина всех четырех сторон рамки. В значении можно указать любую Единицу измерения
  • border-style - стиль всех четырех сторон рамки.
Стили рамок

Стиль рамки определяется следующими значениями:

  • none - рамка отсутствует.

  • dotted - рамка состоит из точек. border-style:dotted

  • dashed - рамка в виде пунктирной линии. border-style:dashed

  • solid - рамка в виде сплошной линией. border-style:solid

  • double - рамка в виде двойной сплошной линией. border-style:double

  • groove - рамка в виде вдавленной объемной линией. border-style:groove

  • ridge - рамка в виде выпуклой объемной линией. border-style:ridge

  • inset - рамка создает вид, что блок выглядит вдавленным. border-style:inset

  • outset - рамка создает вид, что блок выглядит выпуклым. border-style:outset

Эффективно использовать сокращенную запись параметров рамки: p{border:2px dashed red;}, где первое значение толщина, второе - стиль и третье - цвет рамки абзаца.

Ширина рамки - 2 пиксела, стиль - dashed, цвет - красный.


Внешние отступы от блока

Во круг блочного элемента можно создать свободное пространство с помощью свойства margin, в значение которого необходимо указать единицу измерения отступа. Есть возможность задать разную величину для отступа каждой стороны элемента, для этого существуют такие свойства:

  • margin-top - ширина внешнего отступа верхней стороны.
  • margin-right - ширина внешнего отступа правой стороны.
  • margin-bottom - ширина внешнего отступа нижней стороны.
  • margin-left - ширина внешнего отступа левой стороны.

Для удобства можно использовать сокращенную запись - p{margin:5px 10px 15px 20px;}, однако очень важно придерживаться порядка вставки значений. Первой значение(5пикселей) - верхний отступ, второе(10пикселей) - правый отступ, третье(15пикселей)- нижний отступ, четвертое(20пикселей) - левый отступ. Чтобы запомнить порядок указания значений, двигайтесь по часовой стрелке, начиная с 12 часов.

Если вертикальные (верхний и нижний) и горизонтальные (левый и правый) отступы совпадают, то запись сократится до двух значений: p{margin:5px 10px} - 5пикселей вертикальные отступы(верхний и нижний), 10пикселей - горизонтальные отступы(правый и левый).

Если внешние отступы, всех четырех стороны одинаковые, достаточно задать только одно значение: p{margin:5px} - в таким случае от содержимого параграфа, со всех сторон, будет отступ с шириной 5 пикселей.

Значение свойства margin может быть задано любой Единицей измерения, но, как правило, задается в пикселах. Также величина отступов может принимать отрицательное значение, что иногда может пригодиться.


Внутренние отступы блока

Внутренние отступы позволяют отделить содержимое блока от его рамки, с помощью свойства padding, в значение которого необходимо указать единицу измерения отступа. Есть возможность задать разную величину для внутреннего отступа от каждой стороны элемента, для этого существуют такие свойства:

  • padding-top - ширина внутреннего отступа от верхней границы.
  • padding-right - ширина внутреннего отступа от правой границы.
  • padding-bottom - ширина внутреннего отступа от нижней границы.
  • padding-left - ширина внутреннего отступа от левой границы.

Также как и с внешними отступами, с внутренними работает сокращенная запись p{padding:5px 10px 15px 20px;}, также очень важно придерживаться порядка вставки значений. Первой значение(5пикселей) - верхний отступ, второе(10пикселей) - правый отступ, третье(15пикселей)- нижний отступ, четвертое(20пикселей) - левый отступ. Чтобы запомнить порядок указания значений, двигайтесь по часовой стрелке, начиная с 12 часов.

В целом свойство padding работает аналогично свойству margin, только отвечает за внутренние отступы содержимого блока от его границы. Значение величины padding всегда должно быть положительным( по умолчанию 0).

Блоки широко используются в верстке, так как поддерживают практически все элементы HTML. Можно задать фон блока - background:цвет; , цвет текста в блоке, создать в нем форму, таблицу, разместить изображение и т.д.

На следующем уроке рассмотрим виды позиционирования блоков и плавающие блоки: Позиционирование блоков


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru