×

Рамки [6/23]

Рамка задаётся с помощью свойства border, которое состоит из трёх компонентов:

  1. ширина рамки;
  2. стиль рамки;
  3. цвет.

Например:

selector{
    border: 5px solid red;
}

Это правило задаёт красную сплошную рамку толщиной 5px.

Задавать рамку можно одним свойством border, а можно и с помощью отдельных свойств border-width, border-style, border-color. Например:

selector{
    border-width: 5px;
    border-style: solid;
    border-color: red;
}

Это правило задаёт такую же рамку, как и в примере выше.

Несколько самых распространенных стилей рамок:

  • solid — сплошная;
  • dashed — пунктирная;
  • dotted — точками.

Рамку можно задавать и строчным, и блочным элементам.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Рамки</title> <link rel="stylesheet" href="/assets/course9/style1.css"> </head> <body> <div class="b1"></div> <div class="b2"></div> <div class="b3"></div> <div> <span class="b1">Рамка 1</span> <span class="b2">Рамка 2</span> <span class="b3">Рамка 3</span> </div> </body> </html>
CSS
div { width: 280px; height: 20px; margin: 20px; border: none; } span { border: none; } .b1 { } .b2 { } .b3 { }
HTML Academy

Добавьте в указанные CSS-правила свойство border:

  1. для класса b1 — border: 2px dashed yellow;,
  2. для класса b2 — border: 2px dotted yellow;,
  3. для класса b3 — border: 10px solid yellow;.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.