Кавички - 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+ Всякакви Всякакви