Испытание по селекторам
Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 16 из 76.
Задание
ЛегкоВам дан HTML-документ с различными элементами, включая заголовки (<h1>, <h2>), параграфы (<p>), блок (<div>) и маркированный список (<ul>) с элементами списка (<li>). Ваша задача — использовать различные типы селекторов для стилизации этих элементов. Выполните следующие шаги:
- Напишите CSS-правило, используя селектор типа, которое выбирает все элементы
<p>. Установите цвет текста на blue и размер шрифта на 16 пикселей. - Добавьте атрибут
classсо значением "highlight" к элементу<h2>и элементу<div>. - Напишите CSS-правило, используя селектор класса, которое выбирает все элементы с классом "highlight". Установите цвет фона на yellow.
- Добавьте атрибут
idсо значением "special" к элементу<ul>. - Напишите CSS-правило, используя селектор ID, которое выбирает элемент с ID "special". Установите цвет фона на lightgray и размер шрифта на 20 пикселей.
- Напишите CSS-правило, используя групповой селектор, которое выбирает все элементы
<h1>и<li>. Установите цвет текста на red.
Попробуйте сами
<html>
<head>
<title>Selection Challenge</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is a division.</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>Все уроки раздела Styling with CSS
4Основы работы с текстом
Цвет текстаСемейство шрифтовРазмер шрифтаНасыщенность шрифтаВыравнивание текстаОформление текстаПовторение: Задача №1Повторение: Задача №2
11Методы верстки
Блочные и строчные элементыОсновы позиционированияОтносительное позиционированиеАбсолютное позиционированиеФиксированное позиционированиеОсновы Z-IndexИтоговое испытание14Финальные испытания
Расположение элементовСписок фильмовСвадебное приглашениеВсплывающее уведомление