• «длина» – вы указываете фиксированную ширину поля.
• «проценты» – вы указываете значения поля в процентах. Процентное соотношение вычисляется относительно ширины сгенерированного блока.
В отличие от свойств поля свойства отступов не могут принимать отрицательные значения, и для них не может быть задано значение auto. Как и для свойств поля, процентные соотношения, задаваемые для свойств отступов, вычисляются относительно ширины сгенерированного блока.
Свойство padding является сокращенной записью всех четырех свойств отступов: padding-top, padding-right, padding-bottom и padding-left. Свойство padding работает, как и сокращенная запись для полей. Если свойство принимает только одно значение, то оно применяется ко всем отступам. Если свойство принимает два значения, то первое применяется к верхнему и нижнему отступам, а второе – к правому и левому отступам. Если оно принимает три значения, то первое значение применяется к верхнему, второе – к левому и правому, а третье – к нижнему отступу. Если свойство принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому отступам соответственно.
Фон отступов будет использовать цвет или изображение, заданные этому элементу с помощью свойства background:
h1 {
background: white;
padding: 1em 2em;
}
В приведенном примере ширина вертикальных (padding-top и padding-bottom) и горизонтальных (padding-right и padding-left) отступов устанавливается равной 1 em и 2 em соответственно. Напомню, что единица измерения em задается относительно размера шрифта элемента: 1 em равен размеру используемого шрифта.
9.7. Границы
Для всех элементов страницы вы можете задать границы, а также установить их ширину, цвет и стиль. Начнем изучение границ со свойства ширины.
Ширина границы
Рассмотрим свойства border-top-width, border-right-width, border-bottom-width, border-left-width, которые определяют значение ширины верхней, правой, нижней и левой границы элемента страницы соответственно. Все свойства, рассматриваемые в данном разделе, могут принимать одно из следующих значений:
• thin – тонкая граница;
• medium – граница средней толщины;
• thick – толстая граница;
• «длина» – толщина границы задается числом. Естественно, что число, заданное в качестве значения ширины границы, не может быть отрицательным.
Надо отметить, что каждый браузер будет по-своему устанавливать числовое значение для ключевых слов thin, medium и thick, соблюдая такое правило: thin <= medium <= thick.
Для границ также существует свойство border-width, позволяющее одновременно установить значения всем четырем свойствам: border-top-width, border-right-width, border-bottom-width и border-left-width. Причем, если задать для border-width только одно значение, оно будет применяться ко всем границам. Если задать два значения, то первое будет применяться к верхней и нижней границам, а второе – к правой и левой. Если указать три значения, то первое значение будет применяться к верхней границе, второе – к левой и правой, а третье – к нижней границе. Если же задать четыре значения, то они будут применяться к верхней, правой, нижней и левой границам соответственно.
Рассмотрим три CSS-правила:
h1 { border-width: thin } /* тонкая */
h1 { border-width: thin thick } /* тонкая толстая */
h1 { border-width: thin medium thick } /* тонкая средняя толстая */
В первой строке записано правило, которое будет создавать четыре тонкие границы для всех элементов H1. Во второй строке записано правило, которое для элементов H1 создаст тонкую верхнюю и нижнюю границы и толстую правую и левую границы. Третье правило в третьей строке для элементов H1 в документе задаст их верхнюю границу тонкой, левую и правую – средней, а нижнюю – толстой ширины.
Теперь рассмотрим, как можно задавать границе цвет.
Цвет границы
Как и для ширины, для задания цвета существует четыре свойства для четырех сторон: border-top-color, border-right-color, border-bottom-color, border-left-color и сокращенная запись – border-color. Они задают цвет верхней, правой, левой и нижней границ соответственно. Для всех этих свойств вы можете либо задать значения цвета, либо использовать ключевое слово transparent, которое сделает границу прозрачной. Если задать значение transparent, то граница будет невидимой, даже если она имеет какую-то ширину.
Рассмотрим такой пример: p {
p {
border-width: 2px
border-color: blue;
}
Для элемента P будет создана граница синего цвета размером два пиксела.
Стиль границы
Для задания стиля границы используются следующие свойства: border-top-style, border-right-style, border-bottom-style, border-left-style и сокращенная запись – border-style. Свойства стиля границы определяют стиль линии (сплошная, двойная, пунктирная и т. д.), выступающей в качестве границы. Все свойства могут принимать одно из следующих значений.
• none – граница отсутствует. В результате значение свойства border-width будет равно нулю.
• hidden – подобно значению none, за исключением сценария разрешения конфликтов между границами, используемого для элементов таблицы.
• dotted – граница отображается пунктирной линией.
• dashed – граница выводится штрихпунктирной линией.
• solid – граница отображается сплошной линией.
• double – граница выводится двумя непрерывными линиями. Сумма значений ширины двух линий и расстояния между ними равна значению свойства border-width.
• groove – граница отображается вдавленной линией.
• ridge – противоположно значению groove: граница отображается выпуклой линией.
• inset – весь блок выглядит вдавленным.
• outset – противоположно значению inset: весь блок выглядит выпуклым.
Все границы выводятся поверх фоновой заставки блока. Цвет границ для значений groove, ridge, inset и outset зависит от значения свойства элемента color.
Свойство border-style определяет стиль всех четырех сегментов границ. Оно может иметь от одного до четырех значений, каждое из которых присваивается различным сегментам подобно тому, как это происходит у свойства border-width.
Рассмотрим такой пример:
#xyz { border-style: solid dotted }
Здесь горизонтальные сегменты границы будут иметь значение solid, а вертикальные – dotted.
Следует отметить, что, поскольку начальное значение стиля границы равно none, она не будет видна до тех пор, пока для нее не будет указан другой стиль.
9.8. Работа с блоками
В этом разделе мы рассмотрим работу с блоками и слоями. Изучив данный материал, вы сможете указывать точное место на странице, где по вашему желанию и будут размещаться элементы страницы.
Выбор схемы позиционирования
Свойства position и float определяют алгоритм позиционирования, используемый для определения положения блока.
Рассмотрим значения этого свойства и их интерпретацию браузером.
• static – является обычным блоком, позиционируемым в соответствии с нормальным потоком. Свойства left и top не применяются.
• relative – положение блока рассчитывается в соответствии с нормальным потоком (оно называется нормальным положением). Затем блок смещается относительно своего нормального положения. Когда для расположения блока применяется модель относительного позиционирования, положение следующего блока рассчитывается так, как будто блок не был смещен.
• absolute – положение блока (возможно, и размер) указывается свойствами left, right, top и bottom. Они определяют величину смещения относительно контейнера блока. Абсолютно позиционируемые блоки изымаются из нормального потока. Это значит, что они не влияют на размещение последующих сестринских элементов. Следует заметить, что поля абсолютно позиционируемых блоков не перекрываются никакими другими полями.
• fixed – положение блока рассчитывается в соответствии с моделью абсолютного позиционирования, а затем он фиксируется относительно некоторого объекта. При использовании устройств без разбивки блок фиксируется относительно области просмотра (и не перемещается при прокрутке). При использовании устройств с постраничной разбивкой блок фиксируется относительно страницы, даже если она отображается в области просмотра (например, при предварительном просмотре печати). Вы также имеете возможность сделать определение значения fixed аппаратно-зависимым. Например, вы можете сделать так, чтобы на экране блок всегда отображался в верхней части области просмотра, но на печатной странице этого бы не происходило. Два объявления могут быть отделены друг от друга с помощью правила @media, как это показано на примере ниже:
@media screen {
h1#first { position: fixed }
}
@media print {
h1#first { position: static }
}
Смещение блоков
Говорится, что элементу была присвоена позиция, если для свойства position устанавливается значение, отличное от static. Позиционированные элементы порождают позиционированные блоки, положение которых регулируется с помощью следующих четырех свойств.
• top – задает смещение верхнего сегмента внутренней краевой линии относительно верхнего сегмента краевой линии контейнера блока.