Наши приложения

Установите наши мобильные приложения под Android для изучения HTML и CSS там, где вы пожелаете. Уроки содержат описание и интерактивные задания на закрепление материала. А справочники просто классные!

Перейти

Псевдокласс :checked определяет, помечен флажок (<input type="checkbox">), переключатель (<input type="radio">) или пункт списка (<option>), соответственно, применяет стиль только к помеченному элементу формы. С помощью :checked можно стилизовать поля формы, создавать вкладки, меню, галерею изображений и др.

Псевдокласс :checked

Вёрстка

Вёрстка с помощью flexbox, официально называемая CSS Flexible Box Layout Module, представляет собой новый модуль компоновки в CSS3, предназначенный для улучшения выравнивания, направления и порядка элементов в контейнере, даже если они имеют динамический или неизвестный размер.

Визуальное руководство по свойствам flexbox

Вёрстка

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

Разделы веб-страницы

Учебный курс

Использование псевдоэлементов ::after и ::before является одним из самых популярных приёмов при вёрстке фрагментов веб-страниц и их стилизации. С их помощью можно выводить произвольный текст, добавлять тени, треугольники, линии и др.

::after и ::before

Вёрстка

Стилевое свойство clip-path — это способ отказаться от однообразных прямоугольных макетов, традиционно ассоциируемых с плоским, адаптивным дизайном. Вы станете думать не только о прямоугольниках, на ваших страницах они буквально начнут принимать форму шестиугольников, звёзд и восьмиугольников.

Создание адаптивных фигур с помощью clip-path

Вёрстка

Стилевое свойство float изначально было внедрено в CSS для создания обтекаемых картинок и текстовых врезок, но со временем расширило сферу своего применения. Веб-разработчикам не хватало инструментов для вёрстки макетов, таблицы же для этих целей оказались громоздки, неудобны и морально устарели. На смену таблицам для вёрстки колонок приспособили float, несмотря на то, что это свойство не предназначено для этой роли.

float в теории и на практике

Учебный курс

Позиционированием называется положение элемента в системе координат. Различают несколько типов позиционирования: нормальное, относительное, абсолютное, фиксированное и приклеенное. В зависимости от типа, который устанавливается через свойство position, меняется и система координат.

Позиционирование элементов

Учебный курс

В HTML4 практически все элементы относятся к двум типам, различающихся своим поведением и свойствами — это блочные и строчные элементы.

Блочные и строчные элементы

Учебный курс

Jekyll является наиболее популярным генератором статичного сайта. Он берёт исходные файлы и создаёт сайт из статичных страниц, готовых обслуживать пользователей напрямую. Это отличается от того, как работают традиционные CMS, вроде WordPress.

Создание сайта на Jekyll

Веб-технологии

HTML (HyperText Markup Language, язык разметки гипертекста) — это язык разметки, который определяет, какие элементы должны располагаться на веб-странице. Текст, ссылки, изображения, списки, таблицы, видео и др. — всё это является элементами, которые можно отобразить на веб-странице с помощью HTML.

Самоучитель HTML

Учебный курс

Формы являются одним из важных элементов любого сайта и предназначены для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.

Формы в HTML

Учебный курс

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

Основы Sass

Учебный курс