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

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

 

Стилевые свойства границы блока

 

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

Например
Код
div { border-top-width:5px; }

Для сокращенной записи нужно использовать свойство border-width, которому можно передать от одного значения до четырех. Если указано одно значение, то оно распространяется на все части границы. Если указано два значения, то первое значение применяется к верхней и нижней частям границы, а второе - к левой и правой частям границы. Если указано три значения, то первое применяется к верхней части, второе к левой и правой частям границы, а третье значение применяется к нижней части границы. Если же указано четыре значения, то они применяются к верхней, правой, нижней и левой частям границы соответственно. Например
Код
div { border-width: 10px 5px; }
p { border-width: 5px; }

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

Также можно использовать сокращенную запись в виде свойства border-color, которому можно передать от одного значения до четырех. Если указано одно значение, то оно распространяется на все части границы. Если указано два значения, то первое значение применяется к верхней и нижней частям границы, а второе - к левой и правой частям границы. Если указано три значения, то первое применяется к верхней части, второе к левой и правой частям границы, а третье значение применяется к нижней части границы. Если же указано четыре значения, то они применяются к верхней, правой, нижней и левой частям границы соответственно. Например
Код
div { border-color:#ba99ff; }
p { border-color:#ba99ff #3399bb; }

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

Например
Код
div { border-top-style: solid; border-left-style: solid; }

Также есть сокращенная форма записи, использующая свойство border-style, которое задает стиль отображения сразу для всех частей границы. Свойству border-style можно передавать от одного значения до четырех. Если указано одно значение, то оно распространяется на все части границы. Если указано два значения, то первое значение применяется к верхней и нижней частям границы, а второе - к левой и правой частям границы. Если указано три значения, то первое применяется к верхней части, второе к левой и правой частям границы, а третье значение применяется к нижней части границы. Если же указано четыре значения, то они применяются к верхней, правой, нижней и левой частям границы соответственно. Например
Код
div { border-style: solid double; }
p { border-style: solid double dashed; }

Но есть еще способы сокращенной записи свойств границ блоков. Свойства border-top, border-right, border-bottom, border-left задают параметры толщины, цвета и стиля отображения верхней, правой, нижней и левой частей границы блока. Например, вместо записи
Код
div { border-top-width:5px; border-top-color: red; border-top-style: solid; }
можно написать следующее
div { border-top: 5px red solid; }

И наконец, свойство border задает одинаковые параметры толщины, цвета и стиля отображения всем четырем частям границы блока. Например
Код
div { border: 5px red solid; }

В данном случае граница блока div будет в виде сплошной линии красного цвета, толщиной равной пяти пикселям.
Опубликовано 29 июня 2008 г.
Теги: css, div
Комментарии к публикации
Всего комментариев: 3
прохожий: Кодер Георгий | 31.08.2010, 10:36 #
Ещё бы добавить картинки, чтобы было наглядно видно какие именно элементы описываются в стилях.
Суперадмин: | 04.09.2010, 20:25 #
Лучше практикой закреплять знания. Пишите код и просматриваете что получилось в браузере.
прохожий: Asfer | 29.01.2012, 21:51 #
Большое спасибо за ваш сайт !!!!!
Вход в аккаунт
Новости сайта