Рамки — один из ключевых элементов дизайна, который может использоваться для создания простой обводки, а также для более сложных элементов дизайна.
В этой статье мы расскажем вам о создании рамок, а именно о группе свойств border, опишем каждое её отдельное свойство.
Border. HTML & CSS
Давайте рассмотрим каждое свойство отдельно, разобрав разные примеры использования.
Как сделать рамку таблицы в HTML
Для начала давайте рассмотрим самый простой способ создания рамки, для которого нам понадобится простой HTML.
Создадим таблицу с 3 колонками, по 3 ячейки в каждой(9х9), с помощью тега <table>. Внутри вписываем теги <td> и <tr>.
Для создания рамки записываем в тег-контейнер атрибут border, присваиваем ему значение 2px.
В итоге у нас получилась простая таблица, которая имеет темно-серую обводку шириной в 2 пикселя. Её можно сделать красивее, но для этого уже понадобится CSS.
Стиль обводки. Свойство Border-style.
Начнем мы с именно с этого свойства. Он задает стиль рамки, делая её либо сплошной линией, либо набором точек. Существуют и другие стили:
- <Solid> — создает обводку в виде нескольких сплошных линий, соединенных между собой. Линии соединяются без образования пространства между ними.
- <Dotted> — создает рамку в виде точек.
- <Dashed> — создает рамку в виде небольших разделенных линий. По виду напоминает пунктирную линию.
- <Double> — создает сплошную рамку, образуя двойную линию.
- <Groove> — создает рамку имеющую 2 цвета. Внешняя часть рамки имеет заданный цвет, а внутренняя его темный оттенок.
- <Ridge> — создает рамку с градиентом. Заданный для рамки цвет плавно распределяется по всем линиям, плавно меняя свой оттенок.
- <Inset> — создает 2-х цветную рамку. Левая и нижняя линии имеет заданный цвет. Правая и нижняя линии имеют его темный оттенок.
- <Outset> — Полная противоположность стилю Inset. Правая и верхняя — заданный цвет. Левая и нижняя имеют его темный оттенок.
Можно задавать разные стили для каждой отдельной линии. Для этого нужно использовать отдельный стиль для каждой линии, например свойство border-top-style. Оно будет изменять стиль для каждой линии рамки.
Цвет обводки. Свойство border-color
body{
color: darkgreen;
background: rgba(149, 52, 52, 0.63);
margin: 0 auto;
height: 250vh;
width: 80%
}
div{
margin: 25px 0 0 0;
border-style: solid;
border-color: red;
border-width: 3px;
outline: 5px solid black;
height: 50px;
width: 30%;
}
По умолчанию это свойство имеет тот же цвет, что и цвет текста, который находится внутри обводимого контейнера.
Если изменить значение свойства <border-color>, то цвет будет применен ко всем линиям рамки. Для стилизации каждой отдельной линии можно использовать уточняющие свойства, по типу border-top-color.
Ширина. Свойство border-width
Как понятно из подзаголовка и названия свойства, оно изменяет ширину рамки.
Обычно для изменения размеров рамки применяются пиксели, но можно использовать и другие величины. Делать это не рекомендуется!
Внимание! Если в свойстве <border-style> указано значение none, то значение <border-width> не будет применено, так как оно автоматически становится равно 0.
Свойство также можно применить к каждой отдельной линии обводки.
Простое свойство border
При желании вы можете использовать отдельное свойство для каждого элемента стилизации и для каждой отдельной линии, но зачем?
С помощью простого свойства <border> вы также сможете создать красивую рамку, которая будет ничуть не хуже, чем если вы будете использовать отдельные свойства. Единственное различие — упрощение кода, но это огромный плюс.
Для того, чтобы применить это свойство к каждой отдельной линии, используйте упрощенные свойства.
Значения для border задаются в следующем порядке: <border-width>, <border-style>, <border-color>.
Свойство outline
Данное свойство также используется для создания рамки, но может задаваться вместе со свойством "border". "Outline" накладывается сразу же после основной рамки, создавая вторую, что полезно при выделении одного элемента из нескольких.
Для него работают таки же отдельные стили: <outline-style>, <outline-color>, <outline-width>.
Заключение
В этой статье мы узнали всё о создании рамок. Теперь вы можете применять этот элемент стилизации в своих разработках.
Можете скачать исходники и разобраться в них самостоятельного, для лучшего понимания работы свойства. Теория теорией, но главное — практика.
Пояснения к статье:
- <Border> — свойство для создания рамки вокруг элемента.
- <Outline> — свойство для создания внешней рамки вокруг элемента.
- <Border-style>, <border-color>, <border-width> — отдельные свойства для рамок.
- <Dashed>, <solid>, <inset>, <outset> и т.д. — стили для рамок.