www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > FAQ CSS (ЦСС) > Волшебные кавычки

Волшебные кавычки

контентовая версия  

По ходу контента некоторые слова, такие как цитаты или названия книг и фильмов, приходится брать в кавычки. При этом существует несколько типов кавычек, которые применяются в зависимости от правил языка и конконтента. С помощью CSS (ЦСС) процесс добавления кавычек можно упростить и добавлять кавычки желаемого вида в нужное место автоматически.

В русской типографике используется три вида кавычек, их вид и описание приведены в табл. 1.

Табл. 1. Виды кавычек в русскоязычных контентах
Вид Описание Код ШТМЛ
"контент" Такие кавычки перешли по наследию от пишущих машинок. В настоящее время применяются в языках программирования и коде ШТМЛ. Значения параметров тегов указываются именно в таких кавычках. "контент" или "контент"
«контент» Эти кавычки встречаются в контентах чаще всего.
«контент» или «контент»
„контент“ Применяется в контенте самостоятельно вместо предыдущего типа кавычек или совместно с ним. Например, если требуется добавляем кавычки в кавычках, пишем так: «Грязно ругаясь и поминая недобрым словом сопромат, он протянул искореженную „вжепурезку“ мне».
„контент“ или „контент“

Как видно из данной таблицы, кавычки в код объекта добавляются двумя способами. Первый включает в себя прямую вставку символов кавычек в контент. Но поскольку многие ШТМЛ-редакторы не поддерживают подобные символы, то приходится набирать контент в специализированных программах (Microsoft Word, например), а затем добавлять его в код web-страницы через буфер обмена. Второй способ состоит в применении спецсимволов, которые в браузере отображаются нужным нам образом.

Теперь зададимся вопросом, а как быстро можно поменять в контенте один вид кавычек на другой? Увы, но автоматизировать этот процесс сложно и в конечном итоге приходится вычитывать контент и править его вручную. Поиск и замена контента тоже не всегда дает нужный результат “ попробуйте, например, поменять везде " на «, интересный эффект получится.

В CSS (ЦСС) для управления кавычками используется свойство quotes, с помощью которого можно определять вид кавычек для заданных элементов. Это позволяет ставить те кавычки, которые подходят по конконтенту.

Замечание

Браузер Internet Эксплорер не поддерживает множество возможностей CSS (ЦСС), в том числе свойства quotes и content, поэтому нижеприведенные примеры в нем работать не будут.

Так, для выделения цитат предназначен тег <Q>. Его особенностью является то, что контент, заключенный в этот контейнер автоматически берется в кавычки. Другое дело, что кавычки по умолчанию ставятся вида "/". Однако это дело можно поправить, как показано в примере 1.

Пример 1. Использование тега <Q>

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Кавычки</title>
<style type="text/CSS (ЦСС)">
Q {
 font-style: italic; /* Курсивное начертание */
 quotes: "«" "»"; /* Меняем вид кавычек в цитате */
}
</style>
</head>
<body>

<p>Из закона Фергюсона-Мержевича: <q>Вероятность того, что неприятность произойдет, снижается, если данную неприятность предусмотреть заранее</q>.</p>

</body>
</html>

Результат примера показан на рис. 1.

Рис. 1

Рис. 1. Добавление кавычек к контенту цитаты

В данном примере в качестве значения свойства quotes использовалась строка "«" "»". Первый символ определяет открывающую кавычку, а второй через пробел — закрывающую кавычку. В качестве значений можно указывать любой контент, а также символы юнитегов, которые приведены в табл. 2.

Табл. 2. Символы юнитегов для обозначения кавычек
Вид Спецсимвол ШТМЛ Юникод
" &#34; \0022
« &#171; или &laquo; \00ab
» &#187; или &raquo; \00bb
&#8220; \201c
&#8222; \201e

Используя приведенные в табл. 2 символы юнитегов, пример 1 можно изменить следующим образом (пример 2).

Пример 2. Применение юнитегов

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Кавычки</title>
<style type="text/CSS (ЦСС)">
Q {
 font-style: italic; /* Курсивное начертание */
 quotes: "\00ab" "\00bb"; /* Меняем вид кавычек в цитате */
}
</style>
</head>
<body>

<p>Из закона Фергюсона-Мержевича: <q>Вероятность того, что неприятность произойдет, снижается, если данную неприятность предусмотреть заранее</q>.</p>

</body>
</html>

Кавычки для содержимого тега <Q> устанавливаются браузером автоматически, но это правило не касается других тегов. Для добавления кавычек к контенту воспользуемся стилевым свойством content с псевдоэлементами before и after, как показано в примере 3. В данном случае используются не кавычки, а угловые скобки, которые применяются для обозначения тегов.

Пример 3. Добавление кавычек к контенту

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Кавычки</title>
<style type="text/CSS (ЦСС)">
SPAN.tag {
 color: navy; /* Цвет контента */
 font-family: monospace; /* Моношириный шрифт */
 quotes: "<" ">"; /* Устанавливаем вид кавычек */
}

SPAN.tag:before {
 content: open-quote; /* Добавляем перед контентом открывающую кавычку */
}

SPAN.tag:after {
 content: close-quote; /* Добавляем после контента закрывающую кавычку */
}
</style>
</head>
<body>

<p>Тег <span class="tag">CITE</span> помечает контент как цитату или сноску на другой материал. Браузеры обычно устанавливают контент внутри контейнера <span class="tag">CITE</span> курсивом.</p>

</body>
</html>

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

Рис. 2

Рис. 2. Добавление к контенту угловых скобок

Разберем данный пример подробнее. Для выделения в контенте тегов вводим новый класс tag, к контенту которого добавляются кавычки вида </> с помощью свойства quotes. Но чтобы они отображались этого не дастаткова. Поэтому используем псевдоэлемент before, он вставляет определенный контент перед указанным элементом, и after, добавляющий контент после элемента. Открывающая скобка генерируется через значение open-quote параметра content, а закрывающая — через close-quote.

Можно вообще отказаться от использования параметра quotes, поскольку атрибут content позволяет добавлять определенный контент до и после элемента. В качестве значения этого параметра в кавычках указываем нужный символ в виде обычного контента или юнитегов. Опять же в данном случае не обойтись без применения псевдоэлементов before и after, как показано в примере 4.

Пример 4. Применение параметра content

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Кавычки</title>
<style type="text/CSS (ЦСС)">
CITE {
 color: navy; /* Цвет контента */
}

CITE:before {
 content: "\00ab"; /* Добавляем открывающую кавычку */
}

CITE:after {
 content: "\00bb"; /* Добавляем закрывающую кавычку */
}
</style>
</head>
<body>

<p>Первое следствие из закона Фергюсона-Мержевича: <cite>Все неприятности предусмотреть невозможно</cite>.</p>
<p>Второе следствие: <cite>Из всех непредусмотренных неприятностей вероятнее всего произойдет та, ущерб от которой наибольший</cite>.</p>

</body>
</html>

В данном примере добавление кавычек к контенту и определение их вида выполняет один параметр content.

Статья опубликована: 30.10.2009 Последнее обновление: 20.04.2009
Поиск по сайту
FAQ CSS (ЦСС)
Разделы
Теги по теме

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

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

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

color
Определяет цвет контента элемента.

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

quotes
Устанавливает вид кавычек, который применяется в контенте объекта.

content
Атрибут content позволяет вставлять генерируемое содержание в контент web-страницы, которое первоначально в контенте отсутствует.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект