Символы content css: Символы — Справочник CSS

Как использовать символы Unicode в CSS

Объявление кодировки и кодировка файла

Для использования символов Unicode в CSS первым делом нужно объявить соответствующую кодировку; рекомендуется UTF-8. Это делается с помощью так называемого эт-правила @charset в самом начале файла, то есть первой строкой:

@charset "utf-8";

Синтаксис: сначала указывается @charset; затем — ровно ОДИН пробел; затем — имя кодировки в ДВОЙНЫХ кавычках; затем — точка с запятой. Синтаксис должен быть точно таким, как указан здесь, Это ВАЖНО, так как иначе будет ошибка. То есть нельзя использовать между @charset и названием кодировки больше или меньше одного пробела; нельзя заключать имя кодировки в одинарные кавычки; обязательно нужно ставить точку с запятой в конце; также ничего нельзя писать ПЕРЕД @charset, включая комментарии, то есть первым символом в файле должен быть «эт» (@; «собака», по-нашему).

Однако одного обявления кодировки мало: нужно чтобы и само содержимое файла стилей было закодировано в объявленой кодировке.

Что это значит?..
Эт-правилом @charset мы просто указываем браузеру какой алгоритм кодирования ему нужно использовать, чтобы правильно прочесть содержимое файла, однако само содержимое может быть закодировано по другому алгоритму и тогда, как вы понимаете, браузер обработает файл некорректно. Обычно в большинстве редакторов кода текущая кодировка файла вместе с другой полезной информацией отображается в строке статуса (в нижней части окна), а изменить её можно через меню — эта возможность есть, поищите; описывать в данном посте где именно она находится для всех редакторов, коих сотни, а то и тысячи, по понятным причинам я не стал; если не найдёте, напишите мне — я вам подскажу.

Если вы будете изменять кодировку файла, то учтите, что в некоторых редакторах может быть два пункта меню, которые могут сбить вас с толку: Кодировать в <Имя кодировки>

Преобразовать в

<Имя кодировки> Нужно выбрать именно Преобразовать в <Имя кодировки>.

На самом деле указывать кодировку в файле стилей необязательно ЕСЛИ она обявлена в HTML-документе, но ещё раз напомню: кодировка содержимого файла должна совпадать с объявленной. Это, кстати, касается не только CSS, но и абсолютно любых других областей — ведь если вы говорите, что следующие данные нужно обработать по алгоритму указанной кодировки, то вы же и должны предоставить закодированные этим же алгоритмом данные.

Я так заостряю ваше внимание на том, что помимо объявления кодировки нужно чтобы и данные были в той же кодировке, так как на этом очень часто спотыкаются и не понимают почему всё в кракозябрах.

Тем не менее, хоть и кодировку в файле стилей объявлять необязательно ЕСЛИ она обявлена в HTML-документе, как я уже сказал выше, всё равно лучше это сделать, так как мало ли что ☺:

@charset "utf-8";

Рекомендую ВСЕГДА ВЕЗДЕ объявлять кодировки и использовать, по крайней мере в Web’е, именно UTF-8!

Использование символов Unicode в свойстве Content

Рассмотрим CSS-свойство content, которое используется совместно с псевдоэлементами ::before и ::after . .. В данном свойстве указывается контент, который будет помещён перед или после элемента, к которому применяется соответствующий псевдоэлемент:

selector::before,
selector::after {
	content: "строка";
}
строка
любой набор символов, который выводится как есть, кроме экранированных последовательнойстей (см. далее).

Пример использования свойства Content

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Пример использования свойства Content</title> <style> p::before { content: «< &lt; «; } p::after { content: » &gt; >»; } </style> </head> <body> <h2>Пример использования свойства Content</h2> <p>Lorem ipsum …</p> </body> </html>

Контент, добавленный с помощью свойства content не выделяется курсором мыши и не копируется в буфер обмена.

Пример использования символов Unicode в свойстве Content

Допустим, нужно вывести с помощью свойства content после некоторого элемента смайлик (☺), который имеет номер в Unicode u+263a; это запишется так:

selector::after {
	content: "\263a";
}

То есть номер символа в Unicode нужно просто проэкранировать обратным слешем (\).
Также отмечу — впередистоящие нули можно не указывать: \0030 идентично \30.

Второй способ — это указать символ непосредственно:

selector::after {
	content: "☺";
}
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Пример использования символов Unicode в свойстве Content</title> <style> p::before { content: «\263a «; } p::after { content: «☺»; } </style> </head> <body> <h2>Пример использования символов Unicode в свойстве Content</h2> <p>Hello, World!</p> </body> </html>

Чтобы добавляемые через content пробельные символы Unicode (пробелы, табуляции и переводы строк) отображались как есть (имеется в виду предварительное форматирование), для элемента должно быть определено свойство white-space со значением pre или подобным ему.

Некоторые символы Unicode

#Название по-русскиНазвание по-английскиВидМнемоника HTML-кодUnicode
1Горизонтальная табуляцияHorizontal Tabulation&#9;u+0009
2Перевод строки (разделитель строк в Unix)New Line (Nl)&#10;u+000a
3Вертикальная табуляцияVertical Tabulation&#11;u+000b
4ПробелSpace&#32;u+0020
5Двойная кавычка (универсальная)Quotation Mark«&quot;&#34;u+0022
6АмперсандAmpersand&&amp;&#38;u+0026
7Апостроф (одинарная кавычка)Apostrophe&apos;&#39;u+0027
8Знак меньшеLess-Than Sign<&lt;&#60;u+003c
9Знак большеGreater-Than Sign>&gt;&#62;u+003e
10Неразрывный пробелNo-Break Space &nbsp;&#160;u+00a0

К слову, заметим, что мнемоники (частично) соответствуют названию символа по-английски; пример: &nbsp; — No-Break SPace.

  • @charset
  • content
  • Declaring character encodings in CSS
  • The Unicode Consortium
  • white-space
  • Чем UTF-8 отличается от Unicode

Спецсимволы HTML — Как создать сайт

8

Янв,2018

Спецсимволы HTML

Здравствуйте! Я  уже писал про атрибуты HTML и теги HTML. В этой же статье речь пойдет про спецсимволы HTML, или  как их еще называют символы-мнемоники. В основном сфера их применения — это  для указания спецсимволов, которых  как правило нет в наборе  стандартной клавиатуры, либо которые не поддерживает кодировка страницы.

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

Следует отметить, что спецсимволы очень чувствительны к регистру, поэтому их необходимо прописывать точно так, как указано в таблице ниже.  Если у спецсимволов, нет мнемоники,  то  они могут не отображаться в браузерах.

Для добавления символов внутрь тегов  достаточно воспользоваться  HTML-кодом символа, а для использования символов в стилях,  надо вставить  мнемонику  в качестве значения свойства content  например в  псевдоэлементах after и before.

Спецсимвол  будет наследовать от цвета текста родительского элемента.  А вот чтобы изменить цвет спецсимвола,  его нужно  разместить внутрь тега <span> или же  задать значение свойства color (при вставке спецсимволов через свойство content).

 

 

1. Полезные знаки и символы

ВидHTML-кодCSS-кодОписание
&#9731;\2603Снеговик
&#9766;\2626Православный крест
&#9875;\2693Якорь
&#9990;\2706Знак телефона
&#9742;\260EТелефон
&#9749;\2615Горячие напитки
&#9998;\270EКарандаш, направленный вправо-вниз
&#9999;\270FКарандаш
&#10000;\2710Карандаш, направленный вправо-вверх
&#10001;\2711Незакрашенное острие пера
&#10002;\2712Закрашенное острие пера
&#9884;\269CГеральдическая лилия
&#9937;\26D1Шлем с белым крестом
&#9885;\269DНачерченная белая звезда
&#10052;\2744Снежинка
&#10084;\2764Закрашенное жирное сердце
&#10053;\2745Зажатая трилистниками снежинка
&#10054;\2746Жирная остроугольная снежинка
&#9733;\2605Закрашенная звезда
&#9734;\2606Незакрашенная звезда
&#10026;\272AНезакрашенная звезда в закрашенном круге
&#10027;\272BЗакрашенная звезда с незакрашенным кругом внутри
&#10031;\272FВращающаяся звезда
&#10057;\2749Звёздочка с шарообразными окончаниями
&#10059;\274BЖирная восьмиконечная каплеобразная звёздочка-пропеллер
&#10034;\2732Звёздочка с незакрашенным центром
&#9728;\2600Закрашенное солнце с лучами
&#9729;\2601Облака
&#9730;\2602Зонтик
&#9745;\2611Галочка в квадрате
&#9746;\2612Крестик в квадрате
&#9785;\2639Нахмуренный смайлик
&#9786;\263AУлыбающийся смайлик
&#9787;\263BЗакрашенный улыбающийся смайлик
&#9773;\262DСерп и молот
&#9873;\2691Закрашенный флаг
&#9872;\2690Незакрашенный флаг
&#9776;\2630Триграмма
&#10047;\273fЗакрашенный цветок
&#10048;\2740Незакрашенный цветок
&#10046;\273EЦветок с шестью лепестками
&#10049;\2741Закрашенный обведённый цветок
&#10050;\2742Цветок из точек
&#9993;\2709Конверт
&#10086;\2766Сердце в виде цветка
&#10102;\2776Номер 1
&#10103;\2777Номер 2
&#10104;\2778Номер 3
&#10105;\2779Номер 4
&#10106;\277AНомер 5
&#10107;\277BНомер 6
&#10108;\277CНомер 7
&#10109;\277DНомер 8
&#10130;\2792Номер 9
&#10131;\2793Номер 10
&#10006;\2716Жирный знак умножения
&#10008;\2718Жирный крестик
&#10004;\2714Жирная отметка галочкой
&#10010;\271AЖирный крест
&#9883;\269BСимвол атома
&#9850;\267AСимвол переработки
&#10065;\2751Незакрашенный квадрат с правой нижней тенью
&#10066;\2752Незакрашенный квадрат с правой верхней тенью
&#9672;\25C8Алмаз в оправе
&#9680;\25D0Круг с левой закрашенной половиной
&#9681;\25D1Круг с закрашенной правой половиной
&#8258;\2042Три звездочки

2.

Знаки пунктуации
ВидHTML-кодCSS-кодОписание
&nbsp;\00A0Неразрывный пробел
­&shy;\00ADМесто возможного переноса
<&lt;\003CЗнак «меньше чем» (начало тега)
>&gt;\003EЗнак «больше чем» (конец тега)
«&laquo;\00ABЛевая двойная угловая скобка
»&raquo;\00BBПравая двойная угловая скобка
&lsaquo;\2039Левая угловая одиночная кавычка
&rsaquo;\203AПравая угловая одиночная кавычка
«&quot;\0022Двойная кавычка
&prime;\2032Одиночный штрих
&Prime;\2033Двойной штрих
&lsquo;\2018Левая одиночная кавычка
&rsquo;\2019Правая одиночная кавычка
&sbquo;\201AНижняя одиночная кавычка
&ldquo;\201CЛевая двойная кавычка
&rdquo;\201DПравая двойная кавычка
&bdquo;\201EНижняя двойная кавычка
&#10076;\275CЖирная одинарная верхняя запятая
&#10075;\275BЖирная одинарная повёрнутая верхняя запятая
&&amp;\0026Амперсанд
&apos;\0027Апостроф (одинарная кавычка)
§&sect;\00A7Параграф
©&copy;\00A9Знак copyright
¬&not;\00ACЗнак отрицания
®&reg;\00AEЗнак зарегистрированной торговой марки
¯&macr;\00AFЗнак долготы над гласным
°&deg;\00B0Градус
±&plusmn;\00B1Плюс-минус
¹&sup1;\00B9Верхний индекс «1»
²&sup2;\00B2Верхний индекс «2»
³&sup3;\00B3Верхний индекс «3»
¼&frac14;\00BCОдна четверть
½&frac12;\00BDОдна вторая
¾&frac34;\00BEТри четверти
´&acute;\00B4Знак ударения
µ&micro;\00B5Микро
&para;\00B6Знак абзаца
·&middot;\00B7Знак умножения
¿&iquest;\00BFПеревернутый вопросительный знак
ƒ&fnof;\0192Знак флорина
&trade;\2122Знак торговой марки
&bull;\2022Маркер списка
&hellip;\2026Многоточие
&oline;\203EНадчеркивание
&ndash;\2013Среднее тире
&mdash;\2014Длинное тире
&permil;\2030Промилле
}&#125;\007DПравая фигурная скобка
{&#123;\007BЛевая фигурная скобка
=&#61;\003DЗнак равенства
&ne;\2260Знак неравенства
&cong;\2245Конгруэнтность (геометрическое равенство)
&asymp;\2248Почти равно
&le;\2264Меньше чем или равно
&ge;\2265Больше чем или равно
&ang;\2220Угол
&perp;\22A5Перпендикулярно (кнопка вверх)
&radic;\221AКвадратный корень
&sum;\2211N-ичное суммирование
&int;\222BИнтеграл
&#8251;\203BЗнак сноски
÷&divide;\00F7Знак деления
&infin;\221EЗнак бесконечности
@&#64;\0040Символ собака
[&#91;\005BЛевая квадратная скобка
]&#93;\005DПравая квадратная скобка

3.

Стрелки
ВидHTML-кодCSS-кодОписание
&larr;\2190Стрелка влево
&uarr;\2191Стрелка вверх
&rarr;\2192Стрелка вправо
&darr;\2193Стрелка вниз
&harr;\2194Стрелка влево-вправо
&crarr;\21B5Стрелка вниз и влево – знак возврата каретки
&lArr;\21D0Двойная стрелка налево
&uArr;\21D1Двойная стрелка вверх
&rArr;\21D2Двойная стрелка направо
&dArr;\21D3Двойная стрелка вниз
&hArr;\21D4Двойная стрелка влево-вправо
&#10144;\27A0Летящая стрела
&#10148;\27A4Наконечник стрелы
&#10149;\27A5Изогнутая стрела, указывающая вниз и вправо
&#10150;\27A6Изогнутая стрела, указывающая вверх и вправо
&#10163;\27B3Стрела направо
&#8634;\21BAКруглая стрелка с наконечником против часовой стрелки
&#8635;\21BBКруглая стрелка с наконечником против часовой стрелки
&#8679;\21E7Толстая полая стрелка вверх
&#8617;\21A9Стрелка налево с крючком
&#10155;\27ABНаклонённая вниз объёмная стрелка
&#11015;\2B07Закрашенная стрелка вниз
&#11014;\2B06Закрашенная стрелка вверх

4.

Карточные масти
ВидHTML-кодCSS-кодОписание
&spades;\2660«Пики»
&clubs;\2663«Трефы»
&hearts;\2665«Червы»
&diams;\2666«Бубны»
&#9825;\2661Контур «Червы»
&#9826;\2662Контур «Бубны»
&#9828;\2664Контур «Пики»
&#9831;\2667Контур «Трефы»

5. Деньги

ВидHTML-кодCSS-кодОписание
¢&cent;\FFE0Цент
£&pound;\FFE1Фунт стерлингов
&#8381;\20BDРоссийский рубль
¥&yen;\00A5Йена или юань
&euro;\20ACЕвро
$&#36;\0024Доллар
&#8372;\20B4Знак гривны
&#8377;\20B9Индийская рупия
&#22291;\5713Китайский юань
&#8376;\20B8Казахстанский тенге

6.

Знаки зодиака
ВидHTML-кодCSS-кодОписание
&#9800;\2648Овен
&#9801;\2649Телец
&#9802;\264AБлизнецы
&#9803;\264BРак
&#9804;\264CЛев
&#9805;\264DДева
&#9806;\264EВесы
&#9807;\264FСкорпион
&#9808;\2650Стрелец
&#9809;\2651Козерог
&#9810;\2652Водолей
&#9811;\2653Рыбы

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

(Visited 455 times, 1 visits today)

javascript — Что вы можете добавить перед псевдоконтентом в CSS?

спросил

Изменено 1 год, 6 месяцев назад

Просмотрено 633 раза

Я проверил значок на веб-сайте и заметил, что в css перед содержимым есть что-то вроде этого:

 .c-navi-new-list__category-link --fresh:before {
    содержимое: "\E0B3\00FE0E";
    размер шрифта: 16px;
    размер шрифта: 1.143rem;
    высота строки: 1,375;
    цвет: #a1a3a8;
    поле слева: 4px;
}
 

Что это за код внутри контента? Как я могу изменить его?

  • javascript
  • html
  • css
  • css-селекторы
  • псевдокласс

Что это за код внутри контента? Как я могу изменить его?

Код внутри свойства content: представляет две вещи:

Первая часть, \E0B3 , представляет собой CSS-представление значка символа UTF-8.

Как @shafayetmaruf уже показал в своей выходной ссылке, символ представляет собой прямоугольную рамку (см. также: https://utf8-icons.com/utf-8-character-57523).

Чтобы изменить отображаемый символ, вы можете просто изменить его на другой код значка (см. https://www.utf8icons.com/ для других примеров).

Вторая часть, \00FE0E , представляет собой селектор вариантов Unicode в текстовом стиле. По сути, при использовании значков Unicode некоторые браузеры отображают значок как смайлик, а не как текст. Недостатком этого является то, что версия с эмодзи не может быть оформлена с помощью CSS, тогда как текстовая версия может. Селектор варианта Unicode заставляет значок, указанный в первой части, отображаться как текст, чтобы разработчик мог затем стилизовать его с помощью CSS.

См. этот вопрос SO для получения дополнительной информации: Как предотвратить отображение символов Unicode в виде смайликов в HTML из JavaScript?

Кстати, чтобы все это выяснить, все, что я сделал, это погуглил различные части «контента» и, как обычно, предоставил Бог Google.

Я не знаю, что на самом деле вы хотите знать. Но из вашего комментария в ответе Маркуса я предполагаю, что вы хотите знать, что происходит с этим фрагментом кода

Предположим, что у нас есть абзац

 

Это абзац

Теперь, если мы реализуем ваш css, посмотрим, что произойдет:

 p::before {
    содержимое: "\E0B3\00FE0E";
    размер шрифта: 16px;
    размер шрифта: 1.143rem;
    высота строки: 1,375;
    цвет: #a1a3a8;
    поле слева: 4px;
}
 

Вывод будет таким: [выход] https://i.stack.imgur.com/KFQpY.png

Теперь давайте посмотрим, за что отвечает каждая строка здесь:

  1. :: «до» — тег означает, что мы делаем что-то перед абзацем
  2. «контент» — означает, что мы добавляем контент перед абзацем, в нашем случае это значок.
  3. «размер шрифта» — указывает, что размер шрифта нашего добавленного контента будет 10 пикселей, а позже он был изменен на 1,143 рем ( рем — это единица измерения ).
  4. «высота строки» — указывает, какое будет расстояние между двумя строками
  5. «цвет» — относится к цвету значка.
  6. «margin-left» — указывает, что мы помещаем немного места в левую часть значка. В нашем случае это 4px.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Список символов Unicode для CSS перед содержимым

спросил

Изменено 3 месяца назад

Просмотрено 11 тысяч раз

Я искал различные списки юникода, подобные этому, но до сих пор не нашел тот, в котором перечислены \0108 , который является альтернативным знаком доллара, похожим на потрясающий шрифт, но также есть и другие от 0101 до 0113, которые я в списке не видел.

Есть ли какие-то недокументированные символы или это может быть ссылка на значок в пользовательском файле font.ttf? Можно ли использовать шестнадцатеричные ссылки с файлами пользовательских шрифтов?

  • css
  • юникод

3

Вы должны использовать этот код:

 body {шрифт: обычный 18px/27px menlo, monospace, sans-serif; цвет: #777;}
.unicode-list li {стиль списка: нет; нижняя граница: сплошная 1px #ccc;}
.link-list li {шрифт: 300 16px/27px Helvetica;}
:before {цвет: #A0002E; отображение: встроенный блок; шрифт: обычный 20px/20px Helvetica; ширина: 30 пикселей; }
{цвет: голубой;}

.mail: перед {содержанием: "\ 2709";}
.phone:before {содержание: "\2706";}
.bigarrow:before {содержимое: "\27BD";}
.open-quote:before {содержимое: "\275D";}
.close-quote:before {содержимое: "\275E";}
.openquote:before {содержимое: "\201C";}
.closequote:before {содержание: "\201D";}
.alert:before {содержимое: "\26A0";}
. checkmark:before {содержимое: "\2713";}
.ballot:before {содержание: "\2717";}
.black-diamond:before {содержимое: "\2756";}
.phi:before {содержимое: "\03C6";}
.bullseye:before {содержание: "\25CE";}
.arrow-bullet:before {содержимое: "\25B8";}
.black-diamond:before {содержимое: "\25C6";}
.white-diamond:before {содержимое: "\25C7";}
.poison:before {содержание: "\2620";}
.happy:before {содержание: "\263A";}
.sad:before {содержание: "\2639";}
.command:before {содержимое: "\2318";}
.option:before {содержимое: "\2325";}
.shift:before {содержимое: "\21E7";}
.apple: перед {содержанием: "\ F8FF";}
.menu:before {содержание: "\2630";}
.darr-1: перед {содержимым: "\ 21B4";}
.darr-2: перед {содержанием: "\25BE";}
.poop: перед {содержимым: "\ 1f4a9";}
.star:before {содержимое: "\2605";} 
 
  • 2709 – почта
  • 2706 – телефон
  • 27BD – Большая стрела
  • 275D – Открыть предложение
  • 275E — Закрыть цитату
  • 201C – Открытая цитата
  • 201D — Закрыть цитату
  • 26A0 — Опасность!!
  • 2713 – галочка
  • 2717 – Бюллетень
  • 2756 – Черный бриллиант
  • 2756 – Фи
  • 25CE — Яблочко
  • 25B8 — Пуля со стрелой
  • 25C6 – Черный бриллиант
  • 25C7 – Белый ромб
  • 2620 – яд
  • 263A – Счастливый
  • 2639- грустно
  • 2318 – Команда
  • 2325 – вариант
  • 21E7 – Shift
  • F8FF – яблоко (не универсальное)
  • 2630 – Меню (&#9776;)
  • 21B4 – Стрелка вправо с углом вниз (&#8628;)
  • 25BE – Малый треугольник вниз (&#x25BE;)
  • 1f4a9 — Какашки
  • 2605 – Звездочка

Полезные символы:

http://en. wikibooks.org/wiki/Unicode/List_of_useful_symbols

http://www.decodeunicode.org/en/dingbats

http://en.wikipedia.org /wiki/List_of_Unicode_characters

http://www.danshort.com/HTMLentities/

Я обнаружил, что система, которую я редактирую, использует ttf-файл пользовательского шрифта, а ссылки Unicode в файле css соответствуют тем, что видны в Windows. Карта персонажей. Я нашел этот пост о создании личных персонажей полезным.

Для ответа на вопрос:

Где можно найти список символов Unicode, которые можно использовать в содержание свойство CSS?

Вы можете найти официальный список здесь: https://www.unicode.org/charts/ Там же можно искать по шестнадцатеричному коду персонажа.

Другой альтернативой является этот сайт, где вы также можете искать по описанию персонажа: https://www.fileformat.info/info/unicode/char/search.htm

Пример кода:

 .line-check::before {
 содержимое: '\02705';
}
.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *