Цитаты - CSS-хитрости

Anonim

quotesСвойство в CSS позволяет указать , какие типы кавычек используются , когда котировки , добавленные через content: open-quote;или content: close-quote;правила. Вот как им пользоваться:

q ( quotes: "“" "”" "‘" "’"; ) q::before ( content: open-quote; ) q::after ( content: close-quote; )

В приведенном выше примере добавлено четыре значения. Набор двойных умных кавычек и пара одинарных умных кавычек. Это немного сбивает с толку, поскольку каждая цитата заключена в кавычки - но это просто программные кавычки (могут быть двойными («) или одинарными ('), как и везде в CSS. Цитаты внутри - это то, что будет использоваться на странице.

Есть четыре значения свойства контента , которые имеют отношение к quotesсобственности: open-quote, close-quote, no-open-quote, и no-close-quote.

Первая пара котировок в значении - это котировки открытия и закрытия. Вторая пара - это открывающая и закрывающая кавычки для котировок, вложенных на один уровень глубоко в другие котировки, которые также используют это quotesсвойство. Например, элемент внутри элемента.

Несколько примеров:

Двойные кавычки в первой цитате, одинарные кавычки во второй.

Цитата с французскими цитатами.

Вы можете разместить на quotesобъекте столько пар цитат, сколько захотите. Но вам не нужно ставить больше двух, потому что для каждой дополнительной кавычки просто повторяются quotesзначения с самого начала.

Значения no-open-quoteи no-close-quoteостанавливают отображение котировок, но продолжают увеличивать глубину котировок.

Дополнительная информация

  • Не используйте элемент, если не цитируете кого-то. Во всех остальных случаях (ирония, сарказм или что-то еще, для чего вы используете кавычки) просто используйте сами кавычки (например: «»).
  • Это не только для элемента, это может быть
    тоже или что-нибудь еще.
  • Цитаты и акценты

Поддержка браузера

Хром Сафари Fire Fox Опера IE Android iOS
11+ Любой 1.5+ 4+ 8+ Любой Любой