Сокращенная запись свойств границ: Тренажер CSS

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

В этом уроке вы попрактикуетесь в использовании сокращенной записи свойства `border` в CSS. Это свойство позволяет задать стиль, толщину и цвет границы элемента в одной строке, вместо использования отдельных свойств `border-width`, `border-style` и `border-color`. Задания охватывают различные комбинации значений и помогут вам лучше понять, как работает сокращенная запись. Вам предстоит изменять селекторы, свойства и некоторые значения, чтобы добиться желаемого результата. Помните, что порядок значений в сокращенной записи `border` важен не всегда, но рекомендуется придерживаться `style`, `width`, `color`.

Список тем

Простая граница

Создайте сплошную черную границу толщиной 1 пиксель для элемента `div` с классом `box`.

CSS

.box {
  width: 200px;
  height: 100px;
  input1: 1px solid black;
}

                     .box {
  width: 200px;
  height: 100px;
  input1: 1px solid black;
}

HTML

<div class="box"></div>

Используйте сокращенное свойство `border`. Вам нужно указать стиль границы (solid), толщину (1px) и цвет (black).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Изменение стиля границы

Измените стиль границы элемента `div` с классом `box` на пунктирный (dotted). Толщина и цвет пусть останутся прежними (1px, black).

CSS

.box {
  width: 200px;
  height: 100px;
  border: 1px input1 black;
}

                     .box {
  width: 200px;
  height: 100px;
  border: 1px input1 black;
}

HTML

<div class="box"></div>

Вам нужно изменить только значение стиля границы в сокращенном свойстве `border`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Изменение толщины границы

Увеличьте толщину границы элемента `div` с классом `box` до 3 пикселей. Стиль и цвет пусть останутся прежними (dotted, black).

CSS

.box {
  width: 200px;
  height: 100px;
  border: input1 dotted black;
}

                     .box {
  width: 200px;
  height: 100px;
  border: input1 dotted black;
}

HTML

<div class="box"></div>

Измените значение толщины границы в сокращенном свойстве `border`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Разные границы для сторон

Задайте разные стили границ для каждой стороны элемента `div` с классом `box`: сверху - сплошная (solid), справа - пунктирная (dotted), снизу - двойная (double), слева - штриховая (dashed). Толщину и цвет не меняйте (1px black).

CSS

.box {
  width: 200px;
  height: 100px;
  border-top: 1px input1 black;
  border-right: 1px input2 black;
  border-bottom: 1px input3 black;
  border-left: 1px input4 black;
}

                     .box {
  width: 200px;
  height: 100px;
  border-top: 1px input1 black;
  border-right: 1px input2 black;
  border-bottom: 1px input3 black;
  border-left: 1px input4 black;
}

HTML

<div class="box"></div>

Используйте отдельные свойства `border-top`, `border-right`, `border-bottom` и `border-left`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Изменение селектора

Задайте сплошную черную границу толщиной 2 пикселя для *всех* элементов `div` на странице.

CSS

input1 {
  width: 200px;
  height: 100px;
  border: 2px solid black;
}

                     input1 {
  width: 200px;
  height: 100px;
  border: 2px solid black;
}

HTML

<div></div>
<div></div>

Используйте сокращенное свойство `border` и правильный селектор.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинирование с другими свойствами

Добавьте внутренний отступ (padding) в 10 пикселей со всех сторон к элементу `div` с классом `box`, сохранив сплошную черную границу толщиной 1 пиксель.

CSS

.box {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  input1: 10px;
}

                     .box {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  input1: 10px;
}

HTML

<div class="box"></div>

Используйте свойство `padding`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Граница для изображения

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

CSS

input1 {
  border: 2px dotted black;
}

                     input1 {
  border: 2px dotted black;
}

HTML

<img src="https://naytikurs.ru/img/1.png" alt="Image">

Используйте сокращенное свойство `border` и селектор для изображения (`img`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сокращенная запись border-width

Задайте разную толщину границ для элемента с классом `box`: верхняя и нижняя - 5px, левая и правая - 10px. Используйте сокращенную запись.

CSS

.box {
 width: 200px;
 height: 100px;
 border-style: solid;
 border-color: black;
 input1: 5px 10px;
}

                     .box {
 width: 200px;
 height: 100px;
 border-style: solid;
 border-color: black;
 input1: 5px 10px;
}

HTML

<div class="box"></div>

Используйте свойство `border-width` с двумя значениями: первое значение задает толщину верхней и нижней границ, второе - левой и правой.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

border-style: четыре значения

Задайте разные стили границ для элемента с классом `box`, используя сокращенную запись `border-style`: сверху - solid, справа - dotted, снизу - double, слева - dashed.

CSS

.box {
  width: 200px;
  height: 100px;
  border-width: 2px;
  border-color: black;
  input1: solid dotted double dashed;
}

                     .box {
  width: 200px;
  height: 100px;
  border-width: 2px;
  border-color: black;
  input1: solid dotted double dashed;
}

HTML

<div class="box"></div>

Используйте свойство `border-style` с четырьмя значениями, указанными в порядке: верх, право, низ, лево.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

border-color и border-style

Задайте для элемента с классом .container, сплошную верхнюю и нижнюю границу, и пунктирную правую и левую. Цвет не указывайте.

CSS

.container {
  width: 300px;
  height: 150px;
 input1: solid dotted;
}

                     .container {
  width: 300px;
  height: 150px;
 input1: solid dotted;
}

HTML

<div class="container"></div>

Подсказка: используйте сокращенную запись `border-style`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинируем border и padding

Для всех элементов 'p' установите сплошную границу черного цвета толщиной 1px и внутренний отступ 5px со всех сторон.

CSS

p {
 input1: 1px solid black;
 input2: 5px;
}

                     p {
 input1: 1px solid black;
 input2: 5px;
}

HTML

<p>Текст 1</p>
<p>Текст 2</p>

Используйте border и padding.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Изменяем border-width

Задайте толщину границы 2px для всех сторон элемента с классом `block`.

CSS

.block {
  border-style: solid;
  border-color: black; /* Цвет границы */
  input1: 2px;
}

                     .block {
  border-style: solid;
  border-color: black; /* Цвет границы */
  input1: 2px;
}

HTML

<div class="block">Содержимое блока</div>

Используйте свойство `border-width`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку