css властивість quotes
Властивість quotes становлює тип лапок, який застосовується для цитат <q> в документі.\
Ця властивість працює тільки для контейнера <q>, це обмеження можна обійти застосовуючи стильову властивість content зі значенням open-quote (відкриваюча лапка) або close-quote (закриваюча лапка).
У типографії та різних мовах лапки можуть сильно відрізнятися. У американській мові найпоширенішою умовою є використання лівої подвійної лапки (“), щоб відкрити цитату та правильну подвійну лапку (”), щоб закрити її.
Якщо інша цитата вкладена в цю цитату, то вона оточується лівою одинарною лапкою (‘) та правильною однією лапкою (’).
Однак це не єдині символи, які можна використовувати для цитат. Наприклад, для багатьох латинських марок використовується guillemet (або подвійний шеврон). Вони представлені символами Unicode U + 00AB («)» та U + 00BB (»). У французькій мові ці, як правило, використовуються з символом без перерви (U + 00A0).
Таким чином, властивість quotes дозволяє точно вказати, які символи використовуються при відкритті та закритті цитат.
Ви також можете використовувати властивість content, щоб оточити елемент лапками, використовуючи псевдоелементи ::before і ::after. Як тут:
q {
quotes: '\201c' '\201d' '\2018' '\2019';
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
Можливо, ви помітили, що під час використання елемента <q> браузер автоматично робить його цитатою (відповідно до специфікації HTML5.1), навіть якщо ви не вказали жодних лапок у вашій таблиці стилів:
Цитатна пунктуація (наприклад, лапки), яка цитує вміст елемента, не повинна з'являтися безпосередньо перед, після або в елементах <q>; вони будуть вставлені в рендеринг браузером.
Крім того, браузери, як очікується, використовуватимуть відповідні лапки для мови (як описано в специфікації HTML5.1). Тому вам не потрібно буде додавати лапки у власній таблиці стилів для елемента <q>.
Як значення використовується символ тексту (наприклад, quotes: "« "" »") або символ Unicode. Деякі з них перераховані в табл. 1.
| Вид | Спецкод HTML | Unicode | Опис |
|---|---|---|---|
| " | " | \0022 | Лапки, застосовується зазвичай в моноширинних шрифтах, для позначення символу дюйма, а також кутових секунд. |
| ' | ' | \0027 | Апостроф. Символ кутових хвилин, в латиниці застосовується для позначення м'якого знака (popalas 'lisa). |
| « | « або « | \00ab | Відкриваюча подвійна кутова лапка. |
| » | » або » | \00bb | Закриваюча подвійна кутова лапка. |
| ‘ | ‘ | \2018 | Відкриваюча одинарна лапка. |
| ’ | ’ | \2019 | Закриваюча одинарна лапка. |
| “ | “ | \201c | Відкриваюча подвійна лапка в англомовних текстах або закриваюча для російської мови. |
| ” | ” | \201d | Закриваюча подвійна лапка в англомовних текстах. |
| „ | „ | \201e | Відкриваюча подвійна лапка. Застосовується в російській мові. |
Синтаксис
quotes: none|string|initial|inherit;Властивість quotes може отримувати 4 значень:
-
none -
Властивість не задана
автор: Svitlana -
string -
Вказує, які лапки використовувати. Перші два значення визначають перший рівень цитування, наступні два значення визначають наступний рівень і т.д.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)
автор: Svitlana
| Значення без задання: | Залежить від браузера, його налаштувань і операційної системи. Найчастіше використовується лапки виду "/" |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.quotes="'«' '»'" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 11 | 1.5 | 9 | 4 | 12 | 8 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
Перша пара лапок — для зовнішнього рівня цитати, друга — для вкладеного: браузер сам розставляє «» і ‹› навколо кожного <q>.
HTML
<p><q>Зовнішня цитата з <q>вкладеною</q> всередині</q></p>CSS
q {
quotes: "«" "»" "‹" "›";
}Значення у дії
Приклад використання
Коментарі
Коментарів ще немає — будьте першим!