- Как использовать символы Unicode в CSS
- Использование символов Unicode в свойстве Content
- Пример использования свойства Content
- Пример использования символов Unicode в свойстве Content
- Некоторые символы Unicode
- Спецсимволы HTML
- Оформление текста и пунктуация
- Кавычки и скобки
- Математические знаки
- Стрелки и указатели
- Html unicode символы вставить
- Как вставить «смайлики» из Юникода в сообщение
Как использовать символы Unicode в CSS
Для использования символов Unicode в CSS первым делом нужно объявить соответствующую кодировку; рекомендуется UTF-8. Это делается с помощью так называемого эт-правила @charset в самом начале файла, то есть первой строкой:
Синтаксис: сначала указывается @charset ; затем — ровно ОДИН пробел; затем — имя кодировки в ДВОЙНЫХ кавычках; затем — точка с запятой. Синтаксис должен быть точно таким, как указан здесь, Это ВАЖНО, так как иначе будет ошибка. То есть нельзя использовать между @charset и названием кодировки больше или меньше одного пробела; нельзя заключать имя кодировки в одинарные кавычки; обязательно нужно ставить точку с запятой в конце; также ничего нельзя писать ПЕРЕД @charset , включая комментарии, то есть первым символом в файле должен быть «эт» (@; «собака», по-нашему).
Однако одного обявления кодировки мало: нужно чтобы и само содержимое файла стилей было закодировано в объявленой кодировке. Что это значит.
Эт-правилом @charset мы просто указываем браузеру какой алгоритм кодирования ему нужно использовать, чтобы правильно прочесть содержимое файла, однако само содержимое может быть закодировано по другому алгоритму и тогда, как вы понимаете, браузер обработает файл некорректно. Обычно в большинстве редакторов кода текущая кодировка файла вместе с другой полезной информацией отображается в строке статуса (в нижней части окна), а изменить её можно через меню — эта возможность есть, поищите; описывать в данном посте где именно она находится для всех редакторов, коих сотни, а то и тысячи, по понятным причинам я не стал; если не найдёте, напишите мне — я вам подскажу.
Если вы будете изменять кодировку файла, то учтите, что в некоторых редакторах может быть два пункта меню, которые могут сбить вас с толку: Кодировать в
.
Преобразовать в Нужно выбрать именно Преобразовать в .
На самом деле указывать кодировку в файле стилей необязательно ЕСЛИ она обявлена в HTML-документе, но ещё раз напомню: кодировка содержимого файла должна совпадать с объявленной. Это, кстати, касается не только CSS, но и абсолютно любых других областей — ведь если вы говорите, что следующие данные нужно обработать по алгоритму указанной кодировки, то вы же и должны предоставить закодированные этим же алгоритмом данные.
Я так заостряю ваше внимание на том, что помимо объявления кодировки нужно чтобы и данные были в той же кодировке, так как на этом очень часто спотыкаются и не понимают почему всё в кракозябрах.
Тем не менее, хоть и кодировку в файле стилей объявлять необязательно ЕСЛИ она обявлена в HTML-документе, как я уже сказал выше, всё равно лучше это сделать, так как мало ли что ☺:
Рекомендую ВСЕГДА ВЕЗДЕ объявлять кодировки и использовать, по крайней мере в Web’е, именно UTF-8!
Использование символов Unicode в свойстве Content
Рассмотрим CSS-свойство content , которое используется совместно с псевдоэлементами ::before и ::after . В данном свойстве указывается контент, который будет помещён перед или после элемента, к которому применяется соответствующий псевдоэлемент:
selector::before, selector::after < content: "строка"; >строка любой набор символов, который выводится как есть, кроме экранированных последовательнойстей (см. далее).
Пример использования свойства Content
Контент, добавленный с помощью свойства content не выделяется курсором мыши и не копируется в буфер обмена.
Пример использования символов Unicode в свойстве Content
Допустим, нужно вывести с помощью свойства content после некоторого элемента смайлик (☺), который имеет номер в Unicode u+263a ; это запишется так:
То есть номер символа в Unicode нужно просто проэкранировать обратным слешем (\).
Также отмечу — впередистоящие нули можно не указывать: \0030 идентично \30 .
Второй способ — это указать символ непосредственно:
Чтобы добавляемые через content пробельные символы Unicode (пробелы, табуляции и переводы строк) отображались как есть (имеется в виду предварительное форматирование), для элемента должно быть определено свойство white-space со значением pre или подобным ему.
Некоторые символы Unicode
| # | Название по-русски | Название по-английски | Вид | Мнемоника | HTML-код | Unicode |
|---|---|---|---|---|---|---|
| 1 | Горизонтальная табуляция | Horizontal Tabulation | u+0009 | |||
| 2 | Перевод строки (разделитель строк в Unix) | New Line (Nl) | u+000a | |||
| 3 | Вертикальная табуляция | Vertical Tabulation | u+000b | |||
| 4 | Пробел | Space | u+0020 | |||
| 5 | Двойная кавычка (универсальная) | Quotation Mark | « | " | " | u+0022 |
| 6 | Амперсанд | Ampersand | & | & | & | u+0026 |
| 7 | Апостроф (одинарная кавычка) | Apostrophe | ‘ | ' | ' | u+0027 |
| 8 | Знак меньше | Less-Than Sign | < | < | u+003c | |
| 9 | Знак больше | Greater-Than Sign | > | > | > | u+003e |
| 10 | Неразрывный пробел | No-Break Space | u+00a0 |
К слову, заметим, что мнемоники (частично) соответствуют названию символа по-английски; пример: — N o- B reak SP ace.
Спецсимволы HTML
Таблица спецсимволов HTML, содержит самые популярные символы для верстки и оформления контента веб-страниц.
Чтобы разместить символ на странице, необходимо скопировать код символа и вставить в исходный HTML-код страницы.
Спецсимволы чувствительны к регистру, поэтому их необходимо прописывать точно так, как указано в таблице.
Оформление текста и пунктуация
| Код | Символ | Описание |
|---|---|---|
| Неразрывный пробел | ||
| Узкий пробел (длины N) | ||
| Широкий пробел (длины M) | ||
| … | … | Многоточие |
| . | . | Точка |
| , | , | Запятая |
| : | : | Двоеточие |
| ; | ; | Точка с запятой |
| ! | ! | Восклицательный знак |
| ? | ? | Вопросительный знак |
| ¿ | ¿ | Перевернутый вопросительный знак |
| – | | Дефис |
| – | – | Обычное тире (длины N) |
| — | — | Обычное тире (длины M) |
| @ | @ | Собачка |
| * | * | Звездочка |
| # | # | Решетка |
| ¶ | ¶ | Абзац |
| § | § | Параграф |
| ́ | ́ | Ударение |
| ' | ‘ | Апостроф |
| ´ | ´ | Акут |
| ˆ | ˆ | Акцент |
| ˜ | ˜ | Малая тильда |
| / | / | Символ косой черты (slash) |
| \ | \ | Обратный слэш (backslash) |
| ⁄ | ⁄ | Косая дробная черта (деление) |
| ǀ | ǀ | Вертикальная черта |
| • | • | Простой маркер |
| · | · | Средняя точка |
| ○ | ○ | Круг |
Кавычки и скобки
| Код | Символ | Описание |
|---|---|---|
| " | « | Двойная кавычка |
| ‘ | ‘ | Одиночная верхняя левая кавычка |
| ’ | ’ | Одиночная верхняя правая кавычка |
| ‚ | ‚ | Одиночная нижняя правая кавычка |
| “ | “ | Двойная верхняя левая кавычка |
| ” | ” | Двойная верхняя правая кавычка |
| „ | „ | Двойная нижняя правая кавычка |
| « | « | Двойная левая угловая кавычка |
| » | » | Двойная правая угловая кавычка |
| ( | ( | Круглая скобка влево |
| ) | ) | Круглая скобка вправо |
| ⟨ | 〈 | Угловая скобка влево |
| ⟩ | 〉 | Угловая скобка вправо |
| &#lsaquo; | ‹ | Угловая скобка влево, вариант |
| &#rsaquo; | › | Угловая скобка вправо, вариант |
| [ | [ | Квадратная скобка влево |
| ] | ] | Квадратная скобка вправо |
| ❛ | ❛ | Одиночная английская кавычка открывающая |
| ❜ | ❜ | Одиночная английская кавычка закрывающая |
| ❝ | ❝ | Двойная английская кавычка открывающая |
| ❞ | ❞ | Двойная английская кавычка закрывающая |
Математические знаки
| Код | Символ | Описание |
|---|---|---|
| + | + | Плюс |
| − | − | Минус |
| = | = | Равно |
| × | × | Умножение |
| ÷ | ÷ | Деление |
| ± | ± | Плюс-минус |
| ¹ | ¹ | Верхний индекс «1» |
| ² | ² | Верхний индекс «2» |
| ³ | ³ | Верхний индекс «3» |
| ½ | ½ | Дробь «одна вторая» |
| ⅓ | ⅓ | Дробь «одна треть» |
| ¼ | ¼ | Дробь «одна четвёртая» |
| ¾ | ¾ | Дробь «три четверти» |
| № | № | Номер |
| % | % | Процент |
| ‰ | ‰ | Промилле |
| ‱ | ‱ | Знак на десять тысяч |
| µ | µ | Микро |
| π | π | Пи |
| ƒ | ƒ | Функции |
| ∫ | ∫ | Интеграл |
| ∏ | ∏ | Произведение |
| ∑ | ∑ | Суммирование |
| √ | √ | Радикал |
| ∞ | ∞ | Бесконечность |
| ∝ | ∝ | Пропорционально |
| ≅ | ≅ | Приблизительно равно |
| ≈ | ≈ | Почти равно |
| ≠ | ≠ | Не равно |
| ≡ | ≡ | Идентично |
| ≤ | ≤ | Меньше или равно |
| ≥ | ≥ | Больше или равно |
| ∑ | ∑ | Суммирование |
Стрелки и указатели
| Код | Символ | Описание |
|---|---|---|
| ← | ← | Стрелка влево |
| ↑ | ↑ | Стрелка вверх |
| → | → | Стрелка вправо |
| ↓ | ↓ | Стрелка вниз |
| ↔ | ↔ | Стрелка влево-вправо |
| ⇆ | ⇆ | Стрелка влево-вправо |
| ⇐ | ⇐ | Двойная стрелка влево |
| ⇑ | ⇑ | Двойная стрелка вверх |
| ⇒ | ⇒ | Двойная стрелка вправо |
| ⇓ | ⇓ | Двойная стрелка вниз |
| ⇔ | ⇔ | Двойная стрелка влево-вправо |
| ⇕ | ⇕ | Двойная стрелка вверх и вниз |
| ⇧ | ⇧ | Толстая полая стрелка вверх |
| ⬇ | ⬇ | Закрашенная стрелка вниз |
| ⬆ | ⬆ | Закрашенная стрелка вверх |
| ➥ | ➥ | Изогнутая стрела, указывающая вниз и вправо |
| ➦ | ➦ | Изогнутая стрела, указывающая вверх и вправо |
| ↺ | ↺ | Круглая стрелка с наконечником против часовой стрелки |
| ↻ | ↻ | Круглая стрелка с наконечником против часовой стрелки |
| ↵ | ↵ | Возврат каретки |
| ↩ | ↩ | Стрелка налево с крючком |
| ▲ | ▲ | Треугольная стрелка вверх |
| ▼ | ▼ | Треугольная стрелка вниз |
| ► | ► | Треугольная стрелка вправо |
| ◄ | ◄ | Треугольная стрелка влево |
| ☚ | ☚ | Указательный палец закрашенный влево |
| ☛ | ☛ | Указательный палец закрашенный вправо |
| ☜ | ☜ | Указательный палец прозрачный влево |
| ☝ | ☝ | Указательный палец прозрачный вверх |
| ☞ | ☞ | Указательный палец прозрачный вправо |
| ☟ | ☟ | Указательный палец прозрачный вниз |
| ˂ | ˂ | Направление влево |
| ˃ | ˃ | Направление вправо |
| ˄ | ˄ | Направление прямо |
| ˅ | ˅ | Направление назад |
Html unicode символы вставить
БлогNot. Как вставить «смайлики» из Юникода в сообщение
Как вставить «смайлики» из Юникода в сообщение
. если в форме ввода ресурса нет подходящих «заготовок», часто задают подобные вопросы.
- по имени мнемоники, если таковое есть, например, © — это знак копирайта;
- с помощью десятичного HTML-кода, имеющего вид c..9; , где «9» — десятичные цифры, для нашего знака получится ©
- с помощью 16-ричного кода вида ÿ..F; , где «F» — шестнадцатеричные цифры например, © или 😏
- для применения в стиле CSS это изображается как \00A9 , вот пример стилевого указания в документе .html:
.phone:beforeНаш телефон 323-232-223-322
Конечно, серверное или stand-alone приложение должно позволять и не фильтровать вставку таких символов, чтобы всё работало.
Вот изображения и десятичные коды некоторых актуальных символов, о которых шла речь:
| Вид | Десятичный код | Описание |
| ☹ | ☹ | дизлайк |
| 😏 | 😏 | усмешка |
| 😒 | 😒 | неодобрение |
| 😓 | 😓 | холодный пот |
| 😞 | 😞 | разочарование |
| 😖 | 😖 | стыд |
| 😟 | 😟 | волнение |
| 😠 | 😠 | злость |
| 😢 | 😢 | слёзы |
| 😧 | 😧 | мучение |
| 😨 | 😨 | страх |
| 😱 | 😱 | ужас |
| 😶 | 😶 | немота |
| 😷 | 😷 | маска |
| 🤥 | 🤥 | ложь |
| 🤫 | 🤫 | молчание |
| 🤢 | 🤢 | тошнота |
| 🤮 | 🤮 | рвота |
| :- или .~ | сарказм (так как знак был некогда запатентован) |
Увы, символы могут несколько по-разному выглядеть в разных браузерах или вообще не выводиться (например, в «Хроме» и «Яндекс браузере» смайликов не видно, а в Firefox, MS Edge и Internet Explorer 11 — да), и до всеобщего перехода с «просто» utf8 на utf8mb4 это будет так.
23.03.2022, 13:09 [789 просмотров]