Свойство border-top, border-right, border-bottom и border-left

Все они - стенографические свойства, представляющие собой обобщения для задания свойств border-width, border-style и border-color соответствующих сегментов границы блока. Например:

Р { border-top: 1px solid red; border-right: 2px solid red; border-bottom: 1px solid red; border-left: 2px solid red }

Границы вокруг абзаца будут красными, проведенными сплошной линией. Сверху и снизу толщина границ 1 пиксель, справа и слева - 2 пикселя.

Свойство border

Это свойство является стенографическим и используется для одновременного задания параметров всех четырех сегментов границы: ширины, цвета и стиля. В отличие от стенографических свойств margin и padding, свойство border не может устанавливать различные значения для отдельных сегментов границы. Чтобы это сделать, необходимо использовать другие свойства границы, а именно border-top, border-right, border-bottom и border-left.

P { border: 1px solid red; }

Граница вокруг этого абзаца будет одинаковой со всех четырех сторон: сплошная линия красного цвета толщиной 1 пиксель.

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

Свойства padding-top, padding-right, padding-bottom, padding-left

Индивидуальные свойства, позволяющие задать размеры отступов для каждой стороны в отдельности.

· padding-top - ширина верхнего поля.

· padding-right - ширина правого поля.

· padding-bottom - ширина нижнего поля.

· padding-left - ширина левого поля.

Значения свойств могут задаваться в произвольных единицах длины или в процентах. Проценты вычисляются относительно ширины сгенерированного элементом блока отступов, в качестве значений не допускается задание отрицательных величин - в отличие от полей, где отрицательные значения допустимы.

Свойства padding

Это стенографическое свойство используется для краткой записи значений свойств padding-top, padding-right, padding-bottom и padding-left. Свойство padding может иметь одно, два, три или четыре значения. Значения присваиваются также, как для полей и границ. Рассмотрим такой код:

Р { background-color:#FFC; border:1px solid blue; padding:0.5em 1em; }

 

Отступы

Ha примере этого абзаца рассмотрим, как работают отступы. В стиле для элемента P указано, что фон его блока светло-желтый, вокруг блока имеется синяя граница толщиной 1 пиксель, размеры отступов по 0,5 em сверху и снизу и по 1 em слева и справа.

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

В стиле для элемента P указано, что фон его блока светло-желтый, вокруг блока имеется синяя граница толщиной 1 пиксель, размеры отступов по 0,5 em сверху и снизу и по 1 em слева и справа

В стиле для элемента P указано, что фон его блока светло-желтый, вокруг блока имеется синяя граница толщиной 1 пиксель, размеры отступов по 0 em сверху, снизу, слева и справа

 

Как видно, первый абзац действительно имеет отступы с заданными размерами. А вот у второго абзаца их нет, и текст плотно прилегает к границе блока - особенно четко это видно у левой границы, причем визуально все это выглядит не очень хорошо. Поэтому, вариант с отступами более привлекателен, тем более что размер отступов можно регулировать и для каждой стороны задавать их отдельно.

Различные отступы для отдельных сторон блока можно задавать при помощи именных свойств:

Р { padding-top: 0.5em; padding-right: 10рх; padding-bottom: 3%; padding-left: 1em; }

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

Поля или отступы

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

p_mar { background-color: #FFC; border:1px solid blue; margin: 2em } p_pad { background-color: #FFC; border:1px solid blue; padding: 2em }

Оформим два различных абзаца при помощи этих классов:

<Р class="p_mar"> Для этого абзаца используется класс "p__mar", для него заданы поля размером 2em.</P> <Р class="p_pad"> Для этого абзаца используется класс "p_pad", для него заданы отступы размером 2em.</P>

В результате в окне браузера мы увидим эти абзацы так, как показано на рисунке:

 

Для этого абзаца используется класс "p_mar", для него заданы поля размером 2em.

 

Для этого абзаца используется класс "p_pad", для него заданы отступы размером 2em.

 

Как вы видите, в первом случае, когда используются поля, " пустые " места расположены за пределами границы блока, внутри блока отступов нет. Во втором случае, когда используются отступы, " пустоты " расположены внутри границы блока.

На отступы распространяется фон блока и фоновое изображение, а на поля нет. Поля всегда прозрачны, сквозь них просвечивает фон родительского элемента.

Наконец, третье отличие. Размеры полей могут иметь отрицательные значения, а размеры отступов только положительные.

Рассмотрим такой пример. Пусть мы имеем заголовок первого уровня и следом за ним идет текст некоего абзаца:

<Н1>Заголовок</Н1> <Р>Абзац текста, на который, с помощью задания отрицательных значений для полей, попробуем "надвинуть" заголовок.</Р>

Как такой код будет выглядеть в окне браузера, показано ниже:

Заголовок Абзац текста, на который, с помощью задания отрицательных значений для полей, попробуем "надвинуть" заголовок

Теперь если для заголовка написать стиль с использованием свойства margin и задать ему отрицательное значение, то можно "надвинуть" заголовок на текст, сократив расстояние между блоками. Используем, например, отрицательное значение свойства margin-bottom:

H1 { margin-bottom: -1em; }

После добавления этой строчки кода вид окна браузера изменится, как показано ниже:

Заголовок Абзац текста, на который, с помощью задания отрицательных значений для полей, попробуем "надвинуть" заголовок

 

За счет отрицательного значения нижнего поля (margin-bottom: -1em) мы добились сокращения расстояния между блоками H1 и Р на 1em, в результате чего и произошло наслаивание заголовка на текст абзаца.

Краткое описание всех свойств управления характеристиками блоков в SCC приведено в таблице:

Свойства CSS для управления характеристиками блоков
Свойство	Описание	Пример
margin-top margin-right margin-bottom margin-left margin	Четыре индивидуальных свойства, которые устанавливают величину верхнего, правого, нижнего и левого полей, и стенографическое свойство задания всех полей одновременно (от 1 до 4 значений). Допускается задание значений в единицах длины, процентах от ширины родительского блока. Допустимы отрицательные значения.	TD {margin: 10 рх} H1 {margin-bottom: -1em}
padding-top padding-right padding-bottom padding-left padding	Четыре индивидуальных свойства, которые устанавливают величину верхнего, правого, нижнего, левого отступов, и стенографическое свойство для задания всех отступов одновременно (от 1 до 4 значений). Допускается задание значений в единицах длины, процентах от ширины родительского блока. Отрицательные значения не допускаются.	TD {padding: 10px} P {padding: 0.5em 1em} H1 {padding-bottom: 12pt}
border-top-width border-right-width border-bottom-width border-left-width border-width	Четыре индивидуальных свойства, которые устанавливают ширину верхнего, правого, нижнего и левого сегментов границы блока, и стенографическое свойство для задания толщины всех сегментов границы одновременно (от 1 до 4 значений). Допускается задание значений в единицах длины и при помощи ключевых слов: thin, medium, thick. Отрицательные значения и значения в процентах не допускаются.	Р {border-width: 1px Зрх } Р {border-top-width: lpx; border-right-width: medium; border-bottom-width lpx; border-left-width: thin;}
border-top-color border-right-color border-bottom-color border-left-color border-color	Четыре индивидуальных свойства, которые устанавливают цвет верхнего, правого, нижнего и левого сегментов границы блока, и стенографическое свойство для задания цвета всех сегментов границы одновременно (от 1 до 4 значений). В качестве значений используется любой из трех способов задания цвета.	P {border-color: red} P.green {border-color: rgb (0,255,0)} H1 {border-color: #336}
border-top-style border-right-style border-bottom-style border-left-style border-style	Четыре индивидуальных свойства, которые устанавливают тип линий верхнего, правого, нижнего и левого сегментов границы блока, и стенографическое свойство для задания типа линий всех сегментов границы одновременно (от 1 до 4 значений). В качестве значений используются ключевые слова: none | dotted | dashed | solid | double | groove | ridge | inset | outset	P {border-style: solid}
border-top border-right border-bottom border-left border	Четыре индивидуальных стенографических свойства, которые устанавливают стиль верхнего, правого, нижнего и левого сегментов границы блока в отдельности (значения свойств идут в следующем порядке: border-width, border-style, border-color), и общее стенографическое свойство для определения стиля всех сегментов границы блока одновременно. В последнем случае все сегменты границы будут одинаковыми - задание разных стилей для разных сегментов границы осуществляется через индивидуальные свойства этой группы	P {border: lpx solid red} P { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red }

Ход работы

1. Рассмотреть методы формирования блоков.

2. Создать в своем документе поля, границы и отступы.

3. Уяснить различия между полями и отступами

4. Использовать рассмотренные методы форматирования документа в своем html-документе

 

3. Задание для самостоятельного выполнения

1. Применить рассмотренные правила форматирования отступов.

2. Применить рассмотренные правила форматирования полей.

3. Применить рассмотренные правила форматирования границ.

 

Содержание отчета

1. Выполнить все пункты задания.

2. Представить коды выполненных операций.

3. Представить результат выполненной работы.

4. Исходные файлы сбросить на сервер \\ academy.

 

 

5. Задания и вопросы для аттестации

1.Сформулируйте правила создания границ.

2. Сформулируйте правила создания полей.

3. Сформулируйте правила создания отступов.

4. В каких случаях следует пользоваться отступами, а в каких – полями.