Работа с текстом
Уровень: Начинающий
Задача по HTML и CSS: работа с тегами для оформления текста и стилизация текста используя CSS.
Выполните все пункты задания и сравните с результатом. Для поиска неизвестных вам тегов и свойств используйте поиск справочника.
- Создайте папку в удобном для вас месте на вашем компьютере
- В этой папке создайте новый HTML документ - index.html
- В index.html создайте HTML скелет документа
- Создайте новый CSS файл - style.css
- Подключите CSS файл к HTML файлу
- Создайте заголовок первого уровня в теге body и напишите там текст "Оформление текста"
- Добавьте данному заголовку класс title
- В CSS файле в самом верху создайте селектор для тега body и напишите следующие стили - шрифт Arial, sans-serif, размер шрифта 16px, цвет текста #333, межстрочный отступ 1.5
- В CSS файле создайте селектор для класса title, и напишите следующие стили - размер шрифта 40px, цвет текста #f03333, межстрочный отступ 1.2, все буквы заглавные
- После заголовка создайте абзац и напишите там немного текста, можете использовать сайт-генератор случайного текста lipsum.com
- После абзаца создайте заголовок второго уровня, напишите текст "Заголовок второго уровня" и придайте ему класс subtitle
- В CSS файле создайте селектор для класса subtitle, и напишите следующие стили - размер шрифта 30px, цвет текста #12ac11, межстрочный отступ 1.2, подчеркивание текста снизу
- После заголовка создайте абзац и напишите там немного текста, можете использовать сайт-генератор случайного текста lipsum.com
- После абзаца создайте ненумерованный список с тремя пунктами
- В каждом пункте напишите немного текста, на свой выбор
- Задайте списку класс list
- В CSS файле создайте селектор для класса list, и напишите следующие стили - размер шрифта 20px, цвет текста #444, все буквы наклонные, стиль маркеров списка - square
Результат
See the Pen Работа с текстом by Dmitry Valak (@dmitryvalak) on CodePen.
Если хотите поделиться своим решением, используйте сайты типа codepen.io и оставляйте ссылку в комментарии