- •Ещё более многоуровневый список [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]
Переносим рамки, задаём отступы подменю[12/28]
Мы оставим рамки только для пунктов меню верхнего уровня.
Чтобы сделать это, нужно убрать рамки у ссылок и задать их для элементов списка. Также отрицательный отступ снизу уберем у ссылок и добавим элементам списка.
Используем для этого дочерний селектор .main-menu > li.
Также на этом этапе мы добавим отступы для контейнера подменю, т.е. для тега ul.
Задание
Уберите рамки и отступ снизу у ссылок и добавьте их элементам списка верхнего уровня.
Цель 2Задайте подменю внутренние отступы: 5pxсверху и снизу, 30px слева и нулевой справа.
menu-12.html
Оформляем пункты подменю [13/28]
Теперь оформим пункты подменю. Оформление будет отличаться от пунктов верхнего уровня и будет максимально простым.
С помощью какого селектора задавать стили для пунктов подменю?
Для этого можно использовать сложный контекстный селектор. Например, такой:
.main-menu li li a
Он выберет только те ссылки, которые лежат внутри двух и более элементов списка, то есть ссылки на втором уровне и ниже.
Также мы изменим поведение при наведении для подпунктов. Селектор будет очень похож на предыдущий:
.main-menu li li a:hover
menu-13.html
Тестируем на большой вложенности [14/28]
Оформление завершено. Теперь проверим, как ведут себя наши стили, когда меню содержит больше двух уровней вложенности.
Мы разметили трехуровневый список, но не добавили ему класс меню, поэтому он выглядит не очень красиво. Добавьте списку класс main-menu и посмотрите, как он преобразится.
menu-14.html
Испытание: многоуровневое меню [15/28]
Оформите многоуровневое меню. HTML-код уже готов и его изменить невозможно.
Обратите внимание, что оформление пунктов здесь проще, чем в предыдущих заданиях и использовать отрицательные отступы не нужно.
В испытании используются следующие цвета:
#ffffff
#2980b9 синий
#2c3e50 темный
#1abc9c зеленый
Подсказки: все размеры и отступы кратны 5. Толщина рамок у пунктов меню 2px. И у подменю, и у пунктов подменю есть свои отступы
Горизонтальное меню [16/28]
Теперь из того же самого списка создадим горизонтальное меню.
Начнем с этапа, когда HTML-код уже размечен и заданы стили для контейнера. Теперь нужно преобразовать вертикальный список в горизонтальное меню.
Простейший способ сделать это — задать элементам списка строчный тип. Тогда они автоматически расположатся в одну строку. Также добавим им небольшой отступ справа.
Кстати, мы не задали ширину контейнеру, т.к. обычно горизонтальные меню занимают всю ширину макета.
Что повторить:
Управление типом элемента, свойство display
Что делать, если пункты не влезают? [17/28]
У горизонтальных меню есть одна неприятная особенность. Иногда все пункты меню не влезают в одну строку. Как решить эту проблему?
На самом деле никак. Всегда может возникнуть ситуация, когда что-то не влезло, её не избежать. Но предусматривать такую ситуацию надо.
Главное правило — ссылки в меню должны быть доступны и видимы при любых обстоятельствах. Пусть они переносятся на другую строку и меню выглядит не так красиво, но главное, что ссылки видны.
Мы можем только уменьшить вред от этого эффекта. Например, сделать так, чтобы пункты меню переносились на новую строку целиком, запретив переносы текста внутри них.
Что повторить:
Управляем пробелами: white-space