Войти

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

Введение в курс

Что Такое Css

Подробнее О Css

Первое Знакомство. Меняем Цвет Текста

Добавление Css Стилей На Html Страницу

Добавлем Css Стили При Помощи Тега Style

Селекторы Css. Классы В Css

Практика. Добавить Класс Элементу

Практика. Стилизуем Несколько Элементов.

Практика. Изменяем Размер Шрифта

Практика. Font-Family

Добавление Дополнительных Шрифтов На Страницу

Практика. Добавляем Шрифт На Страницу

Практика. Изменяем Размер Изображения

Css Border. Добавление Границ Для Html Элементов

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

Практика. Border-Radius, Скругляем Углы

Практика. Border-Radius.

Практика. Добавляем Фон Для Html Элемента

Аттрибут Id - Уникальный Индетификатор Html Элемента

Практика. Добавляем Id Для Html Тега

Основы css. Отступы и стилизация компонентов

Отступы В Css. Что Такое Padding И Margin

Практика. Добавляем Отступы

Практика. Устанавливаем Margin Для Html Элементов

Практика. Используем Более Короткий Синтаксис Для Margin И Padding

Практика. Устанавливаем Отрицательные Margin Отступы

Селекторы Аттрибутов

Правтика. Используем Селекторы Аттрибутов Для Стилизации Элементов

Отностительные И Абсолютные Единицы Измерения

Наследование В Css

Каскадные Таблицы Ститей(Css). Наследование И Приоритеты Стилей

Практика. Переопределяем Свойства Класса При Помощи Id

Практика. Используем Inline Стили Для Переопределения Свойств

Практика. Используем !Important Для Указания Приоритета

Css. Способы Указания Цвета

Практика. Используем Hex Цвета

Настраиваемые Свойства (Переменные) В Css

Практика. Использование Переменных В Css

Практика. Создаем Собственные Переменные

Практика. Резервные Значения Для Переменных

Задача

HTML

CSS

JS

Практика. Устанавливаем отрицательные margin отступы

Свойство margin контролирует размер свободного места между границами самого элемента и окружающих его элементов.

Если вы установите для margin отрицательное значение, элемент станет больше.

Задание:

Для класса blue-box установите значение margin -25px (минус 25пикселей )

<html>
  <head>
  </head>
  <body>
  	<main>
      <h2>My First Web App</h2>
      <img src="https://bit.ly/3rewVSk" class="image-border small-image"/>
      <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>
      <div class="box yellow-box">
  			<div class="box red-box">margin</div>
 				<div class="box blue-box">margin</div>
			</div>
		</main>
  </body>
</html>

.small-image{
	width:300px;
}
.image-border{
  border-color:red;
  border-style: solid;
  border-width:10px;
  border-radius: 10px;
}
 .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }
.yellow-box {
  background-color:yellow;
  padding: 10px;
}

.red-box {
	background-color:red;
  padding: 20px;
  margin: -15px;
}

.blue-box {
	background-color:blue;
	padding: 20px;
	margin: 20px;
}

Result