- •Ещё более многоуровневый список [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]
Горизонтальное выравнивание текста: text-align[11/16]
Выравнивание текста по горизонтали задается с помощью свойства text-align. Его вы ужеиспользовали в курсе про таблицы. Значения свойства:
left — выравнивание по левому краю;
right — по правому краю;
center — по центру;
justify — по ширине.
Вертикальное выравнивание: vertical-align [12/16]
Выравниванием текста по вертикали можно управлять с помощью свойства vertical-align. Его действие хорошо заметно в ячейках таблицы. Внутри текстовой строки «работа» этого свойства заметна, если в ней есть фрагменты разного размера.
У данного свойства много значений, но самые часто используемые:
top — выравнивание по верхнему краю строки;
middle — по середине;
bottom — по нижнему краю;
baseline — по базовой линии (значение по умолчанию).
Верхние и нижние индексы на css [13/16]
Тэги
С помощью CSS можно имитировать теги <sub> и <sup>, которые применяются для создания нижних и верхних индексов. Делается это так:
Значения
Используем свойство vertical-align со значением sub или super.
Немного уменьшаем размер шрифта с помощью font-size.
Свойство line-height: управляем высотой строки[14/16]
Высотой строки или, правильнее, межстрочным интервалом можно управлять с помощью свойства line-height. Значение этого свойства можно задавать следующими способами:
Множителем, например 1.5, 2.
В процентах: 150%.
С помощью любых других единиц измерения CSS: 12px, 2em.
Ключевым словом normal, которое задает автоматический расчет высоты строки.
Предпочтительнее задавать межстрочный интервал либо множителем, либо в относительных единицах измерения.
Вертикальный ритм текста [15/16]
В веб-дизайне существует понятие «вертикальный ритм текста». Оно достаточно сложное и мы не будем глубоко в него вдаваться. Отметим лишь, что хороший вертикальный ритм улучшает восприятие текста.
Чтобы сохранить вертикальный ритм и хорошую читабельность текста при любом размере шрифта, нужно задавать размеры шрифта, межстрочный интервал и вертикальные отступы между заголовками и абзацами в относительных единицах.
Тогда, как бы пользователь ни изменял размер шрифта, ваш текст останется читабельным и удобным для восприятия. В этом задании вы потренируетесь использовать относительные единицы измерения.
Дополнительные материалы для тех, кто заинтересовался вертикальным ритмом:О вёрстке вертикального ритма, Compose to a Vertical Rhythm, Создание вертикального ритма на сайте, Генератор вертикального ритма.
Файл css41.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вертикальный ритм текста</title>
<style>
body {
font-size: 16px;
line-height: 1.3;
}
h1 {
margin-top: 0.7em;
font-size: 1.3em;
}
p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
</style>
</head>
<body>
<h1>Вертикальный ритм</h1>
<p>В веб-дизайне существует понятие «вертикальный ритм текста». Оно достаточно сложное и мы не будем глубоко в него вдаваться. Отметим лишь, что хороший вертикальный ритм улучшает восприятие текста.</p>
<h1>Правило относительных размеров</h1>
<p>Чтобы сохранить вертикальный ритм и хорошую читабельность текста при любом размере шрифта, нужно задавать размеры шрифта, межстрочный интервал и вертикальные отступы между заголовками и абзацами в относительных единицах.</p>
<p>Тогда, как бы пользователь ни изменял размер шрифта, ваш текст останется читабельным и удобным для восприятия. В этом задании вы потренируетесь использовать относительные единицы измерения.</p>
</body>
</html>