Бывают ситуации, когда необходимо процитировать какую-то выдержку из статьи или книги на своем сайте, и именно в таком случае становится незаменимым тег blockquote HTML, который служит для отображения цитат на веб-странице. Используется blockquote следующим образом:
<!DOCTYPE html>
<html>
<head>
<title>Цитата в HMTL - "Нубекс"</title>
<meta charset="utf-8">
<style>
blockquote:before, blockquote:after {
font-size: 2.5em;
color: red;
}
blockquote:before {
content: '«';
float: left;
}
blockquote:after {
content: '»';
float: right;
}
blockquote p {
margin: 0.8em 2.5em;
}
</style>
</head>
<body>
<p>Хочу привести следующую цитату:</p>
<hr />
<blockquote>
<p align="center">Что бы такого ещё съесть, чтобы похудеть?</p>
</blockquote>
<hr />
</body>
</html>В данном примере цитата обрамляется кавычками (blockquote:before и blockquote:after) и горизонтальными разделителями сверху и снизу.
Помимо приведенного тега, цитату в тексте можно выделить при помощи тега q:
<!DOCTYPE html>
<html>
<head>
<title>Цитата в HMTL (тег q) - "Нубекс"</title>
<meta charset="utf-8">
<style>
q {
font-family: Serif;
color: blue;
font-style: italic, bold;
quotes: "\00AB" "\00BB";
}
</style>
</head>
<body>
<p>К сожалению, актуальна и по сей день фраза: <q>Он ее одел, а она его обула.</q></p>
<p><cite>http://nubex.ru</cite></p>
</body>
</html>Поскольку в различных языках существуют свои традиции в использовании кавычек, иногда нужно использовать другие, отличные от стандартных. Изменить кавычки для обрамления цитаты можно при помощи свойства quotes. В приведенном примере в качестве обрамления цитаты используются традиционные для русского языка кавычки-ёлочки.
В тегах <cite></cite> можно дополнительно указать источник цитаты, ссылку или сноску на другой документ.
В конструкторе сайтов "Нубекс" есть возможность добавления красивых цитат при помощи визуального редактора.