Блочная модель документа. Часть 2

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

 

 

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

• thin - задает тонкую границу;
  
• medium - задает границу средней толщины;
  
• thick - задает толстую границу.

Например

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

Цвет границы блока можно задать свойствами border-top-color, border-right-color, border-bottom-color, border-left-color, которые определяют цвет верхней, правой, нижней и левой частей границы блока соответственно. Как цвета задаются, мы уже знаем, вот только добавлю, что можно указывать значение "transparent" , которое делает границу прозрачной. Например

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

Стиль отображения границы блока можно задать свойствами border-top-style, border-right-style, border-bottom-style, border-left-style, которые определяют стиль верхней, правой, нижней и левой частей границы соответственно. Данные свойства могут принимать одно из следующих значений

• none - граница не отображается, даже если заданы другие свойства, например, border-width (значение по умолчанию);
  
• dotted - задает границу пунктирной линией;
  
• dashed - задает границу штрих-пунктирной линией;
  
• solid - задает границу сплошной линией;
  
• double - задает отображение границы двумя непрерывными линиями;
  
• groove - задает отображение границы вдавленной с двух сторон линией;
  
• ridge - задает отображение границы выпуклой с двух сторон линией;
  
• inset - задает отображение границы вдавленной линией;
  
• outset - задает отображение границы выпуклой линией.

Например

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

Но есть еще способы сокращенной записи свойств границ блоков. Свойства border-top, border-right, border-bottom, border-left задают параметры толщины, цвета и стиля отображения верхней, правой, нижней и левой частей границы блока. Например, вместо записи

И наконец, свойство border задает одинаковые параметры толщины, цвета и стиля отображения всем четырем частям границы блока. Например

В данном случае граница блока div будет в виде сплошной линии красного цвета, толщиной равной пяти пикселям.