чарівні лапки

Використовуючи наведені в табл. 2 символи юнітегов, приклад 1 можна змінити наступним чином (приклад 2).

Приклад 2. Застосування юнітегов


Із закону Фергюсона-Мержевіч: Імовірність того, що неприємність станеться, знижується, якщо дану неприємність передбачити заздалегідь.

Лапки для вмісту тега встановлюються браузером автоматично, але це правило не стосується інших тегів. Для додавання лапок до контенту скористаємося стильовою властивістю content з псевдоелементи before і after. як показано в прикладі 3. В даному випадку використовуються не лапки, а кутові дужки, які застосовуються для позначення тегів.

Приклад 3. Додавання лапок до контенту


SPAN.tag: before <
content: open-quote; / * Додаємо перед контентом відкриває лапки * /
>

SPAN.tag: after <
content: close-quote; / * Додаємо після контенту закриває лапки * /
>


тег CITE позначає контент як цитату або виноску на інший матеріал. Браузери зазвичай встановлюють контент всередині контейнера CITE курсивом.

Результат прикладу показаний на рис. 2.

чарівні лапки

Мал. 2. Додавання до контенту кутових дужок

Розберемо цей приклад докладніше. Для виділення в контенті тегів вводимо новий клас tag. до контенту якого додаються лапки виду за допомогою властивості quotes. Але щоб вони відображалися цього не дастаткова. Тому використовуємо псевдоелемент before. він вставляє певний контент перед зазначеним елементом, і after. додає контент після елемента. Відкриває дужка генерується через значення open-quote параметра content. а закриває - через close-quote.

Можна взагалі відмовитися від використання параметра quotes. оскільки атрибут content дозволяє додавати певний контент до і після елементу. Як значення цього параметра в лапках вказуємо потрібний символ у вигляді звичайного контенту або юнітегов. Знову ж в даному випадку не обійтися без застосування псевдоелементів before і after. як показано в прикладі 4.

Приклад 4. Застосування параметра content


CITE: before <
content: "\ 00ab"; / * Додаємо відкриває лапки * /
>

CITE: after <
content: "\ 00bb"; / * Додаємо закриває лапки * /
>


Перше наслідок із закону Фергюсона-Мержевіч: Всі неприємності передбачити неможливо.


Другий наслідок: З усіх непередбачених неприємностей найімовірніше відбудеться та, збиток від якої найбільший.

В даному прикладі додавання лапок до контенту і визначення їх виду виконує один параметр content.

CITE
Тег CITE позначає контент як цитату або виноску на інший матеріал. Браузери зазвичай встановлюють контент всередині контейнера CITE курсивом.

Q
Тег Q використовується для виділення в контенті цитат. Вміст контейнера автоматично відображається в браузері в лапках.

CSS (ЦСС) по темі

color
Визначає колір контенту елемента.

font-family
Встановлює сімейство шрифту, яке буде використовуватися для оформлення контенту вмісту. Список шрифтів може включати одне або кілька назв, розділених комою.

quotes
Встановлює вид лапок, який застосовується в контенті об'єкта.

Схожі статті