Символ в css коде

Как использовать символы 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»
½	½	Дробь «одна вторая»
⅓	⅓	Дробь «одна треть»
¼	¼	Дробь «одна четвёртая»
¾	¾	Дробь «три четверти»
№	№	Номер
%	%	Процент
‰	‰	Промилле
‱	‱	Знак на десять тысяч
µ	µ	Микро
π	π	Пи
ƒ	ƒ	Функции
∫	∫	Интеграл
∏	∏	Произведение
∑	∑	Суммирование
√	√	Радикал
∞	∞	Бесконечность
∝	∝	Пропорционально
≅	≅	Приблизительно равно
≈	≈	Почти равно
≠	≠	Не равно
≡	≡	Идентично
≤	≤	Меньше или равно
≥	≥	Больше или равно
∑	∑	Суммирование

Стрелки и указатели

Код	Символ	Описание
←	←	Стрелка влево
↑	↑	Стрелка вверх
→	→	Стрелка вправо
↓	↓	Стрелка вниз
↔	↔	Стрелка влево-вправо
⇆	⇆	Стрелка влево-вправо
⇐	⇐	Двойная стрелка влево
⇑	⇑	Двойная стрелка вверх
⇒	⇒	Двойная стрелка вправо
⇓	⇓	Двойная стрелка вниз
⇔	⇔	Двойная стрелка влево-вправо
⇕	⇕	Двойная стрелка вверх и вниз
⇧	⇧	Толстая полая стрелка вверх
⬇	⬇	Закрашенная стрелка вниз
⬆	⬆	Закрашенная стрелка вверх
➥	➥	Изогнутая стрела, указывающая вниз и вправо
➦	➦	Изогнутая стрела, указывающая вверх и вправо
↺	↺	Круглая стрелка с наконечником против часовой стрелки
↻	↻	Круглая стрелка с наконечником против часовой стрелки
↵	↵	Возврат каретки
↩	↩	Стрелка налево с крючком
▲	▲	Треугольная стрелка вверх
▼	▼	Треугольная стрелка вниз
►	►	Треугольная стрелка вправо
◄	◄	Треугольная стрелка влево
☚	☚	Указательный палец закрашенный влево
☛	☛	Указательный палец закрашенный вправо
☜	☜	Указательный палец прозрачный влево
☝	☝	Указательный палец прозрачный вверх
☞	☞	Указательный палец прозрачный вправо
☟	☟	Указательный палец прозрачный вниз
˂	˂	Направление влево
˃	˃	Направление вправо
˄	˄	Направление прямо
˅	˅	Направление назад

Источник