Блог о программировании, электронике и рыбалке

Оформление цитат (blockquote) в WordPress при помощью CSS

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

Вариант 1

цитата Wordpress CSS blockquote  wordpress

Код для добавления  в style.css вашей темы:

blockquote {
    margin: 1em 3em;
    color: #999;
    border-left: 2px solid #999;
    padding-left: 1em; }

Вариант 2

цитата Wordpress CSS blockquote  wordpress

Код для добавления в style.css вашей темы:

blockquote {
    margin: 1em 3em;
    padding: .5em;
    background-color: #f6ebc1; }
blockquote p {
    margin: 0; }

Вариант 3

цитата Wordpress CSS blockquote  wordpress

Код для добавления в style.css вашей темы:

blockquote {
    margin: 1em 3em;
    padding: .5em 1em;
    border-left: 5px solid #fce27c;
    background-color: #f6ebc1; }
blockquote p {
    margin: 0; }

Вариант 4

цитата Wordpress CSS blockquote  wordpress

Код для добавления в style.css вашей темы:

blockquote {
    margin: 1em 2em;
    border-left: 1px dashed #999;
    padding-left: 1em; }
blockquote p:first-letter {
    float: left;
    margin: .2em .3em .1em 0;
    font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
    font-size: 220%;
    font-weight: bold; }
blockquote p:first-line {
    font-variant: small-caps; }

Вариант 5

цитата Wordpress CSS blockquote  wordpress

Код для добавления в style.css вашей темы:

blockquote {
    color: #66a;
    font-weight: bold;
    font-style: italic;
    margin: 1em 3em; }
blockquote p:before {
    content: '"'; }
blockquote p:after {
    content: '"'; }

  • vertical_align_bottomОформление цитат (blockquote) в WordPress при помощью CSS
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/wp-content/uploads/2017/05/blockquote1_thumb.png
    • Рубрика: Wordpress
    • Метки: , , ,
    • Обновлено: 21.12.2016
    • Комментариев: 1
    • Просмотров: 1 441
  • Рейтинг:
    1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 3,00 out of 5)
    Загрузка...
  • Поделиться:
logo

Комментариев: 1

  • Агент 00x:

    Спасибо за подробный мануал! Но я не люблю готовые варианты, всегда делаю что-нибудь свое. Разобрался-то сразу, чего там найти нужный кусок css, так из-за кэша ничего не выходило, вот полез гуглить. Надеюсь мой коммент кому-нибудь поможет)

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

vertical_align_top
banner