Атрибут cite тега <q> — джерело короткої цитати в тексті
Атрибут cite HTML тега <q> задає адресу, котра вказує на джерело цитати.
Загальний опис
автор: NagarD
Синтаксис
<q cite="URL">Атрибут cite може отримувати єдине значення:
-
URL -
URL-адреса на сторінку, яка визначає зміст елемента
<iframe>. Можливі значення:- Абсолютний URL - вказує на інший веб-сайт (наприклад, longdesc=”http://www.example.com/description.txt”).
- Відносний URL - вказує на файл в межах веб-сайту (наприклад, longdesc="description.txt").
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута cite теґа <q>
<h3>Приклад використання атрибуту cite</h3>
<p><q cite="https://lifehacker.ru/special/steve/">Ваш час обмежений, не витрачайте його, проживаючи чуже життя. Не попадайтеся на гачок віровчення, яке існує на мисленні інших людей. Не дозволяйте поглядам інших заглушати свій власний внутрішній голос. І дуже важливо мати мужність слідувати своєму серцю і інтуїції. Вони, так чи інакше, вже знають, що ви дійсно хочете зробити. Все інше - другорядне</q>.<br><br>Стів Джобс </p>Той самий теґ q із різними значеннями lang — лапки міняються самі. Далі: власний набір лапок через quotes, помилка з подвійними лапками і прийом, яким адресу з cite таки можна показати читачеві — правилом q[cite]::after з функцією attr(). У тому правилі є пастка: воно заміщає вміст псевдоелемента, тож close-quote доводиться повертати руками — інакше зникне не лише закривальна лапка, а й наступна цитата на сторінці візьме лапки другого рівня.
HTML
<p lang="uk">Українською: <q>ніхто не знає, скільки це триватиме</q></p>
<p lang="en">Англійською: <q>nobody knows how long it will take</q></p>
<p lang="de">Німецькою: <q>niemand weiss, wie lange es dauert</q></p>
<p lang="fr">Французькою: <q>personne ne sait combien de temps</q></p>
<p class="own" lang="uk">Власні лапки через quotes:
<q>зовнішній рівень і <q>вкладений</q> усередині</q></p>
<p lang="uk">Помилка: свої лапки всередині теґа —
<q>«виходить подвійна пара»</q></p>
<p class="show" lang="uk">Адреса з cite, витягнута стилями:
<q cite="https://uk.wikipedia.org/wiki/Цитата">цитата — дослівний уривок
з чужого тексту</q></p>
<p lang="uk">А ось те саме без правила в стилях — адреса на місці, але побачити
її неможливо: <q cite="https://uk.wikipedia.org/wiki/Цитата">той самий
уривок</q></p>CSS
p {
margin: 12px 0;
max-width: 520px;
}
q {
font-style: italic;
}
.own q {
quotes: "«" "»" "‹" "›";
font-style: normal;
color: #1b4f9c;
}
.show q[cite]::after {
content: close-quote " (" attr(cite) ")";
color: #5a6472;
font-size: .85em;
font-style: normal;
}Коментарі
Коментарів ще немає — будьте першим!