#7 – Стили для блоков

#7 – Стили для блоков

Любой сайт состоит из блоков. Каждый блок может быть выделен тегом div или же каким-либо специальным тегом по типу: header, footer, aside, main и так далее. За урок мы научимся прописывать стили к подобным блокам.

Видеоурок

Для создания блоков в HTML используется тег div. С помощью CSS можно добавить множество стилей к блоку и создать из блока практически любую фигуру.


Для примера мы создали HTML блок и добавили к нему несколько стилей. По итогу получился лимон:




Думаете что на создание такого объекта уйдет уйма сил и множество строк кода? Как бы не так!


Ниже представлены все стили для создания такого же лимона:

.limonchik {
	width: 200px; /* Указываем ширину и высоту объекта */
	height: 200px; 
	background: #F5F240; /* Указываем задний фон - желтый */
	border: 2px solid #F0D900; /* Обводка 2 пикселя */
	border-radius: 10px 150px 30px 150px; /* Скругление углов */
}

CSS моментально изменил отображение тега div, при чём для реализации всего потребовалось лишь пару строк кода.


Работа с обводкой (border)

Только при помощи самого border можно создавать интересные объекты для сайта. Например, при помощи незамысловатого кода можно создать вот такую картинку:




Весь код для создания такой картинки:
.borders {
 width: 0; height: 0;
 border: 100px solid;
 border-color: #FF5B45 #1D532A #6DCDF7 #FFE02E;
}

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Онлайн редактор кода

Загрузка...

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

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

Также стоит посмотреть

Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Современная вёрстка адаптивного веб-сайта
Изучение препроцессора SASS / SCSS
7 уроков
Изучение технологии Bootstrap (верстка сайта)
16 уроков
Создание сайта с нуля | Полноценная верстка сайта
11 уроков
Изучение ASP.NET Core MVC. Создание сайтов на C#
10 уроков
Комментарии для сайта Cackle