Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Оформление цитат 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>

  <p></p>

  <p></p>

</blockquote>

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

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

<blockquote>

    <h3></h3>

    <ul>

      <li></li>

      <li></li>

    </ul>

</blockquote>

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

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

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>

<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>

<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>

<!— 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>

<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>

<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: «“» «”» «‘» «’»;
}

blockquote {

  quotes: «“» «”» «‘» «’»;

}

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

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

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

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

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

blockquote q {

  quotes: «‘» «’» «“» «”»;

}

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

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

q {

  quotes: «“» «”» «‘» «’» «“» «”» «‘» «’» «“» «”»;

}

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

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

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

blockquote {
text-indent: -0.45em;
}

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;
}
}

/* 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:


blockquote {  


border-top: #999 4px solid;


border-bottom: #999 4px solid;


font-size: 16px;


margin: 12px 50px;  


color: #999;


padding: 20px;


}

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


blockquote {


border: dotted #666 1px;


border-left:solid #ff5a00 7px;


margin:12px 42px;


padding:20px;


color:#345;


font-style:italic;


font-size:14px;


background:#fcfcfc;


}

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


  }


blockquote {


border-left: solid 3px #333;


padding-left:1px;


margin: 15px 45px;


}


blockquote p{


border-left: solid #666 1px;


margin:0;


padding:15px;


color:#333;


font:16px ‘Arial’;


}

В браузере:

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

Всем привет и добро пожаловать на 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? Внутри? Снаружи? В перевернутом виде? Если мы поместим его внутри ,

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

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

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

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

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

Н.Б. Если вы погуглите эту проблему, вы можете натолкнуться на статью HTML5 Doctor от 2013 года, которая противоречит многим из того, что здесь изложено. Тем не менее, каждый раз, когда он ссылается на документацию для получения поддержки, документы соглашаются со статьей, которую вы сейчас читаете, а не со статьей HTML5 Doctor. Скорее всего, с момента написания статьи документы изменились.

Эй, а как насчет элемента фигуры?

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

  <рисунок>
  <цитата>
    Но веб-браузеры не похожи на веб-серверы. Если ваш внутренний код становится настолько большим, что начинает работать заметно медленно, вы можете увеличить его вычислительную мощность, увеличив масштаб вашего сервера. Это не вариант для внешнего интерфейса, где у вас действительно нет  и одной среды выполнения  - у ваших конечных пользователей есть собственная среда выполнения со своими собственными ограничениями в отношении вычислительной мощности  и сетевого подключения .
  
& mdash; Джереми Кейт, Ментальные модели

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

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

См. «Pen
It Figures You’d Say That by CSS-Tricks (@ css-tricks)
» на CodePen.

Ничего из этого не для диалога

Не <диалог> ! Это для привлекающих внимание модальных окон. Диалог, как в разговоре между людьми, говорящими или пишущими друг другу.

Ни

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

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

Доступность котировок

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

или .

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

Вы можете добавить кавычки к

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

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

  blockquote {
  Котировки: """ """ "'" "'";
}  

См. Pen
«Quot-a-tizing» цитату CSS-Tricks (@ css-tricks)
на CodePen.

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

Теперь давайте посмотрим на котировку уровня .Тег автоматически настроит уровни котировок.

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

См. Цитату Pen
в цитате от CSS-Tricks (@ css-tricks)
на CodePen.

Нет предела вложенности. Эти вложенные элементы могут даже находиться внутри цитаты внутри цитаты.

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

  blockquote q {
  Котировки: "'" "'" """ """;
}  

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

  q {
  Котировки: """ """ "'" "'" """ """ "'" "'" """ """;
}  

Знаки пунктуации

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

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

  blockquote {
  текстовый отступ: -0.45em;
}  

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

  / * Откат * /
blockquote {
  текстовый отступ: -0.45em;
}

/ * Если есть поддержка, сотрите отступ и используйте вместо него свойство * /
@supports (знак препинания: первое) {
  blockquote {
    текстовый отступ: 0;
    пунктуация: первая;
  }
}  

Использование знаков препинания лучше, потому что он менее сложен. будет просто работать , когда сможет.

См. Статью «Pen
Hanging Your Punctuation by CSS-Tricks (@ css-tricks)
» на CodePen.

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

Конечно, можем.

См. Pen
Dancing Quotes by CSS-Tricks (@ css-tricks)
на CodePen.

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

Погодите, может, мы все-таки решили проблему с кавычками.

33 CSS-цитат

Коллекция отобранных вручную HTML и CSS-цитат примеров кода: анимация, эффекты наведения, стили типографики и т. Д. .Обновление коллекции за февраль 2019 г. 10 новинок.

  1. Bootstrap Quotes
Автор
  • Тигран Саркисян
О коде

Стилизация цитат

blockquote стиль элемента.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Rases Kühlewein
О коде

Цитата и цитата

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

Автор
  • Элисон Шеррард
О коде

CSS Grid Цихольд Цитата

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Брайан Хаферкамп
О коде

Отзывчивое предложение на вытягивание

Эта отзывчивая цитата на самом деле является иллюзией.Движется текст, а не цитата. Создание интересной выноски без CSS Grid.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

HTML-текст внутри круга

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Сабина Робарт
О коде

Котировки

Скользящие цитаты.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

Автор
  • Сабина Робарт
О коде

Цитата Анимация

Чистый CSS, яркий фиолетовый градиентный текст с background-clip masking, анимационная последовательность для отображения слов и скобок.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Абдель Рман
О коде

Эффекты при наведении курсора на окно цитат

HTML и CSS цитата с эффектами наведения курсора.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

Автор
  • Хуан Пабло
О коде

Цитата на чистом CSS

Цитата на чистом CSS с границей речевого пузыря.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Хуан Пабло
О коде

Цитата: Стивен Прессфилд

Цитата HTML и CSS с верхней / нижней рамкой.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Крис Смит
О коде

Стили цитат

Различные стили для отображения цитат. У некоторых есть нежная анимация.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Пример предложения

Котировки с Font Awesome и псевдоэлементами.

Автор
  • Джейкоб Летт
О коде

Blockquote, Flexbox, RGBA, до содержимого

Экспериментируйте с различными методами CSS, чтобы помочь новичкам поэкспериментировать с позиционированием, цветами, прозрачностью и Flexbox.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Джо Хастинг
О коде

Стиль цитаты

Элегантный стиль цитаты.

Демонстрационный GIF: Цитата парящая

Цитата парящая

Цитата HTML и CSS при зависании.
Сделано Лиси
18 июля 2017 г.

О коде

Цитата на чистом CSS

Элегантное и гибкое решение для цитат. Выделите текст цитаты для красивой анимации.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: bootstrap.css, ionicons.css

Демонстрационное изображение: Цитата по типографике CSS

Цитата по типографике CSS

Как бы то ни было, вы можете заменить цитату своим собственным. Пока каждый абзац размечен должным образом и авторство указано в теге абзаца, кавычки будут работать так же!
Сделано Джошем Коллинсвортом
9 февраля 2017 г.

Демо-изображение: CSS Quote Effect

CSS Quote Effect

Эффект цитаты с использованием фильтра размытия CSS.
Сделано 14islands
27 января 2017 г.

Демонстрационное изображение: Flexbox Quote Bricks

Flexbox Quote Bricks

Quote Bricks с HTML и CSS flexbox.
Сделано Андреа Реннинг
6 октября 2016 г.

Автор
  • Мэтт Попович
О коде

Цена на вытягивание градиента в стиле многоугольника

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Демонстрационное изображение: CSS Quote Style

CSS Quote Style

Стиль кавычек HTML и CSS.
Сделано в Screeny
6 февраля 2016 г.

Автор
  • Томми Ходгинс
О коде

Чередующиеся цитаты

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Дарий ГРАЙ
О коде

Стильная цитата

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Рамон М.Крос
О коде

Стильные цитаты

Стилизация цитат с помощью тени блока .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Демо-изображение: Цитата автора

Цитата автора

Только стиль кавычек CSS.
Сделано Моханом Хадкой
15 июля 2015 г.

Демонстрационное изображение: Ценовое предложение для непрерывного изображения

Ценовое предложение для непрерывного изображения

Непрерывная цитата границы изображения с помощью HTML и CSS.
Автор: Джони Тритхолл
6 июля 2015 г.

Демонстрация GIF: Цитата Анимация Вдохновение

Цитата Анимация Вдохновение

Четыре примера переходов кавычек со свойством «преобразовать». Появляются четыре анимации, чтобы увидеть автора.
Автор Валентин Гальманд
27 июня 2015 г.

Демо-изображение: Цитата

Цитата

HTML и CSS цитата.
Сделано Хосе Мануэлем Гулиасом Луго
23 апреля 2015 г.

Автор
  • Мэтт Сориа
О коде

Необычный стиль цитат

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Демо-изображение: Quote Container

Quote Container

Контейнер цитат на чистом CSS.
Автор Юлиан Савин
12 февраля 2015 г.

Демо-изображение: Тонкая цитата

Тонкая цитата

Небольшой фрагмент цитаты. С тонкой анимацией и всем остальным.
Сделано Тимом Холманом
16 апреля 2014 г.

Демо-изображение: карточка предложения

карточка предложения

цитата HTML, CSS и JavaScript.
Сделано Тобиасом Йоханссоном
5 апреля 2014 г.

О коде

Blockquote Stylée Littéraire

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Лукас Дитрих
О коде

Чертовски простая цитата

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

CSS цитирует свойство

Пример

Для цитат указывать кавычки:

#a {
цитаты: «‘» «‘»;
}

Попробуй сам »


Определение и использование

Свойство котировки устанавливает тип кавычек для цитат.

Значение по умолчанию: не указано
Унаследовано: да
Анимируемый: нет. Прочитать о animatable
Версия: CSS2
Синтаксис JavaScript: объект .style.quotes = «‘\ 253’ ‘\ 273′»
Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Имущество
котировки 11,0 8,0 1,5 5,1 4,0


Синтаксис CSS

цитаты: нет | строка | начальная | наследование;

Значения свойств

Значение Описание Играй
нет Указывает, что значения «open-quote» и «close-quote» свойства «content» не создают кавычек. Играй »
струна струна струна Указывает, какие кавычки использовать.Первые два значения определяют первый уровень встраивания цитаты, следующие два значения определяют следующий уровень встраивания цитаты и т. Д. Играй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальная Играй »
наследовать Наследует это свойство от своего родительского элемента.Читать про наследство

Символы кавычек

Результат Описание Регистрационный номер
« двойная кавычка \ 0022
одинарная кавычка \ 0027
одинарный, кавычка с левым углом \ 2039
одинарный, цитата под прямым углом \ 203A
« двойная кавычка с левым углом \ 00AB
» двойная цитата под прямым углом \ 00BB
левая кавычка (одинарная высокая-6) \ 2018
правая цитата (одинарная высокая-9) \ 2019
левая кавычка (двойная высокая 6) \ 201C
правая кавычка (двойная высокая 9) \ 201D
двойная кавычка (двойная младшая 9) \ 201E

Связанные страницы

Ссылка на HTML DOM: свойство кавычек

Лучший стиль CSS для цитат

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

В этом посте мы собираемся рассмотреть лучшие четыре фрагмента стиля CSS блочного кода за 2020 год, почему они попали в наш список и как включить их в свой веб-сайт WordPress.

What’s A Blockquote

Цитата — это элемент HTML, который указывает, что заключенные теги являются цитатой.По сути, это показывает, что это не ваши слова, а кто-то еще, и упрощает цитирование источника.

Вы можете цитировать источник, используя URL-адреса, информацию о публикации и т. Д. Это тоже предположение, но мы и многие другие считаем, что элемент блочного кода HTML полезен для SEO. Это потому, что Google не любит дублированный контент, и это жестко закодированный индикатор того, что контент, содержащийся в элементе HTML, не принадлежит вам.

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

Цитаты WordPress

На момент написания последней версией WordPress была 5.5. В современных версиях CMS WordPress редактор Gutenberg является основным способом создания и публикации контента. Этот редактор использует блоки, и один из этих блоков по умолчанию — цитата.Вот общий код:

  

цитат WordPress различаются на разных веб-сайтах, потому что к ним применяется стиль темы. Стили и селекторы также могут измениться, если вы используете построители страниц, такие как Elementor или Oxygen Builder.

Однако в большинстве случаев они имеют класс wp-block-quote.

Как использовать фрагменты кода в этой статье

Этот стандартный класс позволяет очень легко применить стили CSS к цитатам, содержащимся в этой статье, а также к цитатам на вашем веб-сайте.Просто возьмите код CSS с веб-сайта репозитория кода (большинство записей в этом списке взяты из codepen.IO), вставьте его в редактор CSS в разделе «Внешний вид» -> «Настройщик».

В большинстве случаев вам нужно изменить селектор CSS, чтобы он соответствовал вашему идентификатору или классу для конкретной цитаты. Обычно, как упоминалось выше, вы можете использовать. wp-block-quote, чтобы применить собственный стиль CSS к цитатам в WordPress.

Однако это может не сработать, поэтому мы рекомендуем проверить разметку HTML с помощью чего-то вроде Chrome Dev Tools.

Конечно, если вы собираетесь использовать много настраиваемого CSS на своем веб-сайте WordPress, мы определенно рекомендуем взглянуть на что-нибудь вроде YellowPencil или CSSHero.

Итак, давайте рассмотрим некоторые из лучших фрагментов кода CSS для оформления блочных кавычек в 2020 году. Мы постараемся обновлять эту статью до самых последних версий CSS, HTML, WordPress, и больше. Поскольку новые варианты стилей CSS-цитат появляются в Интернете, постараюсь разместить их здесь.

Вы можете внести свой вклад и опубликовать свой любимый стиль CSS для цитат в разделе комментариев ниже или щелкнув этот значок ->

Лучший стиль CSS-цитат

Обновлено в августе 2020 г.

Тонкая цитата

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

CSS Quote Box Эффекты наведения

Эта цитата действительно хороша тем, что напрямую реагирует на положение вашей мыши. Когда вы наводите курсор на поле, элементы перемещаются в соответствии с положением вашей мыши, и это делается с помощью чистого CSS. Нет JavaScript для включения в ваш сайт.

Это определенно один из наших фаворитов просто потому, что он намного более уникален, чем любой другой элемент цитаты, который мы видели. В то же время это не чистый элемент цитаты блока HTML5, это стилизованный под DIV.

Концепция приложения Quote

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

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

День 007 Цитата автора

Еще одна карта, такая как виджет цитат, сделанный из HTML5 и чистого CSS, он позволяет отображать коллекцию цитат современным способом. Имейте в виду, что здесь не используется элемент цитаты, но это действительно здорово, потому что все анимации и взаимодействия выполняются с помощью прямого CSS, без JavaScript.

Кнопка автоматического создания твита с цитатой

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

Стильная цитата

Если вы ищете уникальную, прямолинейную цитату CSS, эта может быть для вас. Он использует собственный CSS для стилизации элемента цитаты HTML5, отображая короткую цитату очень уникальным способом. Очевидно, вы можете изменить стиль шрифта!

Удивительный стиль цитат с помощью CSS

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

Цитата из материала Material Design

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

Мы фактически использовали эту цитату на многих наших клиентских веб-сайтах из-за простоты. Имейте в виду, что он не содержит цитат, поэтому вам нужно будет добавить этот HTML-элемент и оформить его соответствующим образом. Он также закодирован в SASS, хотя вы можете легко скомпилировать этот CSS, перейдя к ручке кода, щелкнув стрелку вниз в заголовке CSS и щелкнув просмотреть скомпилированный CSS.

Цитата Glyph Blockquote

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

Стили цитат

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

Необычный стиль цитат

Это причудливый стиль цитат, полностью сделанный из CSS и HTML.Он появляется со страницы и использует глифы цитат. Все делается на чистом CSS, что делает его простым способом отображения цитат на вашем веб-сайте WordPress.

Заключение

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

10 простых CSS-фрагментов для создания красивых цитат

Зачем изобретать колесо, создавая элементы, у которых уже есть бесплатные дизайны в Интернете? Цитаты остаются основным продуктом насыщенных текстом веб-сайтов, и они бывают разных стилей.

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

НЕОГРАНИЧЕННАЯ ЗАГРУЗКА: шаблоны электронной почты, администратора, целевой страницы и веб-сайтов

Всего от 16,50 $ в месяц!

СКАЧАТЬ

Циркулярное предложение

Пожалуй, самая уникальная и стильная цитата во всем этом посте — это цитата из литературного циркуляра.

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

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

Паттерны BQ

Для примеров укротителя ознакомьтесь с этими шаблонами цитат, созданными разработчиком Дереком Уилденом.

Это снова полностью полагается на CSS3 с разными классами для каждой цитаты.Последний из трех содержит элемент нижнего колонтитула для цитирования источника цитаты. Это необязательная функция, которая нравится некоторым людям, но она, конечно, не обязательна для простого веб-сайта.

Это показывает, насколько многого можно достичь с помощью уникальных шрифтов и некоторых незначительных настроек CSS.

Бумага для записей

В это трудно поверить, но эта цитата из блокнота полностью создана с помощью кода CSS3. Никаких фоновых изображений, никаких векторов, только CSS-градиенты и преобразования.

Я не могу сказать, сколько людей сочли бы этот дизайн полезным.Это фантастическая открытка, которая действительно повторяет стиль бумаги. Но независимо от того, как его можно использовать, этот дизайн невероятен и доказывает, насколько далеко продвинулся CSS.

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

Классные цитаты

Иногда имеет смысл включить фотографию цитируемого человека. Это может показаться сложным, но вы можете клонировать эти цитаты Эндрю Райта, чтобы получить такой эффект на своем сайте.

Ручка Эндрю использует заполнители для изображений, поэтому они выглядят немного… простыми. Но ничто не мешает вам изменить некоторые цвета, обновить шрифты и добавить фотографию, чтобы оживить цитаты.

Очень простой дизайн, который довольно легко изменить по своему усмотрению.

Простой блок

Это, безусловно, моя любимая цитата, потому что она действительно может работать на любом веб-сайте. Разработчик Харм Путман использует атрибут cite из цитаты, чтобы указать ссылку внизу.

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

Изящный, элегантный и простой. Три черты, которые хорошо работают на любом веб-сайте.

Серый блок

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

У него довольно чистый дизайн с использованием цитат Font Awesome и живого текста.Я думаю, что с более сильным шрифтом он выглядел бы намного лучше, но он определенно разборчив с любым шрифтом, который вы используете.

Я считаю это прочной «базой» для надстройки и создания собственного стиля цитаты.

Автоматические котировки

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

Это называется автоматической кавычкой, потому что она добавляет кавычки в дизайн через CSS.Таким образом, вы можете просто заключить свой текст в соответствующий тег, и он автоматически добавит в него кавычки. Довольно мило!

Однако в качестве цитаты это было бы довольно просто. Я думаю, что это лучше всего работает как цитата и хорошо выполняет свою работу.

Повышенная цитата

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

У него один цвет фона и довольно четкая тень в нижней части.Здесь также используется собственный шрифт Google под названием Bitter для прямых кавычек.

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

Чередующиеся цитаты

Эти чередующиеся цитаты Томми Ходжинса доказывают, что для создания фантастических цитат не нужно много.

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

Плюс чередующиеся стили позволяют добавлять их в любой ориентации.

Цитата из материала Material Design

И последнее, но не менее важное, я нашел эту классную цитату из материалов, в которой используются цвета и стили, похожие на правила дизайна материалов Google.

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

Это самая крутая цитата в стиле материалов, которую вы найдете, и она абсолютно бесплатна.

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

Этот пост может содержать партнерские ссылки. См. Раскрытие партнерских ссылок здесь .

18 цитат CSS — csshint

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

1.Цитаты анимация
Автор
  • Сабина Робарт
Сделано с использованием
  • HTML / CSS (SCSS)

демо и код

Статьи по теме
  1. Фрагменты начальной загрузки
  2. 24+ стиля ссылки CSS и эффект наведения
  3. Top 20: значки социальных сетей Bootstrap
  4. Top 20: CSS 3D текстовые эффекты
  5. 28 CSS-фрагментов загрузочного счетчика
  6. Top 10: HTML Funny 404 Pages
  7. 30 лучших вкладок CSS
  8. Top 20: окна поиска CSS
  9. 28+ CSS Дизайн iPhone
2.Цитата: Стивен Прессфилд
Автор
  • Хуан Пабло
Сделано с использованием
  • HTML / CSS

демо и код

3. Цитата на кофе
Автор
  • Джейкоб Летт
Сделано с использованием
  • HTML / CSS

демо и код

4.Цитаты со шрифтом Awesome
Автор
  • Хайме
Сделано с использованием
  • HTML / CSS

демо и код

5.Стили цитат
Автор
  • Крис Смит
Сделано с использованием
  • HTML / CSS (SCSS)

демо и код

6. Цитата: Джаред Спул
Автор
  • Хуан Пабло
Сделано с использованием
  • HTML / CSS

демо и код

7. Эффекты при наведении курсора на окно цитат CSS

Автор
  • Абдель Рман
Сделано с использованием
  • HTML (мопс) / CSS (SCSS)

демо и код

8.Цитата автора
Автор
  • Мохан Хадка
Сделано с использованием
  • HTML / CSS

демо и код

9. Цитаты
Автор
  • Юлиан Савин
Сделано с использованием
  • HTML / CSS

демо и код

10. цитата
Автор
  • Тобиас Йоханссон
Сделано с использованием
  • HTML / CSS (SCSS) / JS

демо и код

11.цитата Тест
Автор
  • Хосе Мануэль Гулиас Луго
Сделано с использованием
  • HTML / CSS

демо и код

12.Pure CSS Blockquote
Автор
  • Джон Финк
Сделано с использованием
  • HTML (мопс) / CSS (Sass)

демо и код

13.BlockQuote css

Автор
  • Csshint
Сделано с использованием
  • HTML / CSS

демо и код

14.Чистый и простой стиль цитаты
Автор
  • Джонатан Клифт
Сделано с использованием
  • HTML / CSS

демо и код

15. стилет для цитат
Автор
  • Vero
Сделано с использованием
  • HTML / CSS

демо и код

16.Карточки с цитатами
Автор
  • Сабина Робарт
Сделано с использованием
  • HTML / CSS (Scss)

демо и код

17.Современные стили цитат из блоков

Автор
  • Мэри Лу
Сделано с использованием
  • HTML / CSS

демо и код

18. укладка цитаты
Автор
  • Джо Гастингс
Сделано с использованием
  • HTML / CSS (Меньше)

демо и код

Фрагменты для цитат стиля

html — Делайте большие цитаты с

html — Делайте большие цитаты с

— qaru

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

Спросил

Просмотрено
51к раз

Несколько лет назад я использовал этот тег для создания цитаты на моем сайте (с большими кавычками).

Сейчас я хочу сделать то же самое, но это больше не работает. Единственное, что я получаю, это маленькие «», а не большие.

Как мне вернуть старые, большие?

Спасибо!

Создан 01 мая.

МэттМэтт

1,7951010 золотых знаков2929 серебряных знаков5555 бронзовых знаков

Я думаю, вы ищете что-то вроде этого:

  blockquote {
    семейство шрифтов: Georgia, serif;
    размер шрифта: 18 пикселей;
    стиль шрифта: курсив;
    ширина: 500 пикселей;
    маржа: 0.25em 0;
    отступ: 0,35 м 40 пикселей;
    высота строки: 1,45;
    положение: относительное;
    цвет: # 383838;
}

blockquote: before {
    дисплей: блок;
    отступ слева: 10 пикселей;
    содержание: «\ 201C»;
    размер шрифта: 80 пикселей;
    позиция: абсолютная;
    слева: -20 пикселей;
    верх: -20 пикселей;
    цвет: # 7a7a7a;
}

blockquote cite {
    цвет: # 999999;
    размер шрифта: 14 пикселей;
    дисплей: блок;
    маржа сверху: 5 пикселей;
}

blockquote cite: before {
    содержание: «\ 2014 \ 2009»;
}
  

Бросил код в JSFiddle , чтобы вы могли поиграть с .

Нашел учебник по этому поводу: http://www.webmaster-source.com/2012/04/24/pure-css-blockquote-styling/

Создан 01 мая 2013 в 21:01

EnigmaRMEnigmaRM

7,2779 золотых знаков4141 серебряный знак7272 бронзовых знака

1

Вот решение на чистом CSS, которое добавляет и большую начальную, и большую заключительную цитату в правом нижнем углу:

  blockquote {
    семейство шрифтов: Georgia, serif;
    положение: относительное;
    маржа: 0.5em;
    заполнение: 0.5em 2em 0.5em 3em;
}
/ * Спасибо: http://callmenick.com/post/styling-blockquotes-with-css-pseudo-classes * /
blockquote: before {
    семейство шрифтов: Georgia, serif;
    позиция: абсолютная;
    размер шрифта: 6em;
    высота строки: 1;
    верх: 0;
    слева: 0;
    содержание: «\ 201C»;
}
цитата: после {
    семейство шрифтов: Georgia, serif;
    позиция: абсолютная;
   / * display: block; не используйте это, он поднял цитату слишком высоко снизу - побежденная высота строки? * /
    float: right;
    размер шрифта: 6em;
    высота строки: 1;
    справа: 0;
    внизу: -0.5em;
    содержание: «\ 201D»;
}
нижний колонтитул blockquote {
    заполнение: 0 2em 0 0;
    выравнивание текста: вправо;
}
blockquote cite: before {
    содержание: «\ 2013»;
}  
  
<цитата> Важен не критик; не тот, кто указывает, как сильный спотыкается или где делатель мог бы сделать это лучше. Заслуга принадлежит человеку, который действительно находится на арене, чье лицо испачкано пылью, потом и кровью; кто доблестно стремится; кто ошибается, кто терпит неудачу снова и снова, потому что нет усилий без ошибок и недостатков; но кто на самом деле стремится делать дела; кто знает большой энтузиазм, великую преданность; кто тратит себя на достойное дело; кто в лучшем случае знает, в конце концов, торжество высоких достижений, и кто в худшем случае, если он потерпит неудачу, по крайней мере, потерпит неудачу, несмотря на большую смелость, так что его место никогда не будет среди тех холодных и робких душ, которые не знают ни победы, ни поражения .<нижний колонтитул> Тедди Рузвельт

Создан 10 янв.

Баодад

2,1552 золотых знака3434 серебряных знака3939 бронзовых знаков

Не тот ответ, который вы ищете? Посмотрите другие вопросы с тегами html block quote или задайте свой вопрос.

lang-html

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Добавить комментарий

Ваш адрес email не будет опубликован.