Войти
Для полноценного прохождения курса рекомендуем авторизоваться и поступить на курс. Вам станут доступны интерактивные тренажеры и занятия с тестированием знаний. Ваш прогресс будет сохраняться. По окончанию курса, Вы сможете получить сертификат

CSS. Начальный курс

Отступы В Css. Что Такое Padding И Margin
Практика. Добавляем Отступы
Практика. Устанавливаем Margin Для Html Элементов
Практика. Используем Более Короткий Синтаксис Для Margin И Padding
Практика. Устанавливаем Отрицательные Margin Отступы
Селекторы Аттрибутов
Правтика. Используем Селекторы Аттрибутов Для Стилизации Элементов
Отностительные И Абсолютные Единицы Измерения
Наследование В Css
Каскадные Таблицы Ститей(Css). Наследование И Приоритеты Стилей
Практика. Переопределяем Свойства Класса При Помощи Id
Практика. Используем Inline Стили Для Переопределения Свойств
Практика. Используем !Important Для Указания Приоритета
Css. Способы Указания Цвета
Практика. Используем Hex Цвета
Настраиваемые Свойства (Переменные) В Css
Практика. Использование Переменных В Css
Практика. Создаем Собственные Переменные
Практика. Резервные Значения Для Переменных
Задача
HTML
CSS
JS

Практика. Добавляем border для изображения

Задача:

  1. Создайте класс image-border
  2. Установите значение 10px для свойства border-width
  3. Установите значение solid для свойства border-style
  4. становите значение red для свойства border-color
  5. Убедитесь что тег img имеет оба класса: image-border и small-image

P.S. Классы перечисляются через пробел внутри аттрибута class

<html> <head> </head> <body> <main> <h2>My First Web App</h2> <img src="https://bit.ly/3rewVSk" /> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <a href="#">Ссылка</a> </main> </body> </html>
.small-image{ width:300px; }
Result
shape shape