Оформление текста, часть 2 / Unicode-символы [1/26]
×

Unicode-символы [1/26]

В этом курсе мы продолжим изучать возможности по оформлению текста с помощью CSS, которые не были рассмотрены в первом курсе.

Мы будем создавать подписи к фотографиям и красивые текстовые элементы дизайна, а также рассмотрим приёмы оформления длинных текстов.

А для начала давайте создадим небольшой комикс. Он будет состоять всего из четырёх графических символов, которые познакомят нас с историей главного героя комикса — смайлика.

Но где нам взять графические символы? Тут на помощь придёт кодировка Unicode. Помимо тех символов, которые помещаются у нас на клавиатуре, в стандарте кодирования Unicode представлены знаки почти всех письменных языков, а также разные специальные символы. В разметке HTML возможно написать любой символ Unicode, используя специальные ссылки-мнемоники: в виде слова, например, &название; или в числовом обозначении с использованием десятичного или шестнадцатиричного кода, например, à.

Примеры Unicode-символов:

© © ©
α α α
¶ ¶

Есть специальный сервис, где можно найти и скопировать нужный символ.

С теорией разобрались, давайте же создадим комикс про приключения смайлика.

Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Unicode-символы</title> <meta charset="utf-8"> <base href="/assets/course79/"> </head> <body> <h1>Поездка в Мексику</h1> <p> <span></span> <span></span> <span></span> <span></span> </p> </body> </html>
CSS
body { font-family: "Arial", sans-serif; text-align: center; } span { display: inline-block; width: 140px; margin-right: 12px; font-size: 150px; } span:first-child { color: #ffdc00; } span:nth-child(2) { color: #aaaaaa; } span:nth-child(3) { color: #ff851b; } span:last-child { color: #ff4136; } p { display: inline-block; width: 80%; }
HTML Academy
  1. В первый span добавьте символ &#9786;,
  2. во второй — &#9992;,
  3. в третий — &#9788;,
  4. в четвёртый — &hearts;.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.