Оформление цитат css: Красивое оформление цитат на сайте с помощью CSS

Цитирование в HTML: выбираем теги правильно

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

Перевод статьи
«Quoting in HTML: Quotations, Citations, and Blockquotes».

Неправильное использование HTML-тегов
для обозначения цитат встречается
слишком часто. В этой статье мы углубимся
в эту тему, разберем разные ситуации и
рассмотрим, какие теги для них подходят.

При оформлении цитат используются
три основных элемента:

Давайте по ним пройдемся.

Элемент <blockquote>

Теги <blockquote> используются для
выделения цитаты на фоне остального
контента. Мой учитель английского языка
в старшей школе крепко вбил мне в голову,
что любая цитата длиной в четыре строки
и больше должна отделяться от остального
текста. В спецификациях HTML таких
требований нет, но если у вас есть в
тексте цитата и вы хотите, чтобы она
была выделена на фоне всего остального,
тег <blockquote> это ваш семантический
выбор.

По умолчанию браузеры выделяют цитату
при помощи отступа, добавляя margin с каждой
стороны.

See the Pen
The Blockquote Tag by Undead Institute (@undeadinstitute)
on CodePen.

Как блочный элемент, <blockquote> может
содержать внутри себя другие элементы.
Например, мы без проблем можем разбить
цитату на абзацы:

<blockquote>
   <p></p>
   <p></p> 
</blockquote>   

Но дело не ограничивается абзацами! Внутри блока <blockquote> могут быть и заголовки, и списки:

<blockquote>
     <h3></h3>
     <ul>
       <li></li>
       <li></li>
     </ul> 
</blockquote>

Важно помнить, что <blockquote> используется
для выделения цитат, а не как декоративный
элемент дизайна. Пользователи, использующие
скринридеры, могут перемещаться между
цитатами. Поэтому использование
<blockquote> для чисто эстетических нужд
может сбивать этих пользователей с
толку. Если вам просто нужно выделить
какой-то текст, не являющийся цитатой,
пожалуй, лучшим решением будет элемент
<div> с заданным классом.

blockquote,
.callout-block {
  /* These could share styling */
}

Выделение цитаты при помощи
тега <q>

Теги <q> предназначены для цитат
внутри текста. Мой учитель английского
сказал бы, что речь идет о цитатах длиной
меньше четырех строк. Многие современные
браузеры автоматически добавляют
кавычки к цитатам в виде псевдоэлементов,
но для более старых браузеров стоит
иметь запасной вариант.

See the Pen
The Q Tag by CSS-Tricks (@css-tricks)
on CodePen.

Обычные кавычки в тексте так же валидны
для встроенных в предложения цитат, как
и элемент <q>. Но использование <q>
имеет преимущества, поскольку у этого
элемента есть атрибут cite, автоматическая
вставка кавычек и автоматическое
управление уровнями цитирования.
Элементы <q> не следует использовать
для обозначения саркастических замечаний
и воображаемых кавычек, при разговоре
передаваемых жестами. Но если вы знаете,
как правильно выделить воображаемые
кавычки, расскажите и мне, пожалуйста.

Атрибут cite

Оба элемента — <q> и <blockquote> —
могут использовать атрибут cite (от англ.
«citation» — ссылка). Этот атрибут содержит
URL, предоставляющий контекст и/или ссылку
на цитируемый материал. В спецификации
указано, что URL может быть окружен
пробелами. Я не знаю, зачем это отдельно
оговаривается, но если вы действительно
хотите разозлить божеств семантического
кода, вам придется делать нечто большее,
чем просто разбрасываться пробелами.

<p>The officer left a note saying <q cite="https://johnrhea.com/summons">You have been summoned to appear on the 4th day of January on charges of attempted reader bribery.</q></p>

Сам атрибут cite по умолчанию для
пользователей не виден. Но вы можете
добавить немного CSS-магии, как в приведенном
ниже примере. Можно даже сделать так,
чтобы источник появлялся при наведении
мыши на цитату.

See the Pen
Attributable citations by CSS-Tricks (@css-tricks)
on CodePen.

Но эти подходы нельзя назвать хорошими.
Если вам нужно, чтобы пользователь видел
источник цитаты и мог перейти по ссылке,
стоит это делать при помощи HTML, возможно,
используя элемент <cite>.

Элемент <cite>

Теги <cite> должны использоваться для указания произведений, а не на имени человека, написавшего или сказавшего что-либо. Иными словами, этот элемент вообще не предназначен для цитат. Вот примеры из спецификаций:

<p>My favorite book is <cite>The Reality Dysfunction</cite> by
Peter F. Hamilton. My favorite comic is <cite>Pearls Before
Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
Samba</cite> by the Cannonball Adderley Sextet.</p>

Вот еще пример:

See the Pen
Cite This! by CSS-Tricks (@css-tricks)
on CodePen.

Если автор этой статьи скажет, что
даст вам пирожок, чтобы вы окружили
тегами <cite> его имя, это будет
семантически неправильно, так что
пирожка вам не видать. А если вы окружите
этими тегами название статьи, в которой
вам предлагался пирожок, это будет
семантически правильно, но пирожок
предлагался не за это, так что очень
жаль, но он вам все же не достанется.

По умолчанию браузеры выделяют элемент
cite курсивом. Сам элемент не привязан к
элементами <q> или <blockquote>, так что
их может вообще не быть. Если вы хотите
упомянуть какое-нибудь произведение и
выделить название, поместите его в
элемент <cite>. Семантические божества
будут довольны, что вы не использовали
элементы <i> или <em>.

Но куда вставить элемент <cite>, если
хочешь указать источник цитаты? Внутри
блока цитаты? Снаружи? Если мы поместим
его внутри <blockquote> или <q>, этот
элемент станет частью цитаты. По этой
причине такое расположение запрещено
спецификацией.

<!-- Это неправильно -->
<blockquote>
  Quote about cupcake distribution from an article
  <cite>The Article</cite>
</blockquote>

Помещать элемент <cite> вне блока
цитаты тоже кажется неправильным. Кроме
того, если вы захотите стилизовать
цитату и источник совместно, вам придется
заключить оба элемента в какой-нибудь
другой элемент, например, в <div>.

<div>
  <blockquote>
    Quote about cupcake distribution from an article
  </blockquote>
  <cite>The Article</cite>
</div>

А как насчет элемента <figure>?

Все же есть один способ подписать
цитату так, чтобы семантические божества
были довольны: вы можете поместить
элемент <blockquote> внутрь элемента
<figure>. А следом можно поместить имя
автора и источник (окруженный тегами
<cite>) в элемент <figcaption>.

<figure>
  <blockquote>
    But web browsers aren’t like web servers. If your back-end code is getting so big that it’s starting to run noticably slowly, you can throw more computing power at it by scaling up your server. That’s not an option on the front-end where you don’t really have one run-time environment—your end users have their own run-time environment with its own constraints around computing power and network connectivity.
  </blockquote>
  <figcaption>
    — Jeremy Keith, <cite>Mental models</cite>
  </figcaption>
</figure>

Несмотря на то что при таком подходе
количество необходимых элементов
удваивается, он имеет ряд преимуществ:

1. Это семантически правильное
   использование всех четырех элементов.
2. Это позволяет и включить имя автора,
   и отделить его от названия произведения.
3. Вы получаете простой способ оформить
   цитату без всяких <div> и <span>.

See the Pen
It Figures You’d Say That by CSS-Tricks (@css-tricks)
on CodePen.

Ничто из перечисленного не
предназначено для оформления диалогов

Все перечисленные элементы предназначены
для привлечения внимания. А диалоги это
просто обмен репликами между людьми,
которые разговаривают или переписываются
друг с другом. (Прим. перев.: в английском
языке диалоги передаются непрямой
речью, при помощи кавычек).

Для диалогов не должны использоваться
ни <blockquote>, ни <q>, ни <cite>. В
остальном диалог можно оформлять как
угодно, для этого нет прописанного
семантического способа. То есть,
спецификация предлагает элементы <p>
и знаки пунктуации, а также <span> или
<b> для обозначения говорящего.

Доступность цитат

Исходя из того, что я читал, у скринридеров
не должно быть проблем с распознаванием
семантически правильно использованных
тегов <q>, <blockquote> и <cite>.

Еще немного о кавычках

К <blockquote> можно добавлять кавычки,
используя псевдоэлементы CSS. Элемент
<q> сам по себе добавляет кавычки, но
можно добавить их в виде псевдоэлементов
— в качестве костыля для более старых
браузеров, где они не добавляются
автоматически. Это не повредит отображению
цитаты в современных браузерах: они
перезаписывают установленные по
умолчанию псевдоэлементы, а не просто
добавляют дополнительные.

Но не следует предполагать, что так
вы точно получите «умные» открывающие
и закрывающие кавычки. Даже если браузер
поддерживает умные кавычки, порой
отображаются просто прямые. Чтобы
обезопасить себя, лучше использовать
свойство
CSS quotes:

blockquote {
  quotes: "“" "”" "‘" "’";
}

See the Pen
«Quot-a-tizing» the blockquote by CSS-Tricks (@css-tricks)
on CodePen.

Многоуровневое цитирование

Теперь давайте обратим внимание на
уровни цитирования. Тег <q> автоматически
их учитывает.

Допустим, вы работаете в регионе, где
применяется британское соглашение об
использовании одинарных кавычек. Вы
можете прописать очередность применения
разных типов кавычек в правило CSS quotes,
указав одинарные кавычки (открывающую
и закрывающую) первыми в списке. Вот
пример с двумя вариантами:

See the Pen
Quote Within a Quote by CSS-Tricks (@css-tricks)
on CodePen.

Вложенность цитирования не ограничена.
Вложенные элементы <q> могут быть
даже внутри блока <blockquote>, находящегося
внутри другого блока <blockquote>.

Если вы добавляете кавычки к цитате,
оформленной с помощью элемента
<blockquote>, не забывайте, что в нем не
предусмотрена автоматическая смена
кавычек в зависимости от уровня
цитирования (как в <q>). Если вы хотите
иметь кавычки внутри <blockquote>, возможно,
нужно добавить правило для комбинированного
селектора, чтобы элементы <q> внутри
<blockquote> выделялись одинарными
кавычками (или двойными, если вы следуете
британскому соглашению).

 blockquote q {
  quotes: "‘" "’" "“" "”";
}

Последний указанный вами вариант
кавычек будет использоваться для всех
последующих уровней цитирования. Если
вы хотите, чтобы во вложенных цитатах
чередовались одинарные и парные кавычки,
добавьте в свойство quotes побольше уровней.

q {
  quotes: "“" "”" "‘" "’" "“" "”" "‘" "’" "“" "”";
}

Висячая пунктуация

Многие эксперты в сфере типографии
скажут вам, что висячая пунктуация в
цитатах выглядит лучше (и они правы). По
сути, висячая пунктуация это кавычки,
вынесенные за текст, выровненный по
вертикали.

Для достижения такого эффекта можно
использовать небольшое отрицательное
значение свойства text-indent. Точное значение
может варьироваться в зависимости от
шрифта, так что обязательно проверьте
величину отступа с тем шрифтом, который
используете.

blockquote {
  text-indent: -0.45em;
}

Есть и лучший способ сделать висячую
пунктуацию: можно использовать
CSS-свойство hanging-punctuation. Но на момент
написания этой статьи оно поддерживается
только в Safari:

/* Fallback */
blockquote {
  text-indent: -0.45em;
}

/* If there's support, erase the indent and use the property instead */
@supports ( hanging-punctuation: first) {
  blockquote {
    text-indent: 0;
    hanging-punctuation: first;
  }
}

Использование hanging-punctuation лучше, потому
что это свойство просто работает, если
может.

See the Pen
Hanging Your Punctuation by CSS-Tricks (@css-tricks)
on CodePen.

Можно ли анимировать кавычки?

Естественно.

See the Pen
Dancing Quotes by CSS-Tricks (@css-tricks)
on CodePen.

Я не очень представляю, зачем вам это
может понадобиться, но тем не менее.
Кавычки, добавляемые к цитате, окруженной
тегами <q>, добавляют псевдоэлементы
в таблицу стилей, так что их можно
оформить как угодно, включая добавление
анимации.

Погодите, возможно, это как раз неплохой вариант для оформления воображаемых кавычек!

Как сделать цитирование в разметке HTML разными способами

От автора: слишком часто можно увидеть неправильный HTML-код, используемый для цитат в разметке. В этой статье давайте разберемся со всем этим, рассмотрим различные ситуации и разные HTML-теги для этих ситуаций.

В цитатах используются три основных элемента HTML: <blockquote>, <q>, <cite>. Давайте рассмотрим их по порядку.

blockquote

Теги blockquote используются для того, чтобы цитируемый текст отличался от остального содержимого. Мой учитель английского в десятом классе вложил мне в голову, что любая цитата из четырех или более строк должна быть выделена таким образом. Спецификация HTML не содержит такого требования, но когда текст является цитатой, и вы хотите, чтобы он был отделен от окружающего текста и тегов, blockquote является семантическим выбором.

По умолчанию браузеры вставляют отступы, добавляя поля с каждой стороны.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Как элемент потока (то есть элемент «уровня блока»), blockquote может содержать внутри другие элементы. Например, мы можем без проблем вставить абзацы:

<blockquote>
<p></p>
<p></p>
</blockquote>

Но это могут быть и другие элементы, такие как заголовок или неупорядоченный список:

<blockquote>
<h3></h3>
<ul>
<li></li>
<li></li>
</ul>
</blockquote>

Важно отметить, что blockquote должны использоваться только для цитат, а не как декоративный элемент в дизайне. Это также способствует доступности, поскольку пользователи программы чтения с экрана могут переходить между цитатами. Таким образом, элемент blockquote, используемый исключительно для эстетики, может действительно запутать этих пользователей. Если вам нужно что-то более декоративное, выходящее за пределы расширенных цитат, то, возможно, лучше использовать div с классом.

blockquote,
.callout-block {
/* These could share styling */
}

q

Теги q предназначены для встроенных цитат или, как сказал бы мой учитель в десятом классе, тех, что имеют меньше четырех строк. Многие современные браузеры автоматически добавляют кавычки для цитат в качестве псевдо-элементов, но для старых браузеров может потребоваться резервное решение.

Стандартные кавычки так же действительны для встроенных цитат с элементом <q>. Преимущества использования <q>, однако, заключаются в том, что он включает атрибут cite, автоматическую обработку кавычек и автоматическую обработку уровней кавычек. Элементы <q> не должны использоваться для сарказма. Или собственного описания автора. Но если вы можете четко определить, как размечать подобные цитаты, пожалуйста, дайте мне знать. Потому что это было бы «круто».

Атрибут cite

И <q>, и blockquotes могут использовать атрибут цитирования (cite). Этот атрибут содержит URL, который предоставляет контекст и / или ссылку на цитируемый материал. Спецификация подразумевает, что URL может быть окружен пробелами. (Я не уверен, почему это указано, но если вы хотите разозлить божеств семантического кода, вам придется сделать больше, чем просто выбросить пробелы.)

<p>The officer left a note saying <q cite=»//johnrhea.com/summons»>You have been summoned to appear on the 4th day of January on charges of attempted reader bribery.</q></p>

Атрибут cite не виден пользователю по умолчанию. Вы можете добавить его с помощью магии CSS, как показано в следующей демонстрации. Вы можете даже повозиться с тем, чтобы цитата появлялась при наведении.

Ни один из этих вариантов не является особенно хорошим. Если вам нужно процитировать источник так, чтобы пользователи могли его увидеть и перейти к нему, вы должны сделать это в HTML и, возможно, с помощью элемента cite, который мы рассмотрим далее.

Элемент cite

Тег cite следует использовать для ссылки на авторскую работу, а не на человека, который сказал или написал цитируемую фразу. Другими словами, его не нужно выделять кавычками. Вот примеры из спецификации:

<p>My favorite book is <cite>The Reality Dysfunction</cite> by
Peter F. Hamilton. My favorite comic is <cite>Pearls Before
Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
Samba</cite> by the Cannonball Adderley Sextet.</p>

Вот еще один пример:

Если бы автор этой статьи сказал вам, что он даст вам кекс, а вы использовали cite для его имени, это было бы семантически неверно. Если бы вы использовали это для статьи, в которой он предложил вам кекс, это было бы семантически правильно, но поскольку автор этого не сделал, вы все равно не получили бы кекс. Сожалею.

По умолчанию браузеры выделяют курсивом теги cite, для элемента cite не требуется наличие <q> или blockquote. Если вы хотите процитировать книгу или другую творческую работу, добавьте ее в элемент cite. Семантические божества будут благосклонны к вам, если вы не используете <i> либо <em>.

Но где добавлять элемент cite? Внутри? За пределами? Если положить его в blockquote или <q> мы делаем его частью цитаты. Спецификацией запрещено делать это только по данной причине.

<!— This is apparently wrong —>
<blockquote>
Quote about cupcake distribution from an article
<cite>The Article</cite>
</blockquote>

Выносить его наружу просто кажется неправильным, а также требует, чтобы у вас был содержащий элемент, например, div, если вы хотите объединить их вместе.

<div>
<blockquote>
Quote about cupcake distribution from an article
</blockquote>
<cite>The Article</cite>
</div>

Если вы поищите решение этого вопроса в Google, то можете натолкнуться на статью Доктора HTML5 2013 года, которая противоречит многому изложенному здесь. Тем не менее, по ссылкам на официальную документацию в ней вы найдете указания соответствующие статье, которую вы читаете сейчас, а не статье «Доктора HTML5». Скорее всего, документация была изменена с тех пор.

Эй, а как насчет элемента figure?

Один из способов разметки цитаты — и таким образом, чтобы угодить божествам семантического кода — это поместить блочную цитату в элемент figure. Затем поместите элемент cite и любую другую информацию об авторе или цитировании в figcaption.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<figure>
<blockquote>
But web browsers aren’t like web servers. If your back-end code is getting so big that it’s starting to run noticably slowly, you can throw more computing power at it by scaling up your server. That’s not an option on the front-end where you don’t really have one run-time environment—your end users have their own run-time environment with its own constraints around computing power and network connectivity.
</blockquote>
<figcaption>
&mdash; Jeremy Keith, <cite>Mental models</cite>
</figcaption>
</figure>

Хотя это удваивает количество необходимых элементов, у этого подхода есть несколько преимуществ:

Это семантически верно для всех четырех элементов.

Это позволяет вам включать и инкапсулировать информацию об авторе, не упоминая название работы.

Это дает вам простой способ оформить цитату, не прибегая к div, span или чему-то в этом роде.

Ничего из этого не относится к dialog

Никакого <dialog>! Он предназначен для модалов, привлекающих внимание. Диалог — это, например, разговорный обмен между людьми, говорящими или печатающими друг другу.

Ни blockquote, ни другое <q>, ни cite не должны использоваться для диалога и подобных обменов фразами между ораторами. Если вы размечаете диалог, вы можете использовать все, что вам нужно. Не существует единственного семантического способа сделать это. Тем не менее, в спецификации предлагаются теги <p> и знаки пунктуации с тегами span или <b> для обозначения динамики, и теги <i> для обозначения направления разговора.

Доступность цитат

Согласно исследованию, которое я провел, экранные дикторы не должны иметь проблем с пониманием меток <q>, blockquote или cite.

Больше «способов» «цитирования»

Вы можете добавить кавычки к blockquote, используя псевдо-элемент CSS. Элемент <q> уже имеет кавычки, так что их не нужно добавлять отдельно. Поскольку именно так современные браузеры добавляют кавычки, нет опасности добавлять повторяющиеся кавычки. Новые браузеры будут перезаписывать псевдо-элементы по умолчанию, а старые браузеры, которые поддерживают псевдо-элементы, будут добавлять кавычки.

Но вы не можете, как и я, предполагать, что вышеизложенное всегда даст вам умные открывающие и закрывающие. Даже если шрифт поддерживает умные кавычки, иногда отображаются прямые кавычки. Чтобы обезопасить себя, лучше использовать CSS-свойство quotes.

blockquote {
quotes: «“» «”» «‘» «’»;
}

Многоуровневое цитирование

Теперь давайте рассмотрим уровни цитат. Тег <q> автоматически регулирует уровень цитаты. Допустим, вы находитесь в области, которая использует британское соглашение об использовании одинарных кавычек. Вы можете использовать CSS правило кавычек, чтобы ставить открывающие и закрывающие одинарные кавычки первыми в списке. Вот пример обоих способов:

Ограничений на глубину вложения нет. Вложенные элементы <q> могут даже находиться внутри цитаты, которая находится внутри цитаты.

Если вы добавляете кавычки в цитату, знайте, что кавычки не изменяют уровень цитаты, как это делает тег <q>. Если вы ожидаете, что в цитате есть кавычки, вы можете добавить правило селектора потомков, чтобы начать элементы <q> внутри цитаты на уровне одинарных кавычек (или двойных кавычек, если вы следуете британским соглашениям).

blockquote q {
quotes: «‘» «’» «“» «”»;
}

Последний введенный вами уровень цитаты будет продолжаться до последующих уровней цитаты. Чтобы использовать соглашение в виде двойные кавычки, одинарные, двойные, одинарные…, добавьте больше уровней в свойство кавычек CSS.

q {
quotes: «“» «”» «‘» «’» «“» «”» «‘» «’» «“» «”»;
}

Выносная пунктуация

Многие эксперты по типографии скажут вам, что вынос кавычек в цитатах выглядит лучше (и они правы). Выносная пунктуация — это, в данном случае, кавычки, которые выводятся из текста, так что символы текста располагаются вертикально, с отступом от них.

Одной из возможностей в CSS является использование небольшого отрицательного значения свойства text-indent. Точный отрицательный отступ будет варьироваться в зависимости от шрифта, поэтому обязательно перепроверьте интервал для шрифта, который вы в конечном итоге используете.

blockquote {
text-indent: -0.45em;
}

Есть лучший способ решить это, используя свойство CSS hanging-punctuation. Оно на момент написания этой статьи поддерживается только в Safari, поэтому нам придется вводить прогрессивное улучшение:

/* Fallback */
blockquote {
text-indent: -0.45em;
}

/* If there’s support, erase the indent and use the property instead */
@supports ( hanging-punctuation: first) {
blockquote {
text-indent: 0;
hanging-punctuation: first;
}
}

Использование hanging-punctuation лучше, потому что это менее неудобно.

Можем ли мы анимировать кавычки?

Конечно можем. Почему вам нужно будет это сделать, я не совсем уверен, но кавычки в теге <q> — это псевдо-элементы в таблице стилей UA, поэтому мы можем выбирать и стилизовать их — включая анимацию — если нам нужно.

Автор: John Rhea

Источник: //css-tricks.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Как красиво оформить цитаты на CSS — Технический блокнот

Тег <blockquote> предназначен для выделения цитат внутри документа. Как правило текст, обозначенный этим тегом, отображается в виде блока с отступами слева и справа, а также с отбивкой сверху и снизу. В этой статье я расскажу как «красиво» его оформить у себя на сайте с помощью CSS.

Примеры оформления тега blockquote на html

На момент написания этой инструкции блоки цитат на моем сайте на WordPress выглядят так:

Как настроить blockquote на css

В простейшем случае нужно изменить фон блока (мы помним, что тег blockquote является блочным элементом CSS), добавить бордюрчик и отступы. У меня это выглядит так:

blockquote {
  background: none repeat scroll 0 0 #fafafa;
  border-bottom: 3px dashed #bababa;
  border-top: 3px dashed #bababa;
  color: #878787;
  font-size: 16px;
  font-style: italic;
  line-height: 1.45;
  padding: 20px;
  position: relative;
  text-align: justify;
  margin: 4% auto;
  min-height: 48px;
  }

Псевдоэлемент :before

Вы спросите, а как же знак «i» перед цитатой (на других сайтах вы так же можете увидеть кавычку(и) и другие символы)? Чтобы добавить больше «украшательств» мы используем всевдоэлемент тегов :before, который применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется.

У меня на сайте CSS стили псевдоэлемента :before для тега blockquote выглядят так:

blockquote:before {
  font-family: FontAwesome; 
  content: "\f05a"; 
  font-size: 48px; 
  font-style: normal; 
  float:left; 
  line-height: 1.0; 
  margin-right: 2%;
  }

Иконочные шрифты для сайта

Как вы успели заметить для вывода значка «i» я использовал специальный иконочный шрифт Awesome. Чтобы его использовать у себя на сайте вам нужно подключить следующий файл CSS стилей у себя на сайте перед закрывающим тегом </boby>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Выводы

Используя CSS стили можно выделить блоки цитат оформленные тегом blockquote на фоне содержимого сайта. А при помощи превдотегов :before, :after и иконочных шрифтов это оформление будет еще краше.

Благодарности

При написании статьи были использованы следующие источники:

1. http://htmlbook.ru/html/blockquote
2. https://zaurmag.ru/priemy-verstki-html-css/ikonochnye-shrifty-dlya-sajta-chto-eto-i-kak-ispolzovat.html
3. http://wordsmall.ru/html-i-css/oformleniya-citaty-teg-blockquote.html

ОБРАЗЦЫ ЦИТАТ С ПРИМЕРАМИ CSS КОДА ДЛЯ КРАСИВОГО ОФОРМЛЕНИЯ СТАТЕЙ ~ Страницы Интернета

18 Образцов — примеров, как красиво оформить цитату с помощью CSS кода. Оформление цитируемых блоков является неотъемлемой частью любого мало-мальски серьёзного сайта или блога. Цитаты в умеренных количествах украшают текст и создают впечатление основательности. CSS Код добавляется в файл стилей .css Текст который нужно выделить, привлечь внимание, заключается в теги < blockquote > < /blockquote > или к параграфу добавляется стиль < p > < /p >.

Образцы CSS кода брались из разных источников и публикуются как есть. Если вас интересует чистота кода, рекомендуем изучить css и сделать правки.

Разные способы оформления цитат:

CSS Код можно получить нажав на ссылку под образцом цитаты блока

• Посмотреть CSS Код блока:

• Посмотреть CSS Код цитаты:

• Посмотреть CSS Код блока:

• Посмотреть CSS Код цитаты:

  .blockquote {
  background: #f7f7f7;
  border-left:5px solid #FF7F00;
  font-style: italic;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  }
  .blockquote:before {
  color: #bbb;
  content: «\201C»; /* Непечатаемый символ слева */
  font-size: 3em;
  line-height: 0.1em;
  margin-right: 0.2em;
  vertical-align: -.4em;
  }
  .blockquote:after {
  color: #bbb;
  content: «\201D»; /* Непечатаемый символ справа */
  font-size: 3em;
  line-height: 0.1em;
  vertical-align: -.45em;
  }
  .blockquote > p:first-child {
  display: inline;
  }

• Посмотреть CSS Код:

Css блок для выделения большого текста. При наведении курсора боковая полоса-бордюр меняется. Demo: http://mmktricks.blogspot.ru/2013/01/stylish-blockquote-for-blogger-with.html

• Посмотреть CSS Код:

• Посмотреть CSS Код:

• Посмотреть CSS Код:

• Посмотреть CSS Код:

• Посмотреть CSS Код:

• Посмотреть CSS Код:

• Получить CSS Код:

• Получить CSS Код:

• Получить CSS Код:

• CSS Код блока:

Оформление ссылок для скачивания с файлообменников

• CSS Код ссылок:

• CSS Код ссылок:

• CSS Код ссылок:

Вот пожалуй и всё! По аналогии делаются врезки в статье, примечания, заметки и т.д. Всё зависит от вашей фантазии и знаний CSS.

http://editlw.ru/articles.php?article_id=288

Источник: EditLw.Ru

css — Оформить цитату в html

* {
  box-sizing: border-box;
}

*::before,
*::after {
  content: ""; 
  display: table;
  clear: both;
}

blockquote {
  position: relative;
  background: #fafafa;
  padding: 1rem;
  margin: 1rem;
  background: #fff;
  border: 2px solid #ccc;
}

p {
  float: left;
}

cite {
  display: flex;
  flex-wrap: wrap;
  float: right;
  margin-right: 20px;
}

cite span:first-child {
  color: #aeadad;
  font-style: normal;
}

cite span:last-child {
  color: black;
  font-weight: bold;
  font-style: normal;
}

#v1 {
  position: absolute;
  top: -10px;
  left: -10px;
  background: white;
}

#v2 {
  position: absolute;
  bottom: -11px;
  right: -11px;
  background: white;
}

path {
  fill: none;
  stroke: gray;
  stroke-width: 1px;
}

<blockquote>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  <path d="m 6.7214062,18.043076 -0.064156,11.63789 11.1641508,0.04633 V 17.999241 h -5.388526 c 0.671855,-2.799183 1.074695,-5.755547 5.861699,-6.093347 V 8.3228563 l -5.181289,0.038381 C 9.0408261,9.8242298 6.5750743,15.671151 6.7214062,18.043076 Z"/>
  <path d="m 23.821401,17.999241 -0.06416,11.63789 11.16415,0.04633 V 17.955406 h -5.388525 c 0.671855,-2.799183 1.074695,-5.755547 5.861698,-6.093347 V 8.2790215 l -5.181288,0.038381 C 26.140821,9.780395 23.675069,15.627316 23.821401,17.999241 Z"/>
</svg>
  <div>
    <p>«Идеалами, освещавшими мой путь и сообщавшими мне смелость и мужество, были доброта, красота и истина. Без чувства солидарности с теми, кто разделяет мои убеждения, без преследования вечно неуловимого объективного в искусстве и в науке жизнь показалась
      бы мне абсолютно пустой»</p>
    <cite><span>Автор цитаты: </span><span>Альберт Эйнштейн</span></cite>
  </div>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M 35.527302,19.633139 35.591817,7.9297372 24.364823,7.8831426 V 19.677216 h 5.418858 c -0.675637,2.814941 -1.080745,5.787947 -5.894695,6.127648 v 3.603207 l 5.210455,-0.0386 c 4.09538,-1.471228 6.575012,-7.351062 6.427855,-9.736338 z"/>
  <path d="M 18.108444,19.633139 18.172959,7.9297373 6.945965,7.8831427 V 19.677216 h 5.418858 c -0.675637,2.814941 -1.080745,5.787947 -5.894695,6.127648 v 3.603207 l 5.210455,-0.0386 c 4.09538,-1.471228 6.575012,-7.351062 6.427855,-9.736338 z"/>
</svg>
</blockquote>

Стилизация цитат в CSS | Шнайдер блог

3381 Посещений

Цитирование 一 отличный способ выделить ключевую мысль или важные тезисы, поэтому этот инструмент так часто применяется на сайтах. Чтобы оформить цитату на HTML-странице используется CSS, ровно как и в других случаях, например, при необходимости добавления текстовых эффектов, создания кнопок и пр.. Рассмотрим ряд примеров стилизации цитат.

Во-первых, уточним, что в HTML коде цианата “заключается” в контейнер <blockquote></blockquote>. Здесь возможны следующие параметры, задаваемые в CSS:

• border 一  граница.
• border-width 一 толщина границы.
• margin 一 отступ цитаты.
• padding 一 отступ внутри цитаты.
• font-size 一  размер шрифта.
• color 一  цвет шрифта.
• background 一  фон.

Пример 1. Создадим две границы шириной в 4px:

Пример 2.  Данный пример отличается броским элементом, притягивающем внимание посетителей сайта:

Пример 3. Этот способ оформления актуален в том случае, если текст представляет собой основную часть дизайна:

В браузере:

Оформление цитат

Всем привет и добро пожаловать на SerBlog.ru. Не так часто, но иногда приходится пользоваться тегами (blockquote) цитат на странице. Обычно это происходит в комментариях, когда нужно процитировать ранее опубликованный комментарий, чтобы было понятно кому вы ответили. Или же просто выделить в статье какую-то часть текста, чтобы сделать акцент и привлечь внимание читателя к чему-то очень важному, по вашему мнению. Обычно в таблицах стилей сайтов уже прописано какое-то оформление для этого тега, но в большинстве случаев это оформление ограничивается лишь наклоном текста. Поэтому мы попробуем изменить эту ситуацию и настроить оформление так, как нам нужно. Выглядеть эту будет вот так:

Знать много и не выставлять себя знающим есть нравственная красота. Знать мало и выставлять себя знающим есть болезнь. Только понимая эту болезнь, мы можем избавиться от нее.
Лао Цзы.

Для того, чтобы изменить оформление, нужно открыть таблицу стилей, обычно это style.css и найти там blockquote. Добавить или вставить вместо тех, которые есть примерно такие строчки:

1
2
3
4
5
6
7
8
9

blockquote{
 background: none repeat scroll 0 0 #FFFFCC;
 border: 1px solid #DDDDDD;
 border-radius: 5px 5px 5px 5px;
 color: gray;
 font: italic 14px arial;
 padding: 5px 10px !important;
}
blockquote:before, blockquote:after{content:"---";}

blockquote{
background: none repeat scroll 0 0 #FFFFCC;
border: 1px solid #DDDDDD;
border-radius: 5px 5px 5px 5px;
color: gray;
font: italic 14px arial;
padding: 5px 10px !important;
}
blockquote:before, blockquote:after{content:»—«;}

Вот таким образом можно изменить стандартный вид оформления цитат. Изменять их можно как угодно, зависит от вашей фантазии. Еще через CSS можно сделать красивое оформление ссылок.

Цитирование в HTML: цитаты, цитаты и цитаты

Очень часто можно увидеть неправильный HTML, используемый для кавычек в разметке. В этой статье давайте углубимся во все это, рассмотрим различные ситуации и различные HTML-теги, которые помогут справиться с этими ситуациями.

В цитатах используются три основных HTML-элемента:

Давайте посмотрим.

Цитаты

Теги Blockquote используются для отличия цитируемого текста от остального содержимого.Мой учитель английского в десятом классе вбил мне в голову, что любая цитата, состоящая из четырех или более строк, должна разделяться таким образом. В спецификации HTML такого требования нет, но если текст представляет собой цитату и вы хотите, чтобы он располагался отдельно от окружающего текста и тегов, цитата является семантическим выбором.

По умолчанию браузеры выделяют кавычки, добавляя поля с каждой стороны.

См. Pen
The Blockquote Tag от Undead Institute (@undeadinstitute)
на CodePen.

Как элемент потока (т.е. Элемент «уровень блока»), цитата может содержать внутри себя другие элементы. Например, мы можем без проблем перетащить туда абзацы:

  <цитата>
  
 
  
 
  

Но это могут быть и другие элементы, например, заголовок или неупорядоченный список:

  <цитата>
    
 
    

      
 
      
 
    
  

Важно отметить, что цитаты следует использовать только для цитат, а не в качестве декоративного элемента в дизайне.Это также способствует доступности, поскольку пользователи программ чтения с экрана могут переключаться между цитатами. Таким образом, элемент цитаты, используемый исключительно для эстетики, может действительно сбить с толку этих пользователей. Если вам нужно что-то более декоративное, выходящее за рамки расширенных цитат, возможно, вам подойдет div с классом.

  цитата,
.callout-block {
  / * Они могут иметь одинаковый стиль * /
}  

Котировка с Q

Теги

Q ( ) предназначены для встроенных цитат , или, как сказал бы мой учитель в десятом классе, заключенных в четыре строки.Многие современные браузеры автоматически добавляют кавычки в кавычки как псевдоэлементы, но вам может потребоваться решение для резервного копирования для старых браузеров.

См. Pen
The Q Tag от CSS-Tricks (@ css-tricks)
на CodePen.

Типичные кавычки так же допустимы для встроенных кавычек, как и элемент . Однако преимущества использования заключаются в том, что он включает атрибут cite, автоматическую обработку кавычек и автоматическую обработку уровней кавычек. Элементы не должны использоваться для сарказма (например, « вы бы использовали тег для сарказма, не так ли?») Или обозначение слова с кавычками (например, «круто» — это «точное» описание автора). Но если вы можете придумать, как разметить авиаквоты, дайте мне знать. Потому что это было бы «круто».

Атрибут цитирования

И , и цитаты могут использовать атрибут цитирования ( cite ).Этот атрибут содержит URL-адрес, который предоставляет контекст и / или ссылку на цитируемый материал. В спецификации говорится, что URL-адрес может быть окружен пробелами. (Я не уверен, почему это указано, но если вы хотите рассердить божеств семантического кода, вам придется сделать больше, чем просто разбрасывать пробелы.)

  
 Офицер оставил записку, в которой говорилось:  Вы были вызваны на явку 4 января по обвинению в попытке подкупа читателей. 
  

Атрибут cite по умолчанию не виден пользователю. Вы можете добавить его, добавив немного магии CSS, как в следующей демонстрации. Вы можете даже повозиться с ним, чтобы цитата появлялась при наведении курсора.

См. Ссылки на Pen
от CSS-Tricks (@ css-tricks)
на CodePen.

Ни один из этих вариантов не особо хорош. Если вам нужно процитировать источник, чтобы пользователи могли его увидеть и перейти к нему, вы должны сделать это в HTML и, возможно, с элементом , о котором мы поговорим дальше.

Элемент цитирования

Тег следует использовать для ссылки на творческую работу, а не на человека, который сказал или написал цитату. Другими словами, это не для цитат. Вот примеры из спецификации :

  
 Моя любимая книга -  Дисфункция реальности  автора
Питер Ф. Гамильтон. Мой любимый комикс -  Pearls Before
Свинья  Стефана Пастиса. Мой любимый трек -  Jive.
Самба  от Cannonball Adderley Sextet.
  

Вот еще один пример:

См. Pen
Cite This! от CSS-Tricks (@ css-tricks)
на CodePen.

Если автор этой статьи сказал вам, что подаст вам кекс, а вы ему по имени , это было бы семантически неверно. Таким образом, кексы не переходили из рук в руки. Если вы процитировали статью , в которой он предлагал вам кекс, это было бы семантически правильно, но поскольку автор этого не сделает, вы все равно не получите кекс.Простите.

По умолчанию браузеры выделяют теги цитирования курсивом, и для использования элемента цитирования не требуется наличие или

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

Но где разместить элемент cite? Внутри? Снаружи? В перевернутом виде? Если мы поместим его внутри ,

или , мы сделаем его частью цитаты.Это запрещено спецификацией именно по этой причине.

  
<цитата>
  Цитата о раздаче кексов из статьи
   Статья 

Размещение его снаружи кажется неправильным, а также требует наличия закрывающего элемента, такого как

, если вы хотите стилизовать их вместе.

  

  <цитата>
    Цитата о раздаче кексов из статьи