- •Ещё более многоуровневый список [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]
«Мультиселект» [15/18]
Раскрывающийся список можно превратить в так называемый «мультиселект», то есть список, в котором можно выбрать не один, а несколько вариантов.
Чтобы сделать это, нужно добавить к тегу <select> атрибут multiple.
Выбрать несколько вариантов можно, щёлкая по ним с зажатой клавишей Ctrl на Windows или Command на OS X.
Высоту мультиселекта можно изменять с помощью атрибута size тега <select>.
Чтобы отметить как выбранные по умолчанию одно или несколько значений, нужно к соответствующим тегам <option> добавить атрибут selected.
Поле для загрузки файлов [16/18]
Поле для загрузки файлов — это тег <input> с типом file. Для этого поля обязательным атрибутом является имя.
Чтобы поле заработало и браузер смог передать выбранный файл на сервер, необходимо добавить форме атрибут enctype со значением multipart/form-data. Не полю, а форме.
Кстати, внешний вид таких полей очень сильно отличается в зависимости от операционной системы и очень плохо изменяется с помощью стилей.
Скрытое поле [17/18]
И ещё одно невидимое и очень полезное поле. Это скрытое поле. Его используют, когда в форме нужно отправить какие-то дополнительные служебные данные, которые не вводятся пользователем.
Например, это могут быть реквизиты заказа или номер пользователя в форме оплаты.
Скрытое поле — это тег <input> с типом hidden.
Работа с css Введение в css [1/15]
В предыдущих курсах вы уже немного познакомились с CSS. В этом и последующих курсах мы разберём его детально.
Напомним, что CSS расшифровывается как «каскадные таблицы стилей». Этот язык отвечает за внешний вид HTML-страницы. Синтаксис языка достаточно прост: он состоит из селекторов и свойств.
С помощью селекторов можно сказать браузеру какие именно элементы мы хотим оформить. Свойства описывают как именно мы хотим оформить эти элементы. То есть селекторы — это снайперский прицел, а свойства — это кисть, рубанок, скальпель и перфоратор.
css/css1.html
CSS-правила [2/15]
Весь CSS-код состоит из повторяющихся блоков следующего вида:
селектор {
свойство1: значение;
свойство2: значение;
}
Такой блок называется «CSS-правило». Каждое CSS-правило содержит хотя бы один селектор и свойство.
Простейшие селекторы — это селекторы по именам тегов. С их помощью можно задать стили для всех абзацев на странице, для всех ссылок, заголовков первого уровня и так далее. Такие селекторы содержат имя тега без символов < и >. Например:
p {
/* стили для абзацев */
}
h1 {
/* стили для заголовков */
}
css/css2.html
Продвинутые селекторы [3/15]
К более сложным селекторам можно отнести селекторы с использованием классов и псевдоклассов.
Класс позволяет объединять разные элементы в смысловые группы и применять к ним одинаковое оформление. Например, можно создать класс «элементы с ошибкой» и задать ему красный цвет текста. Затем можно добавлять этот класс к любому HTML-тегу: абзацу, заголовку, элементу списка и так далее.
Класс тега можно задать с помощью атрибута class, который содержит имя класса (или имена классов через пробел). Пример:
<p class="help"></p>
<p class="help error"></p>
В примере у первого абзаца задан класс help, у второго абзаца заданы классы help и error.
Селектор с использованием класса задаётся так: .имя_класса. Например:
.help { ... }
.error { ... }
Более подробно об использовании селекторов, рассказано в курсе «Селекторы». Также вы можете посмотреть демонстрацию об использовании псевдокласса :nth-child.
css/css3.html