Котирування - 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зупиняють відображення лапок, але вони продовжують збільшувати глибину лапки.

Більше інформації

  • Не використовуйте елемент, якщо ви не цитуєте когось. У всіх інших випадках (іронія, сарказм або все інше, для чого ви використовуєте лапки), просто використовуйте самі лапки (наприклад, такі: "").
  • Це не тільки для елемента, це може бути
    теж або щось інше.
  • Цитати та наголоси

Підтримка браузера

Chrome Сафарі Firefox Опера IE Android iOS
11+ Будь-який 1,5+ 4+ 8+ Будь-який Будь-який