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

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

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

Вариант 1

blockquote1

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

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

Вариант 2

blockquote2

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

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

Вариант 3

blockquote3

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

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

Вариант 4

blockquote4

Код для добавления в 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

blockquote5

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

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

Не забывайте оценивать и комментировать статьи, чтобы автор понимал — стоит ли писать на похожие темы или это интересно только ему одному :)

Похожие записи

  • keyboard_arrow_downОформление цитат (blockquote) в WordPress при помощью CSS
    • Автор:
    • Язык: ru-RU
    • Миниатюра: Оформление цитат (blockquote) в WordPress при помощью CSS
    • Рубрика: Wordpress
    • Обновлено: 21.12.2016
    • Комментариев: 1
    • Просмотров: 1 483
      • searchПоисковые боты
        Дата Бот
        2018-01-19 04:26:59 Google
        2018-01-18 19:48:54 Google
        2018-01-18 07:50:11 Yandex
        2018-01-15 21:51:48 Bing
        2018-01-15 11:28:21 Yandex
        2018-01-13 10:43:11 Google
        2018-01-12 13:39:55 Yandex
        2018-01-12 03:54:11 Mail.RU
        2018-01-10 05:59:04 Google
  • Оцените пожалуйста статью
    1 Star2 Stars3 Stars4 Stars5 Stars
    Loading Загрузка...
  • Поделитесь с друзьями
GeekElectronics

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

  • Avatar for source
    Агент 00x:

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

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

arrow_upward