Рамки — это такие линии, которые окружают элемент (содержащийся в нём контент и отступы вокруг него). Пример, с которым мы уже сталкивались — рамки ячеек внутри таблицы.
CSS предусматривает два типа рамок: внутренние границы и внешние линии. Свойства CSS, отвечающие за оформление рамок, начинаются со слова «border», которое как раз и можно перевести как «Рамка», «Граница». Наличие и формат внешнего контура задаются свойствами, начинающимися словом «outline». Outline, в отличие от border, не влияет на ширину и положение обрамляемого блока. Кроме того, его нельзя установить только с одной стороны, как border — только со всех сторон сразу.
Сначала поговорим об оформлении border, потом перейдём к outline.
border-width
Задаёт ширину границ. Понятно, что по умолчанию элемент окружён рамками с четырёх сторон. Свойство позволяет задать ширину границ как для всех сторон одинаковую, так и разную для каждой стороны. В зависимости от того, какую ширину каким границам нужно присвоить, в правиле можно указать от одного до четырёх значений.
|
Количество значений |
Результат |
|
1 |
Одинаковая ширина рамок со всех сторон. |
|
2 |
Первое значение задаёт толщину верхней и нижней рамок, второе — левой и правой. |
|
3 |
1 — верхняя рамка, 2 — левая и правая, 3 — нижняя. |
|
4 |
Значения ширины, начиная с верхней границы по часовой стрелке (верхняя, правая, нижняя, левая). |
Задавать ширину можно как с помощью привычных пикселей, процентов и других единиц длины CSS, так и зарезервированными словами thin (2px), medium (4px) и thick (6px).
border-width: 16px 12px 4px 8px;
border-style
Определяет стиль рамки. Обратите внимание: если не задать это правило, но указать свойство border-width , то рамок вообще не будет, так что если хотите видимые границы, обязательно укажите border-style.
Значений у свойства может быть довольно много, все они наглядно продемонстрированы рисунком ниже.
Последний абзац показывает, что стиль, как и толщина, у рамки с каждой стороны может быть собственным:
<p style="border-style: solid double dotted none; border-width: 8px; font-size: 20px;">border-style: solid double dotted none</p>
border-color
Работает так же, как и предыдущие свойства, но отвечает за цвет границ. Ему тоже можно задавать от одного до четырёх значений, и результат вы уже знаете. Если правило не установить, рамки будут иметь цвет текста текущего элемента или, если не указан и он, цвет текста элемента-родителя.
border-color: #C85EFA;
border
Упрощает запись и экономит код, позволяя установить все перечисленные свойства для границ со всех сторон элемента одной строкой:
p { border: 2px solid green; }Для настройки разных правил рамкам с разных сторон можно использовать следующие значения:
- border-top — верхняя граница.
- border-right — правая.
- border-bottom — нижняя.
- border-left — левая.
p { border-left: 6px dotted yellow; }outline-width
То же самое, что и border-width, только для внешней, а не внутренней рамки. Задаёт толщину контура в тех же значениях, что и border-width. Кроме толщины обрамления элемента нужно указать его стиль, иначе контура не будет.
outline-style
Значения свойства дублируют значения border-style. Правило задаёт стиль внешнего контура.
outline-color
Определяет цвет внешнего контура.
Пример кода ниже задаёт стиль заголовка первого уровня с зелёными внутренними границами и оранжевыми внешними контурами.
h1 { border: solid 3px green; outline-style: solid; outline-width: 6px; outline-color: orange; }
outline
Объединяющее три предыдущих свойство, аналог border.
Код:
<!DOCTYPE html>
<html>
<head>
<title>outline</title>
<style type="text/css">
h1 {
border: solid 3px green;
outline: solid 6px orange;
}
</style>
</head>
<body>
<h1>Заголовок с внешним контуром</h1>
</body>
</html>Результат:
Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.
Сообщить об ошибке
