В этом уроке вы потренируетесь работать с базовыми свойствами оформления текста: изменять насыщенность шрифта (жирный), стиль начертания (курсив) и добавлять декоративные линии (подчеркивание). Задания включают работу с селекторами, классами и комбинированием свойств.
Список тем
- Модуль 1: Основы CSS
- Селекторы элементов.
- Селекторы классов и идентификаторов.
- Цвет текста и фона.
- Размеры и единицы измерения в CSS.
- Семейство шрифта и базовые свойства текста.
- Стилизация текста (жирный, курсив, подчеркивание).
- Выравнивание и интервалы текста.
- Комбинированные селекторы.
- Псевдоклассы для ссылок.
- Приоритеты стилей и каскадность.
- Наследование в CSS.
- Модуль 2: Блочная модель и позиционирование
- Блочная модель CSS (box model).
- Внутренние отступы (padding).
- Внешние отступы (margin).
- Границы элементов (border).
- Сокращенная запись свойств границ.
- Радиус скругления углов (border-radius).
- Свойство display и его значения.
- Блочные элементы (display: block).
- Строчные элементы (display: inline).
- Строчно-блочные элементы (display: inline-block).
- Скрытие элементов (display: none, visibility: hidden).
- Статичное позиционирование (position: static).
- Относительное позиционирование (position: relative).
- Абсолютное позиционирование (position: absolute).
- Фиксированное позиционирование (position: fixed).
- Липкое позиционирование (position: sticky).
- Свойство z-index и порядок наложения элементов.
- Свойство float и его применение.
- Свойство clear для обтекания.
- Центрирование элементов различными способами.
- Модуль 3: Селекторы CSS продвинутый уровень
- Групповые селекторы.
- Селекторы потомков (descendant selectors).
- Дочерние селекторы (child selectors).
- Соседние селекторы (adjacent sibling selectors).
- Общие сиблинги (general sibling selectors).
- Селекторы атрибутов: точное совпадение.
- Селекторы атрибутов: частичное совпадение.
- Псевдоклассы состояний (:hover, :active, :focus, :visited).
- Псевдоклассы для форм (:checked, :disabled, :required).
- Структурные псевдоклассы (:first-child, :last-child).
- Псевдоклассы :nth-child() и :nth-of-type().
- Псевдоклассы :not() и :empty.
- Псевдоэлементы ::before и ::after.
- Псевдоэлементы ::first-letter и ::first-line.
- Псевдоэлемент ::selection.
- Псевдоэлемент ::placeholder.
- Комбинирование псевдоклассов и псевдоэлементов.
- Создание декоративных элементов с помощью псевдоэлементов.
- Модуль 4: Работа с фоном и визуальными эффектами
- Фоновый цвет (background-color).
- Фоновое изображение (background-image).
- Повторение фона (background-repeat).
- Позиционирование фона (background-position).
- Размер фона (background-size).
- Фиксация фона (background-attachment).
- Сокращенная запись свойств фона.
- Множественные фоновые изображения.
- Линейные градиенты (linear-gradient).
- Радиальные градиенты (radial-gradient).
- Конические градиенты (conic-gradient).
- Тень блока (box-shadow).
- Тень текста (text-shadow).
- Прозрачность (opacity).
- Фильтры (filter: blur, grayscale, etc.).
- Режимы смешивания (mix-blend-mode, background-blend-mode).
- Маски с mask-image.
- Формы с clip-path.
- Модуль 5: Типографика продвинутый уровень
- Межстрочное расстояние (line-height).
- Интервалы между буквами (letter-spacing).
- Интервалы между словами (word-spacing).
- Трансформация текста (text-transform).
- Декорирование текста (text-decoration).
- Перенос слов (word-break, overflow-wrap).
- Управление пробелами (white-space).
- Многоколоночный текст (columns).
- Обрезка текста (text-overflow, ellipsis).
- Вертикальное выравнивание текста (vertical-align).
- Направление текста (direction, writing-mode).
- Веб-шрифты и @font-face.
- Модуль 6: Flexbox
- Введение в Flexbox.
- Включение Flexbox (display: flex).
- Flex-контейнер и flex-direction.
- Выравнивание с justify-content.
- Выравнивание с align-items.
- Выравнивание с align-content.
- Свойство align-self для отдельных элементов.
- Свойство flex-wrap.
- Свойство flex-flow (сокращение для direction и wrap).
- Свойство flex-grow.
- Свойство flex-shrink.
- Свойство flex-basis.
- Сокращенное свойство flex.
- Порядок элементов с order.
- Сложные макеты на Flexbox.
- Вложенные flex-контейнеры.
- Создание адаптивной навигационной панели с Flexbox.
- Модуль 7: CSS Grid Layout
- Введение в Grid Layout.
- Включение Grid Layout (display: grid).
- Создание сетки: grid-template-columns.
- Создание сетки: grid-template-rows.
- Единица измерения fr.
- Функция repeat().
- Промежутки с gap, row-gap, column-gap.
- Размещение элементов: grid-column.
- Размещение элементов: grid-row.
- Сокращенная запись grid-area.
- Именованные линии и области.
- Свойство grid-template-areas.
- Автоматическое размещение элементов.
- Автоматические треки (grid-auto-rows, grid-auto-columns).
- Управление потоком элементов (grid-auto-flow).
- Выравнивание в Grid: justify-items и align-items.
- Выравнивание в Grid: justify-content и align-content.
- Выравнивание отдельного элемента (justify-self, align-self).
- Сложные макеты на Grid.
- Комбинирование Grid и Flexbox.
- Модуль 8: Трансформации и переходы
- Трансформации: translate.
- Трансформации: scale.
- Трансформации: rotate.
- Трансформации: skew.
- Комбинирование трансформаций.
- Точка трансформации с transform-origin.
- 3D-трансформации и перспектива.
- Переходы с transition-property.
- Длительность перехода с transition-duration.
- Функции плавности с transition-timing-function.
- Задержка с transition-delay.
- Сокращенное свойство transition.
- Переходы для нескольких свойств.
- Создание интерактивных элементов с переходами.
- Производительность трансформаций и переходов.
- Модуль 9: Анимации
- Создание keyframes.
- Свойство animation-name.
- Свойство animation-duration.
- Свойство animation-timing-function.
- Свойство animation-delay.
- Свойство animation-iteration-count.
- Свойство animation-direction.
- Свойство animation-fill-mode.
- Свойство animation-play-state.
- Сокращенное свойство animation.
- Множественные анимации.
- Создание сложных анимаций.
- Анимации с использованием переменных.
- Оптимизация производительности анимаций.
- Анимации и доступность.
- Модуль 10: Адаптивный дизайн
- Относительные единицы измерения (%, em, rem).
- Единицы vh и vw.
- Медиа-запросы: основы.
- Медиа-запросы: max-width и min-width.
- Медиа-запросы: ориентация устройства.
- Медиа-запросы: типы устройств и медиа-функции.
- Mobile-first подход.
- Адаптивные изображения.
- Элемент picture и атрибуты srcset/sizes.
- Адаптивная типографика.
- Адаптивная навигация.
- Адаптивные таблицы.
- Адаптивные формы.
- Отзывчивые медиа (видео, iframe).
- Тестирование адаптивности.
- Модуль 11: Формы и CSS
- Базовая стилизация input и button.
- Стилизация textarea.
- Стилизация состояний форм (:focus, :valid, :invalid).
- Стилизация placeholder.
- Кастомизация radio и checkbox с помощью CSS.
- Стилизация select и option.
- Создание кастомных выпадающих списков.
- Стилизация range input.
- Стилизация file input.
- Валидация форм и стилизация сообщений об ошибках.
- Модуль 12: Современные возможности CSS
- Переменные CSS (Custom Properties).
- Область видимости переменных.
- Функция calc().
- Свойство object-fit для изображений.
- Свойство object-position.
- Scroll Snap.
- Контейнерные запросы (Container Queries).
- Подсеточные элементы (Subgrid).
- Логические свойства (logical properties).
- CSS Houdini (введение).
- Feature Queries (@supports).
- Новые селекторы CSS (is(), where(), has()).
- Модуль 13: Практические проекты
- Создание адаптивной навигационной панели.
- Создание карточек товаров.
- Создание слайдера изображений на CSS.
- Создание табов.
- Создание дропдаун-меню.
- Создание галереи изображений с фильтрами.
- Создание анимированных иконок.
- Создание адаптивного лендинга.
- Создание тёмной темы с CSS-переменными.
- Создание анимированных кнопок.
- Создание анимированных форм.
- Создание сетки изображений с hover-эффектами.
- Создание адаптивного футера.
- Создание макета блога на CSS Grid.
- Создание адаптивного дашборда.
- Создание интерактивной формы с анимациями.
- Создание CSS-арта.
Сделать текст жирным
Задайте абзацу с id='target' жирное начертание используя свойство font-weight.
CSS
#target {
input1: input2;
}HTML
<p id="target">Этот текст должен быть жирным</p>
Используйте свойство, управляющее "толщиной" текста. Допустимы как ключевые слова, так и числовые значения.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Курсивное начертание
Сделайте текст в блоке с классом .quote курсивным.
CSS
.quote {
input1: italic;
}HTML
<div class="quote">Цитата должна отображаться курсивом</div>
Для изменения стиля начертания используйте соответствующее свойство font-style.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Подчеркнутый заголовок
Добавьте нижнее подчеркивание для заголовка h2.
CSS
h2 {
input1: underline;
}HTML
<h2>Важный заголовок с подчеркиванием</h2>
Для декоративного оформления используйте свойство text-decoration.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Комбинирование стилей
Сделайте текст одновременно жирным и курсивным в блоке .special.
CSS
.special {
input1: bold;
input2: italic;
}HTML
<p class="special">Комбинированный стиль текста</p>
Нужно объединить два разных свойства в одном правиле.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Убрать подчеркивание ссылки
Сделайте так, чтобы ссылка в блоке .no-underline не имела подчеркивания.
CSS
.no-underline a {
input1: none;
}HTML
<div class="no-underline">
<a href="#">Ссылка без подчеркивания</a>
</div>
Используйте свойство text-decoration со значением none.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Множественное подчеркивание
Добавьте двойное подчеркивание и верхнюю линию для текста.
CSS
.double-line {
text-decoration-line: underline overline;
text-decoration-style: input1;
}HTML
<span class="double-line">Текст с двумя линиями</span>
Используйте расширенный синтаксис text-decoration-line и text-decoration-style.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Стилизация части текста
Сделайте слово 'важно' в предложении подчеркнутым и жирным.
CSS
.highlight {
input1: underline;
input2: bold;
}HTML
<p>Это <span class="highlight">важно</span> для понимания</p>
Используйте span с классом для точечного стиля.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Переопределение стилей
Сделайте текст в .override жирным, даже если есть другие стили.
CSS
.override {
font-weight: input1;
}HTML
<div class="override" style="font-weight: normal;">Этот текст должен быть жирным</div>
Используйте !important для приоритета свойства.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Капитель и курсив
Сделайте текст в блоке .caps курсивным с капителью.
CSS
.caps {
input1: italic;
input2: small-caps;
}HTML
<div class="caps">Текст с капителью и курсивом</div>
Комбинируйте font-style и font-variant.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Загрузка...