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

примеров и передовых методов — Smashing Magazine

Об авторе

Свен — соучредитель и бывший генеральный директор Smashing Magazine. Он пишет в своем блоге Conterest, где сосредоточивается на блогах, контент-стратегии, написании и публикации … Больше о Свен ↬

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

В этом посте представлены творческих примеров и передовых практик для разработки котировок . Мы попытались определить некоторые общие решения и интересные подходы, которые вы, возможно, захотите использовать или развить в своих проектах.

Разве все эти цитаты не совпадают?

№Прежде всего: цитата ≠ цитата блока ≠ цитата. Цитаты по запросу — это короткие выдержки из представленного текста. Они используются, чтобы вывести текст из потока читателя и придать ему более доминирующее положение в сообщении или статье.

Так же, как цитата , цитата (на самом деле цитата, ) также выделяется из основного текста как отдельный абзац или блок.Однако они ссылаются на некоторую внешнюю цитату, которая еще не упоминалась в статье. Цитаты блока обычно помещаются в поток читателя.

Наконец, «нормальные» цитаты цитируют контент, найденный в некоторых других источниках, и включены, чтобы поддерживать контент, а не доминировать над ним.

Blockquote vs. Q vs. Cite

Согласно спецификациям HTML, есть три элемента, которые должны семантически размечать цитаты, а именно

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

blockquote — это большая цитата. Содержание цитаты элемент должен включать элементы уровня блока, такие как заголовки, списки, абзацы или div. Этот элемент также может иметь необязательный атрибут cite который указывает местоположение (в форме URI), откуда пришла цитата.Пример:

  


 
 
 Большая цитата. Содержимое элемента цитаты должно включать элементы уровня блока, такие как заголовки, списки, абзацы или блоки div. 
 
 cite может использоваться для указания местоположения (в форме URI), откуда пришла цитата. 
 


 
 
 
  

q — небольшая цитата.Содержимое этого элемента — встроенная цитата. Современные браузеры умеют интерпретировать , поэтому вы можете стилизовать цитаты, используя эти HTML-элементы через CSS. Пример:

  
 Боб сказал  сексуальная пижама , а Крис сказал  кимоно  
  

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

  Q {}
Q {цитаты: ‘» ’‘ «’}
Q {quote: ‘„ ’‘ “’}  

Современные браузеры поддерживают этот способ стилизации. Конечно, Internet Explorer (даже в его 8-й версии) не поддерживает его, хотя знает довольно хорошо. В частности, поскольку иногда могут возникать проблемы с кодировкой кавычек, полезно указать числовые значения (см. Ниже).

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

 : lang (fr)> Q {quote: ‘« ’‘ »’}
: lang (de)> Q {quote: '»' '«' '2039' '203A'}  

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

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

cite определяет встроенную цитату или ссылку на другой источник. Пример:

  
 И  Боб  сказал:  Нет, я думаю, это банан . 
  

Подводя итог: для больших котировок используйте цитату , для небольших цитат используйте q , а для ссылок на другие источники следует использовать цитировать . На практике обычно используются только цитата и q .

Галерея цитат и цитат

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

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

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

1. Простой отступ

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

2. Цитаты и отступы

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

3. Линии и отступы

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

4. Цитаты, выделенные цветом

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

Натали Йост показывает случайную цитату из Библии в своем блоге

5. Вытягивающие цитаты

На самом деле мы знаем это из печати, где цитаты-соседи должны подчеркнуть какое-то важное сообщение или выдержки из интервью.Цитаты по запросу размещаются не внутри, а рядом с содержимым. Такие цитаты обычно короткие и не содержат дополнительной информации, поскольку их также можно найти в статье. В сети эту технику можно встретить довольно редко, но она имеет свое собственное очарование и — при правильном использовании и в правильных целях — может сильно поддерживать контент. Чтобы четко отделить «соседей» от основного контента, дизайнеры часто используют линии или большое количество пробелов.

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

Цитаты-соседи обычно размещаются справа контента, чтобы не прерывать поток читателя и оставаться пассивными.

6. Креативные решения

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

7. Цитаты как самостоятельный элемент

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

В отзывах цитаты иногда «вращаются», что означает, что из 5-7 отзывов одновременно отображается только один.

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

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

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

Взгляните на следующий пример. Наз Хамид в своих статьях использует как цитату (метка 2 на изображении выше), так и сноску. Ссылка на сноску и сама сноска взаимосвязаны: посетители могут щелкнуть ссылку и перейти к сноске. А в сноске значок «возврат» позволяет пользователю перейти от сноски к тому месту в статье, где она упоминается. Автор использует сноски, чтобы сделать личное замечание по поводу того, что было упомянуто в статье (ярлыки 1 и 2).

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

Учебники

Дополнительные ссылки

Вы также можете взглянуть на сообщения:

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

В более ранней версии Design View Энди Рутледжа использовались интересные цитаты, которые нарушали визуальный поток столбца.

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

Лучший стиль 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 в разделе Appearences -> Customizer.

В большинстве случаев вам нужно изменить селектор 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, но если у вас есть другие, которыми вы хотели бы поделиться, опубликуйте их в комментариях ниже.

Как стилизовать цитаты в WordPress с помощью CSS

Вы, наверное, помните концепцию цитат из школы. Если вы похожи на меня, то, возможно, вам даже снятся кошмары воспоминаний о правильном форматировании длинных цитат в формате MLA. Опустите кавычки, сделайте отступ, сделайте двойной интервал, чтобы…

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

Вы можете даже процитировать себя и использовать это как цитату!

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

Так что, если вам нужно настроить внешний вид цитат на вашем сайте, продолжайте читать, чтобы узнать, как стилизовать цитаты в WordPress.

Как стилизовать цитаты в WordPress с помощью CSS

Чтобы стилизовать цитаты вручную, вам нужно добавить в свою тему некоторый собственный CSS.Вы можете добавить этот CSS-код в дочернюю тему (узнайте, как создать дочернюю тему), в поле CSS Customizer WordPress или в пользовательских настройках CSS вашей темы (если в вашей теме есть такое поле).

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

Чтобы перейти к окну настройки CSS WordPress, выберите «Внешний вид»> «Редактировать CSS». Чтобы дать вам представление о том, с чего я начинаю, вот как цитаты выглядят в теме Twenty Seventeen по умолчанию:

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

Точно так же вы можете изменить толщину границ в моих примерах, увеличивая или уменьшая числа.

Хорошо, давайте разберемся, как стилизовать цитаты в WordPress…

Выровняйте цитату по центру

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

Для этого все, что вам нужно сделать, это добавить этот короткий фрагмент CSS:

blockquote {
max-width: 550px;
выравнивание текста: по центру;
маржа: 20 пикселей;
отступ: 20 пикселей;
}

Изменить шрифт, цвет и размер шрифта

Хорошо, пока все хорошо. Но как насчет того, чтобы еще немного перемешать? Давайте попробуем изменить шрифт, сделать его синим и увеличить размер. Я также сохраню выравнивание по центру из предыдущего примера:

blockquote {
max-width: 550px;
выравнивание текста: по центру;
маржа: 20 пикселей;
отступ: 20 пикселей; Семейство шрифтов
: Arial, Helvetica Neue, Helvetica, без засечек;
размер шрифта: 20 пикселей;
цвет: # 428bca;
}

Добавить фон

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

blockquote {
max-width: 550px;
выравнивание текста: по центру;
маржа: 20 пикселей;
отступ: 20 пикселей; Семейство шрифтов
: Arial, Helvetica Neue, Helvetica, без засечек;
размер шрифта: 20 пикселей;
цвет: # 428bca;
фон: #ccc;
}

Вы также можете закруглить углы фона, добавив радиус границы:

blockquote {
max-width: 550px;
выравнивание текста: по центру;
маржа: 20 пикселей;
отступ: 20 пикселей; Семейство шрифтов
: Arial, Helvetica Neue, Helvetica, без засечек;
размер шрифта: 20 пикселей;
цвет: # 428bca;
фон: #ccc;
радиус границы: 30 пикселей;
}

И если вы хотите добавить акцентную границу к своему фону, вы можете сделать что-то вроде этого, чтобы добавить границу, идущую вертикально вдоль левой стороны:

blockquote {
max-width: 550px;
выравнивание текста: по центру;
маржа: 20 пикселей;
отступ: 20 пикселей; Семейство шрифтов
: Arial, Helvetica Neue, Helvetica, без засечек;
размер шрифта: 20 пикселей;
цвет: # 428bca;
фон: #ccc;
border-left: 5px solid # 428bca;
}

Добавить линии к смещенным цитатам

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

Вот несколько вариантов:

Добавить скобки вокруг вашего блока цитата:

Для этого вы будете использовать частичные границы на всех четырех углах, чтобы сформировать своего рода «скобку» вокруг вашего блока цитата:

цитата {
max-width: 600 пикселей;
выравнивание текста: по центру;
маржа: 20 пикселей;
отступ: 20 пикселей; Семейство шрифтов
: Arial, Helvetica Neue, Helvetica, без засечек;
размер шрифта: 20 пикселей;
цвет: # 428bca;
граница слева: сплошной цвет 4px # 428bca;
граница-верх-левый-радиус: 30 пикселей;
граница-нижний-левый-радиус: 30 пикселей;
граница справа: сплошной цвет 4px # 428bca;
граница-верх-правый-радиус: 30 пикселей;
граница-нижний-правый-радиус: 30 пикселей;
}

Добавьте горизонтальные границы вокруг вашего блока цитата:

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

цитата {
max-width: 550px;
выравнивание текста: по центру;
маржа: 20 пикселей;
отступ: 20 пикселей; Семейство шрифтов
: Arial, Helvetica Neue, Helvetica, без засечек;
размер шрифта: 20 пикселей;
цвет: # 428bca;
border-top: 4px с точками # 428bca;
нижняя граница: 4 пикселя с точками # 428bca;
}

Понравилось это содержание? Познакомьтесь с Пейджем.

Если вы не поклонник пунктирной границы, все, что вам нужно сделать, это изменить «пунктирная» на «сплошная», чтобы получить что-то вроде этого:

Добавить кавычки

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

blockquote :: before {
content: "\ 201C ";
дисплей: блок;
размер шрифта: 80 пикселей;
слева: -230 пикселей;
верх: -50 пикселей;
позиция: относительная;
высота: 0;
}

Как стилизовать блочные цитаты WordPress с помощью плагина

Если использование CSS не совсем ваш стиль, вы все равно можете добавить немного изюминки в свои цитаты, используя такой плагин, как Perfect Pullquotes.

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

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

• цвет = «шестнадцатеричный код»
• размер = «число»

Вот и все! Два способа стилизовать отображение цитат в WordPress. Если вы ищете еще один отличный способ выделить текст в своих сообщениях, вы также можете добавить привлекательные цитаты «Нажмите, чтобы твитнуть». И еще один полезный способ разбить текст — это добавлять всплывающие подсказки к вашим сообщениям.

30+ бесплатных HTML-шаблонов с цитатами

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

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

Free Pull Quote (Blockquote) Примеры и HTML-шаблоны

Сегодня мы перечислили некоторые из лучших Blockquote HTML и CSS-элементов, которые вы можете использовать на любом веб-сайте, чтобы попробовать, а также показать цитаты из оригинальных источников с уникальными и особый дизайн или стили.С этими 30 тегами цитирования HTML вам не нужно использовать пустые холсты для отображения цитат на вашем веб-сайте. Это удобные для пользователя элементы, которые легко дублировать, изменять или настраивать в соответствии с вашими потребностями, поскольку они используют чистые коды CSS. Ниже вы найдете цитаты в разных стилях: от анимации до эффектов наведения и оформления в стиле типографики (не забудьте проверить лучшие инструменты для сочетания шрифтов) и многое другое.

Блокнот с цитатой HTML

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

Automatic Blockquote Bootstrap

Automatic Quotes — еще один тип дизайна цитат Люка Уоттса.Это считается Pullquote, потому что цитируемый текст отодвинут в сторону от основной части текста. Этот цитируемый текст заключен в кавычки и выделен яркими цветами, чтобы выделить его на странице. Кавычки добавляются к цитируемому тексту с помощью кодов CSS, все, что вам нужно сделать, это обернуть текст хорошими тегами, и CSS автоматически добавит кавычки, отсюда и название «Автоматические кавычки». Хотя этот элемент лучше работает как цитата, он все же может быть полезен для цитаты.

Циркулярный тег цитирования

в HTML

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

Альтернативные стили Q HTML

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

Примеры паттернов BQ

Паттерны BQ — исключительно укрощающий пример цитаты, прекрасно сделанный Дереком Уилденом. Разработчик использует три разных класса чистого CSS3 для создания этой цитаты. Из трех классов CSS последний является элементом нижнего колонтитула, который цитирует источник цитаты.Также необязательно использовать эту функцию для людей, которые хотели бы добавить ее в свою работу, но, как правило, для простоты она может не понадобиться. Это просто показывает, как использование специальных шрифтов и немного CSS может сделать отличные вещи.

Material Design Blockquote

Эта цитата из материала настолько классная, что в ней используются правила цвета и стиля Google Material Design. По-настоящему потрясающая часть этого материала с цитатой — это фоновый значок, который придает ему истинный вид.Цвет шрифта можно изменить в соответствии с вашими требованиями, чтобы он соответствовал вашему веб-сайту. Цитата о материальном дизайне, вероятно, одна из самых крутых бесплатных цитат, которые вы найдете в Интернете.

Классный Дизайн цитат

Если вы ищете стильный способ цитировать людей, источники и т. Д. На своем веб-сайте с фотографией человека, которого вы цитируете, то эти классные цитаты, созданные Эндрю Райтом, — это определенно то, что вам нужно. Это придаст вашему сайту потрясающий эффект.На странице разработчиков Codepen он использует заполнители в цитатах для изображений, что выглядит просто. Хотя вы можете настроить некоторые цвета, шрифты и добавить изображение человека, которого вы цитируете, чтобы сделать его более интересным. Classy Blockquotes имеет довольно простой дизайн, и его легко изменить или настроить по своему вкусу.

Серый

Блок iCon

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

Поднятые Примеры цитат

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

Simple

Block Pull Quote Html

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

Цитата Пример стиля

Вы ищете минималистичную и простую профессиональную цитату CSS? Well Quote Example — это ответ с ясным и простым фоном. Первый пример сверху имеет один фон с заполнителем для текста и заголовков.Кроме того, он включает в себя значок цитаты на заднем плане, что добавляет творчества в его дизайн. Внизу второй пример предлагает другой дизайн цитаты. В нем есть текстовое поле, атрибут на полях и кредит в нижнем колонтитуле, указывающий на человека, которого вы цитируете. Все делается с использованием CSS-кодов, их очень легко воспроизвести на вашем сайте.

CSS Quote Effect

Сохранение простоты и чистоты на любом веб-сайте является приоритетом, и CSS Quote Effect предлагает именно это благодаря своему уникальному дизайну от 14Islands.Эта цитата блока поставляется с расширенными стилями, и она очень привлекательна, CSS добавляет ей штрих, а также использует JavaScript и HTML. Эффект цитаты CSS разработан с черным фоном, эффектами затухания и размытия, с белыми текстами, которые улучшают его дизайн. Вы можете анимировать цитаты слово за словом, чтобы получить гипнотический результат. В целом, его можно настроить, и вы можете изменить цвета в соответствии со своими потребностями.

Фигурные цитаты CSS

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

Цитата

Авторы — Современные стили цитат

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

Карточки с цитатами Блокирующие цитаты с использованием CSS

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

Перемещение цитаты с использованием HTML и CSS

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

Цитаты Анимация Blockquote Using-HTML & CSS

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

Flexbox Coffee Quote Blockquote

Flexbox Coffee quote — это привлекательная цитата с гибким дизайном.Созданный Джейкобом Летом, он вам обязательно понравится. Этот дизайн цитаты автоматически подстраивается под размер вашего экрана в зависимости от устройства, которое вы используете для его просмотра. Фон кофейно-коричневого цвета является единственным источником вдохновения для его названия, и вы не захотите пропустить его, не проверив сначала. Дизайнер решил использовать огромный значок «&» на заднем плане, а кавычки вокруг цитируемого текста ясно показывают различие в дизайне.

Quote Примеры карточек

Это еще один тип дизайна карточек с цитатами с уникальным подходом от дизайнера Сабины Робарт. Эта карточка с цитатами очень привлекательна и отображает цитаты в тонкой манере. Он использует коды CSS и HTML в качестве основы для своей структуры с потрясающими функциями, такими как анимация, элемент нижнего колонтитула для имени автора или источника и т. Д. Внизу карточки находится кнопка «Далее», при нажатии на которую вы переходите к следующей карточке с красивыми эффектами слайда и перехода.Вверху карты находится нумерация страниц, на которой указан номер каждой карты.

Дизайн цитаты с использованием HTML и CSS

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

Непрерывная граница изображения Цитата

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

Блоки цитат Flexbox

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

Стилизация цитат с использованием CSS3

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

Quote

Test Blockquote Design

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

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

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

CSS Blockquote Box

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

Flexbox Quote Box

Если у вас есть веб-сайт с тяжелым текстом, вам понадобится поле с цитатами flexbox для добавления творческого контента. В дизайне цитат есть черный ящик с красивыми шрифтами и текстом цитат.Прелесть flexbox quote ox — это его фоновое изображение, которое представляет собой красочный узор, который упрощает работу. Этот дизайн цитаты использует только структуру CSS с элементом нижнего колонтитула, в котором размещается имя или источник исходной цитаты. Все настраивается, поэтому вы можете изменить изображение в фоновом режиме на все, что захотите.

Quote Animation Inspiration

Quote Animation Inspiration — отличный дизайн цитат, который включает простые структуры CSS для расширенных эффектов наведения и анимации.Это придает ему уникальный дизайн, в котором цитаты и текст содержат одинаковые простые шрифты, а фоновый холст выполнен в белом цвете. Создатель использовал 3 анимированных эффекта, чтобы сделать переход цитат плавным и крутым. Первый переход — это эффект исчезновения при наведении курсора мыши на цитату, он становится прозрачным, а автор или источник цитаты видны. Второй раскрывает имя автора или источника в кавычках влево, а третий использует эффекты скольжения вниз.

Цитата CSS Поле Эффект наведения

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

Subtle Blockquote

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

Заключение

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

Как создать пользовательские виджеты цитат блока начальной загрузки? »WebNots

Bootstrap — один из популярных бесплатных фреймворков, который помогает создавать красивые веб-макеты. Существует множество бесплатных и премиальных тем, доступных с использованием макета сетки Bootstrap. Помимо использования всего фреймворка, вы также можете добавить на свой веб-сайт отдельные элементы Bootstrap. В этой статье давайте обсудим, как создавать блочные кавычки Bootstrap с разными стилями.

Узнайте, как создавать блочные котировки в Weebly и WordPress.

Общая проблема при использовании виджетов начальной загрузки

Bootstrap предлагает множество отдельных элементов в виде привлекательных виджетов, таких как индикаторы выполнения и таблицы. Однако для использования этих виджетов вам потребуются CSS и JavaScript фреймворка. Большинство владельцев сайтов не используют Bootstrap, поскольку они используют другие системы управления контентом, такие как Weebly или WordPress. Вставка Bootstrap CSS приведет к поломке других элементов, перекрывая их с основной таблицей стилей темы.

Вы можете решить эту проблему, используя только стиль требуемого виджета.Кроме того, вы можете скопировать стиль элемента Bootstrap в свой собственный стиль. Мы также создадим блочные кавычки, ссылаясь только на необходимые классы CSS без использования всей таблицы стилей « bootstrap.min.css ».

Виджет котировок блока Bootstrap

Вам необходимо загрузить CSS / HTML и вставить код на свой веб-сайт для создания виджетов с цитатами. Различные конструкторы веб-сайтов и системы управления контентом предлагают разные методы для вставки кода HTML / CSS.Например, вы можете использовать элемент Embed Code на Weebly, а блок Custom HTML в редакторе WordPress Gutenberg. Если вы используете сайт HTML или Bootstrap, добавьте код CSS в раздел «Заголовок» и код HTML в раздел «Тело» страницы.

Вы можете просмотреть демонстрацию виджетов блочных цитат, чтобы почувствовать себя.

Компоненты виджетов Bootstrap Block Quote

Каждая цитата блока состоит из двух компонентов:

• Цитата и
• Ссылка или текст автора

С помощью этих двух вещей мы можем поиграть с границами, фоном и цветами.Сначала давайте создадим простой стиль цитаты, как показано ниже. Мы используем тот же основной цвет # c97e69, что и в фреймворке Bootstrap.

CSS для цитат блока стиля начальной загрузки

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

 <стиль>
blockquote {
граница: 1px solid # b3b3b3;
граница слева: сплошная 10px # b3b3b3;
радиус границы: 0 пикселей;
фон: #fafafa;
размер шрифта: 18 пикселей;
маржа: 10 пикселей;
отступ: 10 пикселей 20 пикселей;
}

blockquote p {
маржа: 0;
высота строки: 30 пикселей;
padding-bottom: 20 пикселей;
}

цитата.маленький {
дисплей: блок;
размер шрифта: 80%;
коричневый цвет;
выравнивание текста: вправо;
}
 

Мы использовали классы «blockquote p» и «blockquote .small» для стилизации текста и имени автора соответственно. Цитата блока на веб-странице с приведенным выше CSS должна выглядеть примерно так, как показано ниже (давайте объясним часть HTML позже).

Базовая цитата по Bootstrap

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

 цитата.bg-gray {
фон: # 555555;
граница: 1px solid # b3b3b3;
граница слева: сплошная 10px # b3b3b3;
цвет: #ffffff;
}

blockquote.bg-primary {
фон: # c97e69;
граница: 1px solid # c97e69;
граница слева: твердое тело 10 пикселей # c97e69;
цвет: #ffffff;
}

blockquote.primary {
граница: 1px solid # c97e69;
граница слева: твердое тело 10 пикселей # c97e69;
}

blockquote.right.primary {
цвет границы: # c97e69;
граница слева: 1px solid # c97e69;
граница справа: твердое тело 10 пикселей # c97e69;
}

blockquote.right {
выравнивание текста: вправо;
ширина границы: 1px 10px 1px 1px;
} 

HTML для цитат блока начальной загрузки

Теперь, когда у нас есть весь необходимый CSS и время поиграть с HTML, комбинируя разные классы.Например, вы можете создать цитату с серым фоном и основным цветом границы как # c97e69. Ниже приведен HTML-код этого виджета:

.

 <цитата>

 "Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea product dolor incididunt ut labore et dolore magna aliqua. репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum. "

 Кто-то известный в
 Название источника 

Результат будет выглядеть следующим образом:

Цитата Bootstrap с настраиваемым стилем

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

Стили цитат Bootstrap Тег HTML

— использование, атрибуты, примеры

Тег

используется для определения длинных кавычек внутри документа. Браузеры обычно делают отступ для элементов

.

URL-адрес источника цитаты может быть указан с помощью атрибута cite, тогда как текстовое отображение источника может быть предоставлено с помощью элемента .

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

Тег

помещается внутри тега.

Вы можете использовать свойства margin-right и / или margin-left или сокращенное свойство margin для изменения отступа, применяемого к цитируемому тексту.

Для коротких цитат в документе используйте тег .

Синтаксис¶

Тег

состоит из пар. Контент записывается между открывающим (

) и закрывающим (

) тегами.

Пример HTML-тега

: ¶

  

  
    
  
  
    Цитата Чеширского кота из популярной детской книги «Алиса в стране чудес», написанная Льюисом Кэрроллом.
    

      Я не сумасшедший, моя реальность просто отличается от вашей.
    
 
  

Попробуйте сами »

Результат¶

Пример HTML-тега

, используемого с тегом : ¶

  

  
    
  
  
    
 Цитата Чеширского кота из популярной детской книги «Алиса в стране чудес», написанная Льюисом Кэрроллом 
    

      Я не сумасшедший, моя реальность просто отличается от вашей.
    
     Кто может, тот делает, кто не может, учит. 
  
  

Попробуйте сами »

Атрибуты¶

также поддерживает глобальные атрибуты и атрибуты событий.

Как стилизовать тег

?

Общие свойства для изменения визуального веса / выделения / размера текста в теге

:

• Свойство CSS font-style устанавливает стиль шрифта.нормальный | курсив | косой | начальная | наследовать.
Свойство CSS font-family
• определяет приоритетный список из одного или нескольких названий семейств шрифтов и / или родовых названий семейств для выбранного элемента.
• Свойство CSS font-size устанавливает размер шрифта.
• Свойство CSS font-weight определяет, должен ли шрифт быть жирным или толстым.
• Свойство CSS text-transform управляет регистром текста и заглавными буквами.
• Свойство CSS text-decoration определяет украшение, добавленное к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Раскрашивание текста в теге

:

• Свойство цвета CSS описывает цвет текстового содержимого и оформления текста.
• Свойство CSS background-color устанавливает цвет фона элемента.

Стили макета текста для тега

:

• Свойство CSS text-indent определяет отступ первой строки в текстовом блоке.
• Свойство CSS text-overflow указывает, как пользователю следует сигнализировать о переполненном содержимом, которое не отображается.
• CSS свойство white-space определяет, как обрабатывается белое пространство внутри элемента.
• Свойство CSS word-break указывает, где строки должны быть разорваны.

Другие свойства, на которые стоит обратить внимание для тега

:

---

Простые способы стилизации цитат в WordPress

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

Чтобы изменить CSS по умолчанию, связанный с цитатами, вы можете сделать одно из двух. Первый, если вам повезет, — это просто добавить код в поле Custom CSS, предоставленное вашей темой. Однако, если вам не повезло, вам нужно будет отредактировать таблицу стилей вашей темы, а это значит, что вам действительно следует сначала создать дочернюю тему (подробнее об этом здесь!)

Когда вы будете готовы, вот несколько простых способов стилизовать ваши цитаты в WordPress, чтобы они выделялись.

1. Изменение текста

Один из самых простых способов выделить один блок текста из другого — просто изменить его внешний вид. Это может быть размер, цвет или даже сам шрифт. Вот пример, который объединяет все эти изменения.

 
blockquote {
максимальная ширина: 600 пикселей;
маржа: 20 пикселей;
отступ: 20 пикселей;
выравнивание текста: центр;
семейство шрифтов: с засечками;
размер шрифта: 22 пикселя;
цвет: # 38b6cd;
}

 

2. Добавление фигур

Один из моих любимых способов стилизовать цитату — добавить очень простые и элегантные формы, чтобы «заблокировать» цитату (каламбур).Вот несколько примеров:

 
blockquote {
максимальная ширина: 600 пикселей;
маржа: 20 пикселей;
отступ: 20 пикселей;
выравнивание текста: центр;
семейство шрифтов: без засечек;
размер шрифта: 16 пикселей;
цвет: # 7f7f7f;
граница-верх: 2px solid # 38b6cd;
нижняя граница: 2px solid # 38b6cd;
}

 

 
 blockquote {
 максимальная ширина: 600 пикселей;
 маржа: 20 пикселей;
 отступ: 10 пикселей;
 выравнивание текста: центр;
 семейство шрифтов: без засечек;
 размер шрифта: 16 пикселей;
 цвет: # 7f7f7f;
 граница слева: 6px solid # 38b6cd;
 граница-верх-левый-радиус: 20 пикселей;
 граница-нижний-левый-радиус: 20 пикселей;
}
 

3.Создание фона

Если вам нужен более смелый подход, добавьте цвет фона в свои цитаты.

 
blockquote {
максимальная ширина: 600 пикселей;
маржа: 20 пикселей;
отступ: 20 пикселей;
выравнивание текста: центр;
семейство шрифтов: без засечек;
размер шрифта: 16 пикселей;
цвет: #ffffff;
цвет фона: # 38b6cd;
радиус границы: 20 пикселей;
}

 

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

 
blockquote {
максимальная ширина: 600 пикселей;
маржа: 20 пикселей;
отступ: 20 пикселей;
выравнивание текста: центр;
семейство шрифтов: без засечек;
размер шрифта: 16 пикселей;
цвет: # 5e5d5d;
цвет фона: # f1fbff;
радиус границы: 20 пикселей;
}

 

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

---

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

Загрузите бесплатное руководство!

.