Границы онлайн урок.


Для определения стиля границы элемента используется стилевое свойство border. Оно содержит значения

  • толщины линии границы - как правило определяется в пикселах

  • типа линии границы - определяется одним из ключевых слов

  • цвета линии границы - определяется в любом формате представления цвета


Общий синтаксис можно представить в следующем виде:

border: [толщина] [тип] [цвет]


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

  • solid - цельная линия

  • dashed - пунктирная линия

  • dotted - точечная линия

  • double - двойная линия

  • рельефные типы: groove, ridge, inset, outset


Рассмотрим примеры:


.bar-1 {
border: 3px solid black;
padding: 10px;
width: 200px;
}
Результат применения:
border-1



.bar-2 {
border: 5px dashed #336600;
padding: 10px;
width: 200px;
}
Результат применения:
border-2


.bar-3 {
border: 7px dotted red;
padding: 10px;
width: 200px;
}
Результат применения:
border-3



.bar-4 {
border: 7px ridge #999999;
padding: 10px;
width: 200px;
}
Результат применения:
border-4

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

Для того чтоб граница элемента не отображалась, достаточно воспользоваться сокращенной записью


.bar {
border: 0;
}


Пример работы этих стилевых правил:



Проверьте свои знания
Создать класс contact-form с правилами выравнивания блока по центру родительского элемента, фиксированной ширины 700px и внутренними отступами в 10px. Задать следующие правила для границы этого блока: толщина 2px, тип границы - цельный, цвет #444. Разместить блок этого класса внутри container вместо текстового текста. Внутри блока добавить тестовый текст That would be a form. В блок navigation вместо тестового текста добавить ссылки Home, About us, Contact. Также, задать в этом блоке цельные границы сверху и снизу цвета #EDEDED, добавить внутренние границы равные 10px.