#8 - Блоки в CSS главные свойства

#8 - Блоки в CSS главные свойства

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

Видеоурок

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


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




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


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

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

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

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

Загрузка...

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

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

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

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

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

Изучение HTML5 от нуля до гуру!
21 урок
Современная вёрстка адаптивного веб-сайта
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Видеокурс по PHP, MySQL / Создание динамического сайта
Изучение препроцессора SASS / SCSS
7 уроков
Верстка сайта на HTML5 и CSS3
13 уроков
Комментарии для сайта Cackle