- •Ещё более многоуровневый список [6/17]
- •Список определений [7/17]
- •Важность. Теги strong и b [8/17]
- •Акцентируем внимание. Теги em и I [9/17]
- •Переносы и разделители. Теги br и hr [10/17]
- •Цитаты [11/17]
- •Верхние и нижние индексы [12/17]
- •Помечаем изменения. Теги del и ins [13/17]
- •Преформатированный текст [14/17]
- •Просто выделенный текст [15/17]
- •Испытание: разметка статьи [16/17]
- •Испытание: Рецепт каши [17/17]
- •Работа с таблицами Добавляем строки [2/23]
- •Задаём рамки с помощью css [4/23]
- •Улучшаем отображение рамок [5/23]
- •Горизонтальные и вертикальные рамки [6/23]
- •Отступы внутри ячеек [7/23]
- •Отступы между ячейками [8/23]
- •Испытание: простая, но аккуратная таблица [9/23]
- •Ячейки-заголовки [10/23]
- •Заголовок таблицы [11/23]
- •Заголовок таблицы [17/23]
- •Выравнивание содержимого в ячейках [18/23]
- •Добавим цвета [19/23]
- •Раскрашиваем строки [20/23]
- •Задаём размеры таблицы [21/23]
- •Испытание: итоговая таблица [23/23]
- •Знакомство с формами Первая форма [1/18]
- •Текстовое поле ввода [2/18]
- •Идентификатор и значение по умолчанию [3/18]
- •Подпись для поля ввода [4/18]
- •Связываем подпись и поле по id [5/18]
- •Добавим ещё одно поле [6/18]
- •Поле для ввода пароля [7/18]
- •Кнопка отправки формы [8/18]
- •Многострочное поле ввода [9/18]
- •Чекбокс или «галочка» [10/18]
- •Испытание: форма регистрации [11/18] проверка
- •Переключатель или «радиобаттон» [12/18]
- •Группа переключателей [13/18]
- •Раскрывающийся список или «селект» [14/18]
- •«Мультиселект» [15/18]
- •Поле для загрузки файлов [16/18]
- •Скрытое поле [17/18]
- •Работа с css Введение в css [1/15]
- •Продвинутые селекторы [3/15]
- •Свойства для оформления текста [4/15]
- •Свойства для задания размеров и отступов [5/15]
- •Позиционирование элементов [6/15]
- •Создание сетки страницы [7/15]
- •Декоративные свойства [8/15]
- •Каскадность [9/15]
- •Каскадность. Переопределение стилей [10/15]
- •Каскадность и приоритеты [11/15]
- •Каскадность. Коктейль из классов [12/15]
- •Наследование [13/15]
- •Испытание: макет-прототип [15/15]
- •Селекторы Селекторы по классам [3/18]
- •Отрабатываем селекторы по классам [4/18]
- •Контекстные селекторы [5/18]
- •Соседние селекторы [6/18]
- •Контекстные и соседние селекторы [7/18]
- •Потомки [7/19]
- •Псевдоклассы Псевдоклассы [9/18]
- •Псевдокласс :nth-child [10/18]
- •Курс «Селекторы, часть 1» :nth-child и контекстные селекторы [11/18]
- •Псевдокласс :hover [12/18]
- •Динамические эффекты с помощью :hover [13/18]
- •Испытание. Дуэль. [18/18]
- •Курс «Наследование и каскадирование» Иерархическое дерево [1/18]
- •Наследование [2/18]
- •Наследование «на пальцах» [3/18]
- •Еще немного про наследование [4/18]
- •Наследуемые свойства [5/18]
- •Ненаследуемые свойства [6/18]
- •Принудительное наследование [7/18]
- •Каскадирование [8/18]
- •Битва за курочку [9/18]
- •Битва за курочку. Раунд второй [10/18]
- •Битва за курочку. Раунд третий [11/18]
- •Битва за курочку. Борьба накаляется [12/18]
- •Битва за курочку. Запрещённый приём [13/18]
- •Еще одна задачка на специфичность [14/18]
- •Расчет значения специфичности [15/18]
- •Ещё задачка на порядок кода [16/18]
- •Перекрестное наследование [17/18]
- •Испытание: взломанный котопрофайл [18/18]
- •Курс «Оформление текста, часть 1» Главный текстовый тег — span [1/16]
- •Свойство font-size: задаем размер шрифта [2/16]
- •Свойство font-weight: толщина начертания [3/16]
- •Свойство font-style: курсив [4/16]
- •Свойство font-family: шрифт [5/16]
- •Свойство color: цвет текста [6/16]
- •Свойство text-decoration: подчеркивание и другие эффекты [7/16]
- •Декоративное подчеркивание [8/16]
- •Задаем регистр символов с помощью text-transform [9/16]
- •Управляем пробелами: white-space [10/16]
- •Горизонтальное выравнивание текста: text-align[11/16]
- •Вертикальное выравнивание: vertical-align [12/16]
- •Верхние и нижние индексы на css [13/16]
- •Свойство line-height: управляем высотой строки[14/16]
- •Вертикальный ритм текста [15/16]
- •Испытание: рецепт на css [16/16]
- •Параметры фона Cвойство background-color [1/16]
- •Свойство background-image [2/16]
- •Свойство background-repeat [3/16]
- •Свойство background-position [4/16]
- •Ещё немного background-position [5/16]
- •Свойство background-attachment [6/16]
- •Курс «Фоны, часть 1» Свойство background [7/16]
- •Формат jpeg [9/16]
- •Формат png-8 [10/16]
- •Формат png-24 [11/16]
- •Формат gif [12/16]
- •Несколько фонов [13/16]
- •Эффекты с повторяющимся фоном [14/16]
- •Спрайты [15/16]
- •Испытание: cat Academy [16/16]
- •Блоки Блочные элементы [1/23]
- •Курс «Блочная модель документа» Строчные элементы [2/23]
- •Ширина и высота [3/23]
- •Внутренние отступы, свойство padding [4/23]
- •Внешние отступы, свойство margin [5/23]
- •Рамки [6/23]
- •Стандартная блочная модель [7/23]
- •Первое испытание [8/23]
- •«Схлопывание» внешних отступов [9/23]
- •«Выпадание» внешних отступов [10/23]
- •Как отцентрировать элемент? [11/23]
- •Блочная модель и строчные элементы [12/23]
- •Ширина 100% и ширина по умолчанию [13/23]
- •Проблемы обычной блочной модели [14/23]
- •Изменяем блочную модель, свойство box-sizing[15/23]
- •Второе испытание [16/23]
- •Управление типом элемента, свойство display[17/23]
- •Последнее испытание [23/23]
- •Курс «Сетки» Пробуем управлять потоком [1/32]
- •Другой поток, шаг 3 [6/32]
- •Другой поток, финал [7/32]
- •Погружение в флоаты [8/32]
- •Float и ширина [9/32]
- •Float и выпадание из потока [10/32]
- •Флоат рядом с флоатом [11/32]
- •Когда флоатов много, а места мало [12/32]
- •Испытание: пазл на флоатах [13/32]
- •Свойство clear [14/32]
- •Борьба с выпаданием флоатов: распорки [15/32]
- •Борьба с выпаданием флоатов: псевдораспорки[16/32]
- •Простейшая сетка, шаг 1 [17/32]
- •Простейшая сетка, шаг 2 [18/32]
- •Простейшая сетка, финал [19/32]
- •Сетка посложнее, шаг 1 [20/32]
- •Сетка посложнее, шаг 2 [21/32]
- •Сетка посложнее, шаг 3 [22/32]
- •Сетка посложнее, добавляем содержание [23/32]
- •Последняя сетка, шаг 1 [24/32]
- •Последняя сетка, шаг 2 [25/32]
- •Последняя сетка завершена [26/32]
- •Испытание: строим сетку [27/32]
- •Погружение в inline-block [28/32]
- •Простая сетка на inline-block [30/32]
- •Inline-block и пробелы в коде [31/32]
- •Испытание: котогалерея на inline-block [32/32]
- •Позиционирование Поток документа [1/20]
- •Позиционирование Поток документа [1/20]
- •Относительное позиционирование [2/20]
- •Position: relative и свойство top [3/20]
- •Position: relative и свойство left [4/20]
- •Position: relative и свойство bottom [5/20]
- •Position: relative и свойство right [6/20]
- •Относительное позиционирование на практике[7/20]
- •Абсолютное позиционирование [8/20]
- •Абсолютное позиционирование и строчные элементы [9/20]
- •Position: absolute и свойство left [10/20]
- •Position: absolute и свойство top [11/20]
- •Position: absolute и свойство right [12/20]
- •Position: absolute и свойство bottom [13/20]
- •Точка отсчёта координат [14/20]
- •Тренируемся задавать координаты [15/20]
- •Неявная точка отсчёта [16/20]
- •Абсолютное позиционирование на практике[17/20]
- •Фиксированное позиционирование [18/20]
- •Создаем меню Создаём вертикальное меню [1/28]
- •Добавляем ссылки [2/28]
- •Сбрасываем стили списка [3/28]
- •Оформляем контейнер меню [4/28]
- •Оформляем пункты, простой вариант [5/28]
- •Более сложное оформление пунктов [6/28]
- •Добавляем разделители [7/28]
- •Оформляем состояния пунктов [8/28]
- •Испытание: вертикальное меню [9/28]
- •Многоуровневое вертикальное меню [10/28]
- •Устраняем проблемы оформления [11/28]
- •Переносим рамки, задаём отступы подменю[12/28]
- •Оформляем пункты подменю [13/28]
- •Тестируем на большой вложенности [14/28]
- •Испытание: многоуровневое меню [15/28]
- •Горизонтальное меню [16/28]
- •Что делать, если пункты не влезают? [17/28]
- •Усложненное оформление пунктов [18/28]
- •Завершаем оформление пунктов [19/28]
- •Испытание: горизонтальное меню [20/28]
- •Вертикальное меню с выпадающим подменю[21/28]
- •Позиционируем выпадающее подменю [22/28]
- •Отображаем подменю при наведении [23/28]
- •Горизонтальное меню с выпадающим подменю [24/28]
- •Оформляем выпадающее меню [25/28]
- •Включаем механизм выпадания [26/28]
- •Состояние «открытое подменю» [27/28]
- •Испытание: выпадающее меню [28/28]
- •Курс «Мастерская: декоративные элементы» Социальные кнопки, шаг 1 [1/18]
- •Социальные кнопки, шаг 2 [2/18]
- •Социальные кнопки, шаг 3 [3/18]
- •Переключатель страниц, шаг 1 [4/18]
- •Переключатель страниц, шаг 2 [5/18]
- •Переключатель страниц, шаг 3 [6/18]
- •Переключатель страниц, шаг 4 [7/18]
- •Переключатель страниц, тестирование [8/18]
- •Испытание: карточка курса [9/18]
- •Контакты, шаг 1 [10/18]
- •Контакты, шаг 2 [11/18]
- •Контакты, шаг 3 [12/18]
- •Комментарии, шаг 1 [13/18]
- •Комментарии, шаг 2 [14/18]
- •Комментарии, шаг 3 [15/18]
- •Основное содержание. Тег main [2/19]
- •Разделы страницы. Теги article и section [3/19]
- •Изображения в формате svg [4/19]
- •Навигация. Тег nav [5/19]
- •Завершаем футер [6/19]
- •Использование нестандартных шрифтов [7/19]
- •Подробнее о шрифтах. Правило @font-face [8/19]
- •Дополнительное содержание. Тег aside [9/19]
- •Еще раз про article. Анонс поста [10/19]
- •Завершаем главную: наполнение [11/19]
- •Внутренняя страница: структура поста [12/19]
- •Даты для людей и машин. Тег time [13/19]
- •Картинки с подписями. Теги figure и figcaption[14/19]
- •Видео. Тег video [15/19]
- •Форматы и источники видео [16/19]
- •Аудио. Тег audio [17/19]
- •Форматы и источники звука [18/19]
- •Испытание: другой вариант главной [19/19]
- •Html5 и формы Испытание: формы — вспомнить всё [1/28]
- •Сброс введенных значений [2/28]
- •Простая кнопка [3/28]
- •Кнопка-изображение [4/28]
- •Альтернативный способ задания кнопок [5/28]
- •Обязательные поля [6/28]
- •Поле выбора даты [7/28]
- •Поле выбора времени [8/28]
- •Список возможных значений [9/28]
- •Поле ввода числового значения [10/28]
- •Поле поиска [11/28]
- •Автофокус [12/28]
- •Другие поля для ввода дат [13/28]
- •Выбор из диапазона [14/28]
- •Область для вывода результата [15/28]
- •Группировка полей формы [16/28]
- •Паттерны значений полей [17/28]
- •Поле ввода телефона [18/28]
- •Подсказка при заполнении полей [19/28]
- •Поля ввода адресов сайтов и email [20/28]
- •Поле выбора цвета [21/28]
- •Группировка элементов списка [22/28]
- •Запрет редактирования полей [23/28]
- •Управление автозаполнением полей [24/28]
- •Переключение между полями [25/28]
- •Проверяем работу localStorage [27/28]
- •Испытание: через тернии к звёздам [28/28]
- •Селекторы, часть 2
- •Объединение селекторов [1/20]
- •Псевдокласс :not [2/20]
- •Комбинируем :not [3/20]
- •Псевдокласс :nth-last-child [4/20]
- •Псевдокласс :first-of-type [5/20]
- •Псевдокласс :last-of-type [6/20]
- •Псевдокласс :nth-of-type [7/20]
- •Псевдокласс :nth-last-of-type [8/20]
- •Испытание: первая раскладка [9/20]
- •Cелектор последующих элементов [10/20]
- •Псевдокласс :empty [11/20]
- •Псевдокласс :only-child [12/20]
- •Псевдокласс :only-of-type [13/20]
- •Псевдоэлемент ::before [14/20]
Свойства для оформления текста [4/15]
В CSS существует огромное количество свойств. Их можно разбить на следующие группы:
оформление текста;
работа с размерами и отступами;
позиционирование элементов;
создание сеток;
декоративные: цвета, фон, тени;
другие.
В этом задании мы познакомимся с несколькими свойствами для оформления текста, а более подробно эти свойства рассмотрим в курсе «Оформление текста с помощью CSS».
css/css4.html
Свойства для задания размеров и отступов [5/15]
С помощью CSS можно задавать ширину, высоту, внешние и внутренние отступы элементов, минимальную и максимальную ширину и высоту и так далее.
Все свойства, которые так или иначе влияют на размеры и отступы элементов, описываются в так называемой «Блочной модели документа». Помимо свойств для отступов и размеров в блочную модель входят свойства для описания границ и очень важное свойство display, которое определяет тип элемента (блочный, строчный и другие).
В этом задании мы познакомимся с некоторыми свойствами из блочной модели, а более подробно и полно они будут рассмотрены в курсе «Блочная модель документа».
css/css5.html
Позиционирование элементов [6/15]
С помощью позиционирования можно очень точно и гибко управлять расположением элементов. Позиционирование применяют для создания сложных «многослойных» интерфейсов, таких как всплывающие окна или галереи, а также для вёрстки мелких декоративных элементов.
Главным свойством для работы с позиционированием является position, которое переключает режимы позиционирования элемента. Ещё четыре свойства: top, right, bottom, left, управляют расположением элемента. И последнее свойство z-index управляет порядком слоёв.
В этом задании мы изменим стандартный режим позиционирования элемента на абсолютный и поперемещаем элемент.
Более подробно теория и практика позиционирования элементов будет рассмотрена в курсе «Позиционирование».
css/css6.html
Создание сетки страницы [7/15]
Типичный веб-сайт состоит из шапки, главного меню, блока с основным содержанием, боковых колонок, подвала. Эти блоки могут быть расположены друг под другом, в несколько колонок или ещё сложнее. Такое взаимное расположение основных блоков сайта и называют «сеткой» или «раскладкой».
Сетка может быть фиксированной или тянущейся, когда ширина блоков изменяется в зависимости от ширины браузера. Чтобы быстро и легко создавать сетки, нужно хорошо разбираться в блочной модели и позиционировании.
В этом задании мы создадим простейшую раскладку из двух колонок. А в курсе «Сетки» рассмотрим приёмы создания сеток и потренируемся строить более сложные раскладки страниц.
css/css7.html
Декоративные свойства [8/15]
Чтобы сделать страницу яркой и красивой можно использовать множество свойств: цвет текста, фон, тени, рамки, закругления и многие другие.
Работа с декоративными свойствами будет подробно рассмотрена в серии курсов и демонстраций, например, в курсах «Фоны» и «Оформление текста с помощью CSS».
Пример создания красивых полей и кнопок вы можете увидеть в демонстрации Progressive Enhancement на примере формы входа.
В этом задании мы попрактикуемся использовать некоторые декоративные свойства.
css/css8.html