Назад к списку задач

Работа с текстом

Уровень: Начинающий

Задача по HTML и CSS: работа с тегами для оформления текста и стилизация текста используя CSS.

Выполните все пункты задания и сравните с результатом. Для поиска неизвестных вам тегов и свойств используйте поиск справочника.

  1. Создайте папку в удобном для вас месте на вашем компьютере
  2. В этой папке создайте новый HTML документ - index.html
  3. В index.html создайте HTML скелет документа
  4. Создайте новый CSS файл - style.css
  5. Подключите CSS файл к HTML файлу
  6. Создайте заголовок первого уровня в теге body и напишите там текст "Оформление текста"
  7. Добавьте данному заголовку класс title
  8. В CSS файле в самом верху создайте селектор для тега body и напишите следующие стили - шрифт Arial, sans-serif, размер шрифта 16px, цвет текста #333, межстрочный отступ 1.5
  9. В CSS файле создайте селектор для класса title, и напишите следующие стили - размер шрифта 40px, цвет текста #f03333, межстрочный отступ 1.2, все буквы заглавные
  10. После заголовка создайте абзац и напишите там немного текста, можете использовать сайт-генератор случайного текста lipsum.com
  11. После абзаца создайте заголовок второго уровня, напишите текст "Заголовок второго уровня" и придайте ему класс subtitle
  12. В CSS файле создайте селектор для класса subtitle, и напишите следующие стили - размер шрифта 30px, цвет текста #12ac11, межстрочный отступ 1.2, подчеркивание текста снизу
  13. После заголовка создайте абзац и напишите там немного текста, можете использовать сайт-генератор случайного текста lipsum.com
  14. После абзаца создайте ненумерованный список с тремя пунктами
  15. В каждом пункте напишите немного текста, на свой выбор
  16. Задайте списку класс list
  17. В CSS файле создайте селектор для класса list, и напишите следующие стили - размер шрифта 20px, цвет текста #444, все буквы наклонные, стиль маркеров списка - square

Результат

See the Pen Работа с текстом by Dmitry Valak (@dmitryvalak) on CodePen.

Назад к списку задач

Если хотите поделиться своим решением, используйте сайты типа codepen.io и оставляйте ссылку в комментарии

Обсуждение (36)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии

Vladis
https://codepen.io/VladisD/pen/KKdMJyY
  • Vladis
    https://codepen.io/VladisD/pen/KKdgZBQ?editors=1100
Sergii
https://codepen.io/sergii_tytarenko/pen/bGVrjVp
Алексей
https://codepen.io/Purgen_xD/pen/NWNaQLp
Denis
https://codepen.io/cameronhoff/pen/KKgozQd
Кадырбек
https://codepen.io/kadir20/pen/zYoLKJv
Abdulvaxob
https://codepen.io/Razzokov/pen/gOLVJOo
Varvaron
В 17 пункте задания написано, что все буквы должны быть наклонными (oblique), а в решении указано курсивное начертание (italic)...
Yevhenii Dodiak
https://codepen.io/makarov2021/pen/poRmYrm
Andrii
https://codepen.io/Noocrat/pen/gOmEGKV
Алексей
https://codepen.io/Loki443/pen/QWvjZry
Alex
https://codepen.io/LiLAleXan/pen/BaRzqrP
Vitalii
file:///C:/Users/Admin/OneDrive/Рабочий%20стол/New%20proect/index.html
Анна
https://codepen.io/anyuta04071983/pen/VwbOrmv
shubras
https://codepen.io/Shubras/pen/xxLyypb
Nurperi Zholdoshova
https://codepen.io/perinuri/pen/VwMdovM
Кипиш
https://codepen.io/fesspav/pen/oNGPVxO
nosia
https://codepen.io/nosia/pen/VwMRdra
  • nosia
    https://codepen.io/nosia/pen/xxpeNoQ
    • nosia
      https://codepen.io/nosia/pen/abjKMmY
Инна
https://codepen.io/Oleksiuk/pen/NWwdKWo
Насим
http://127.0.0.1:54910/index.html
Sernomay
https://codepen.io/Sernomay/pen/dyKvOqW
ilds
https://codepen.io/ilvdrskn/pen/XWYzmbP
Ehrom
https://codepen.io/Ehrom/pen/JjBBzqm
Mehman
Моё верное решение с коментариями в коде:
https://codepen.io/Mehman2006/pen/eYPMQBR
Rasl
https://codepen.io/Old_guard/pen/ZEVNBqm
Uliana
https://codepen.io/Ulyana-B/pen/vYvzGBQ
gezhaf
https://codepen.io/gezhaf/pen/KKJejRM
Андрей
https://codepen.io/Claus-Maslov/pen/oNVNqQZ
kt1ove.b25
https://codepen.io/lmgfonfr-the-bashful/pen/yLwJyWR
Kirbxee
https://codepen.io/kirbxe/pen/BaEBoWy
Владислав
https://codepen.io/dagor89/pen/yLrYZdq
Anatoliy Nosenko
https://codepen.io/nosia80/pen/XWQdEdx
Абдулла
https://codepen.io/ahmkedxy-the-encoder/pen/dyLZybE
Дмитрий
https://codepen.io/iqywfque-the-encoder/pen/ExJbzNW