2.4. Стили рамок

Стили рамок описывают толщину, цвет и стиль линий рамок.

Толщину линий рамок задают параметры border-top-width, border-right-width, border-bottom-width и border-left-width, а также параметр border-width. Толщину линий задают явным неотрицательным значением.

Параметры, устанавливающие толщину одной из сторон рамки (border-top-width, border-right-width, border-bottom-width и border-left-width) никакой сложности не представляют.

Параметр border-width имеет некоторые особенности, связанные с тем, что устанавливает толщину всех сторон рамки Рассмотрим возможные варианты задания значений этого параметра:

1. Если задано одно значение, то оно применяется к всем сторонам рамки.

2. Бели заданы два значения, то первое значение устанавливает толщину верхней и нижней сторон, а второе значение - левой и правой сторон рамки Например, следующий заголовок

H1 { border: solid; border-width: thin thick; text-align: center }

имеет рамку, у которой верхняя и нижняя стороны рисуются тонкой сплошной линией, а левая и правая - толстой сплошной линией.

3. Если заданы три значения, первое значение устанавливает толщину верхней стороны, второе значение устанавливает толщину левой и правой сторон, а третье значение -толщину нижней стороны Например, следующий заголовок

H1 {border: solid; border-width: thin 1сm thick; text-align: center }

имеет рамку, у которой верхняя сторона рисуется тонкой сплошной линией, левая и правая стороны - сплошной линией толщиной 1 см, а нижняя - толстой сплошной линией

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

Цвет линий рамок задают параметры border-top-color, border-right-color, border-bottom-color и border-left-color, а также параметр border-color. Цвет рамки задают значением типа color.

Параметры, устанавливающие цвет одной из сторон рамки (border-top-color, border-right-color, border-bottom-color и border-left-color) никакой сложности не представляют.

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

Н1 { border: solid; border-width: thin 1 сm thick;

text-align: center; border-color: gray Purple Yellow }

имеет рамку, у которой верхняя сторона рисуется серой линией, левая и правая стороны - пурпурной линией, а нижняя - желтой линией.

Тип линий рамок задают параметры border-top-style, border-right-style, border-bottom-style и border-left-style, а также параметр border-style.

Параметры, которые устанавливают тип линии одной из сторон рамки (border-top-style, border-right-style, border-bottom-style и border-left-style) никакой сложности не представляют.

Параметр border-style имеет некоторые особенности, связанные с тем, что устанавливает типы линий всех сторон рамки. Эти особенности такие же, как и в случае параметра border-width.

Стиль (толщину, цвети и тип) линий рамок задают параметры border-top, border-right, border-bottom и border-left, а также параметр border .

Например, следующий заголовок:

H1 { border-bottom: thick solid red }

имеет только нижнюю сторону рамки из толстой сплошной линии красного цвета.

Внимание, параметр border не может устанавливать разные стили для разных сторон рамки